<!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>
<div class="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>
<div class="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>
<div class="box3">
<ul class="list3">
<li>滚动消息：666666</li>
<li>滚动消息：111111</li>
<li>滚动消息：222222</li>
<li>滚动消息：333333</li>
<li>滚动消息：444444</li>
<li>滚动消息：555555</li>
</ul>
</div>
<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