• 轮播


    <!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>Document</title>
     
     </head><script src="jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
    $(function() {
    var $this = $("#news");
    var scrollTimer;
    $this.hover(function() {
    clearInterval(scrollTimer);
    }, function() {
    scrollTimer = setInterval(function() {
    scrollNews($this);
    }, 1000);
    }).trigger("mouseleave");


    function scrollNews(obj) {
    var $self = obj.find("ul");
    var lineHeight = $self.find("li:first").height();
    $self.animate({
    "marginTop": -lineHeight + "px"
    }, 800, function() {
    $self.css({
    marginTop: 0
    }).find("li:first").appendTo($self);
    })
    }
    })
    </script>
     <style>
     ui,li {
    list-style: none;
    }
    #news{
    height: 75px;
    overflow: hidden;
    }




     </style>
     <body>
      <div id="news">
    <ul>
    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="aaaaaaaaaaaaaaa">aaaaaaaaaaaaaaa</a></li>
    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="bbbbbbbbbbbbbbb">bbbbbbbbbbbbbbb</a></li>
    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="ccccccccccccccc">ccccccccccccccc</a></li>
    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="ddddddddddddddd">ddddddddddddddd</a></li>
    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="eeeeeeeeeeeeeee">eeeeeeeeeeeeeee</a></li>
    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="fffffffffffffff">fffffffffffffff</a></li>
    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="ggggggggggggggg">ggggggggggggggg</a></li>
    </ul>
    </div>




     </body>
    </html>

  • 相关阅读:
    得到一个文件夹中所有文件的名称的几个方法(命令指示符, C++, python)
    C++ 使用命名规范
    【前端】直击源头的让你3秒理解并且会用Jsonp!!!
    React Native新手入门
    【方法】纯jQuery实现星巴克官网导航栏效果
    【方法】jQuery无插件实现 鼠标拖动切换图片/内容 功能
    【总结】前端框架:react还是vue?
    【总结】2017年当下最值得你关注的前端开发框架,不知道你就OUT了!
    【疑点】<p></p>标签为什么不能包含块级标签?还有哪些特殊的HTML标签?
    【总结】最常用的正则表达式大全,你要找的这里都有!
  • 原文地址:https://www.cnblogs.com/zhengleilei/p/9576339.html
Copyright © 2020-2023  润新知