jq公告上下滚动

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.     <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>开拓者博客</title>
  6.     <!-- jq cdn镜像库 www.150643.com-->
  7.     <script src="http://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
  8.     </head>
  9.     <body>
  10.     <!-- div -->
  11.     <div class="scroll-wrap" style="height: 16px; overflow: hidden;">
  12.     <ul class="scroll-con fn-left" style="margin-top: 0px;">
  13.                     <li style="height: 16px; line-height: 16px; overflow: hidden;">
  14.                         <a href="https://150643.com">潍坊网站建设_宏源网络</a>
  15.                     </li>
  16.                     <li style="height: 16px; line-height: 16px; overflow: hidden;">
  17.                         <a href="https://150643.com">潍坊网站建设_宏源网络2</a>
  18.                     </li>
  19.                     <li style="height: 16px; line-height: 16px; overflow: hidden;">
  20.                         <a href="https://150643.com">潍坊网站建设_宏源网络3</a>
  21.                     </li>
  22.                     <li style="height: 16px; line-height: 16px; overflow: hidden;">
  23.                         <a href="https://150643.com">潍坊网站建设_宏源网络4</a>
  24.                     </li>
  25.     </ul>
  26.     </div>
  27.     <!-- div end -->
  29.     </body>
  30.     <script type="text/javascript">
  31.     /*公告滚动*/
  32.     $(function(){
  33.         var len = $(".scroll-con li").length;
  34.         console.log(len);
  35.         if(len > 1){
  36.             textRoll=function(){
  37.                 $(".scroll-wrap").find(".scroll-con").animate({
  38.                     marginTop : "-16px"
  39.                 },500,function(){
  40.                     $(this).css({marginTop : "0px"}).find("li:first").appendTo(this);
  41.                 });
  42.             };
  43.             var roll= setInterval('textRoll()',2000);
  44.             $(".scroll-con li").hover(function() {
  45.                 clearInterval(roll);
  46.             }).mouseout(function(){
  47.                 roll= setInterval('textRoll()',5000);
  48.             });
  49.         }
  50.     })
  51.     </script>
  52.     </html>
weinxin
我的微信
把最实用的经验，分享给最需要的读者，希望每一位来访的朋友都能有所收获！
avatar

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: