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 -->
  28.     </body>
  29.     <script type="text/javascript">
  30.     /*公告滚动*/
  31.     $(function(){
  32.         var len = $(".scroll-con li").length;
  33.         console.log(len);
  34.         if(len > 1){
  35.             textRoll=function(){
  36.                 $(".scroll-wrap").find(".scroll-con").animate({
  37.                     marginTop : "-16px"
  38.                 },500,function(){
  39.                     $(this).css({marginTop : "0px"}).find("li:first").appendTo(this);
  40.                 });
  41.             };
  42.             var rollsetInterval('textRoll()',2000);
  43.             $(".scroll-con li").hover(function() {
  44.                 clearInterval(roll);
  45.             }).mouseout(function(){
  46.                 rollsetInterval('textRoll()',5000);
  47.             });
  48.         }
  49.     })
  50.     </script>
  51.     </html>
weinxin
我的微信
把最实用的经验,分享给最需要的读者,希望每一位来访的朋友都能有所收获!
avatar

Comment

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