js小功能:定時器之滑動的ul
<!DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul{margin: 0;padding: 0;}
li{list-style: none}
.box{width: 100px;height: 150px;margin:100px auto;position: relative;overflow: hidden;}
.box2{width: 112px;height:56px;position: relative;margin: 0 auto;border: 3px solid red;overflow: hidden;}
.list2{position: absolute;width:400%;left: -56px;}
.list2 li{float: left;width:56px;height: 56px;line-height: 56px;text-align: center;font-size:20px;font-weight: 600;}
.list2 li:nth-child(even){background:#EBB440}
.list2 li:nth-child(odd){background:#00A0E8}
.box3{background: #EBB440;width:150px;margin: 30px auto;height: 35px;position: relative;overflow: hidden;}
.list3{position: absolute;top:-35px;width: 100%}
.list3 li{height: 35px;line-height:35px;text-align: center;}
</style>
</head>
<body>
<divclass="box">
<ul class="list">
<li>111111</li>
<li>222222</li>
<li>333333</li>
<li>444444</li>
<li>555555</li>
<li>666666</li>
<li>777777</li>
<li>888888</li>
</ul>
</div>
<divclass="box2">
<ul class="list2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
<divclass="box3">
<ul class="list3">
<li>滾動訊息：666666</li>
<li>滾動訊息：111111</li>
<li>滾動訊息：222222</li>
<li>滾動訊息：333333</li>
<li>滾動訊息：444444</li>
<li>滾動訊息：555555</li>
</ul>
</div>
<scriptsrc="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
(function () {
var scrtime;
$(".list").hover(function(){
clearInterval(scrtime);
},function(){
scrtime = setInterval(function(){
var $ul = $(".list");
var liHeight =$ul.find("li:last").height();
$ul.animate({marginTop :-liHeight+"px"},800,function(){
$ul.find("li:first").appendTo($ul);
$ul.find("li:last").hide();
$ul.css({marginTop:0});
$ul.find("li:last").fadeIn(1000);
});
$ul.find("li").eq(":first").fadeOut(1000);
},2400);
}).trigger("mouseleave");
})();
(function () {
var scrtime;
$(".list2").hover(function(){
clearInterval(scrtime);
},function(){
scrtime = setInterval(function(){
var $ul =$(".list2");
var liHeight =$ul.find("li:last").width();
$ul.animate({marginLeft :liHeight+"px"},800,function(){
$ul.find("li:last").prependTo($ul);
$ul.find("li:first").hide();
$ul.css({marginLeft:0});
$ul.find("li:first").fadeIn(1000);
});
$ul.find("li").eq(":last").fadeOut(1000);
},2400);
}).trigger("mouseleave");
})();
(function () {
var scrtime;
$(".list3").hover(function(){
clearInterval(scrtime);
},function(){
scrtime = setInterval(function(){
var $ul =$(".list3");
var liHeight =$ul.find("li:last").height();
$ul.animate({marginTop :liHeight+"px"},800,function(){
$ul.find("li:last").prependTo($ul);
$ul.find("li:first").hide();
$ul.css({marginTop:0});
$ul.find("li:first").fadeIn(1000);
});
$ul.find("li").eq(":last").fadeOut(1000);
},2400);
}).trigger("mouseleave");
})();
</script>
</body>
</html>
需要web前端課程工具和電子書，可以加君羊120342833