zoukankan      html  css  js  c++  java
  • 轮播

    <!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>

  • 相关阅读:
    scrapy-redis使用以及剖析
    完全理解 Python 迭代对象、迭代器、生成器
    Python操作 RabbitMQ、Redis、Memcache、SQLAlchemy
    HTTP状态码
    Py西游攻关之RabbitMQ、Memcache、Redis
    Django contenttypes 应用
    cookie和session 以及Django中应用
    RESTful规范
    rest_framework框架的认识
    vue 总结
  • 原文地址:https://www.cnblogs.com/zhengleilei/p/9576339.html
Copyright © 2011-2022 走看看