<!DOCTYPE html>
<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>
- 111111
- 222222
- 333333
- 444444
- 555555
- 666666
- 777777
- 888888
- 滚动消息：666666
- 滚动消息：111111
- 滚动消息：222222
- 滚动消息：333333
- 滚动消息：444444
- 滚动消息：555555
<script src="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
