js小功能:定时器之滑动的ul

<!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
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 滚动消息: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

收藏 0分享浏览 745
2年前
跟帖
暂无
说几句
广告位 点击查看投放指南

我的收藏