<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 (); // bubble effect
var popTimer = the setInterval (function () {
NUM ++ ;
IF (NUM> = . 4 ) {
NUM = 0 ;
}
popHead ();
}, 1000 ) ;
});
// picture bubble effect
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>