<style>
/*头像气泡*/
.popHead {
position: relative;
/*border: 1px solid red;*/
width: 14vw;
height: 33vw;
overflow: hidden;
left: 85vw;
text-align: center;
/*padding-left: 2.5vw;*/
}
.popHead .scrollUl li {
position: absolute;
display: inline-block;
top: 100%;
white-space: nowrap;
z-index: 100;
background: rgba(0, 0, 0, 0.5);
width: 7vw;
height: 7vw;
border-radius: 12vw;
list-style: none;
right: 1.5vw;
opacity: 1;
}
</style>
//html
<body>
<div class="popHead">
<ul class="scrollUl">
<li><img src="" style="height: 100%;width:100%;"/></li>
<li><img src="" style="height: 100%;width:100%;"/></li>
<li><img src="" style="height: 100%;width:100%;"/></li>
<li><img src="" style="height: 100%;width:100%;"/></li>
</ul>
</div>
</body>
<script>
var num = 0;
$(function(){
popHead();//气泡效果
var popTimer = setInterval(function () {
num++;
if (num >= 4) {
num = 0;
}
popHead();
}, 1000);
});
//头像气泡效果
function popHead() {
$('.scrollUl li').eq(num).animate({
'top': '0',
'width': '11vw',
'height': '11vw',
'opacity': 0
}, 3000, function () {
$(this).css({top: '100%', width: '7vw', height: '7vw', 'opacity': 1});
});
}
</script>
html中气泡头像效果
猜你喜欢
转载自www.cnblogs.com/-lin/p/11610917.html
今日推荐
周排行