前言：外部资源需要jquery ,和三张小图片
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
html, body {width:100%; height:100%; padding:0; margin:0;}
.showbox{
width: 405px;
height: 343px;
margin-left: auto;
margin-right: auto;
border: 1px solid #ddd;
position: relative;
overflow: hidden;
}
.item{
position: absolute;
left: 402px;
top: 0;
transform: translate();
white-space: nowrap;
font-size: 12px;
width: 125px;
height: 61px;
line-height: 61px;
text-align: center;
}
</style>
</head>
<body>
<div class="showbox">
</div>
<script src="jquery.min.js"></script>
<script>
var shtml='';
var num='';
var arr=["这是111","这是文本","这是"];
var i=0;
var runleft;
var times;
var t = setInterval(function(){
var ii = i+1;
if( arr.length == ii ){
clearInterval(t);
}
num = Math.round(Math.random()*220+50);
var num2 = Math.round(Math.random()*2+1);
shtml=`<div class="item item`+i+`" style="Position:absolute;top:`+num+`px;background: url(`+num2+`.png)no-repeat center;background-size: 100% 100%;">`+arr[i]+`</div>`;
$(".showbox").append(shtml);
var obj = $(`.item`+i);
var w = $(`.item`+i).css("width");
fun(obj,w,6000);
i++;
},1500)
function fun(obj,w,time) {
times = time;
runleft = "-"+w;
$(obj).stop().animate({'left':runleft},time,function(){
$(obj).remove();
})
}
$(".showbox").on("mouseover",".item",function(){
$(this).stop();
})
$(".showbox").on("mouseout",".item",function(){
var ww = '-'+$(this).css("width")
$(this).stop().animate({'left':ww},times,function(){
$(this).remove();
})
})
</script>
</body>
</html>
365
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
