zoukankan      html  css  js  c++  java
  • 新闻无缝滚动

      <div id="news">
            	<ul></ul>
        	  </div>
    

      

     ul,li {
            list-style: none;
        }
        
        #news{
            height: 75px;
            overflow: hidden;
            padding: 1rem;
        }
        
       #news ul {
            padding: 0;
            line-height: 1.5rem;
            text-align:center;
        }
    

      

    $(function() {
        var list = [
            "1小时前 张*锋 186****0928 报名了西点班",
            "1小时前 李*锋 186****0928 报名了西点班",
            "1小时前 宋*锋 186****0928 报名了西点班",
            "1小时前 王*锋 186****0928 报名了西点班",
            "3分钟前 赵*锋 186****0928 报名了西点班",
            "刚刚 方*锋 186****0928 报名了西点班",
            "20分钟前 袁*锋 186****0928 报名了西点班"
        ];
        for(i = 0;i<list.length;i++){
            $("#news ul").append("<li>" + list[i] + "</li>");
        }
        
    
        var $this = $("#news");
        var scrollTimer;
        $this.hover(function() {
            clearInterval(scrollTimer);
        }, function() {
            scrollTimer = setInterval(function() {
                scrollNews($this);
            }, 2000);
        }).trigger("mouseleave");
    
        function scrollNews(obj) {
            var $self = obj.find("ul");
            var lineHeight = $self.find("li:first").height(); 
            $self.animate({
                "marginTop": -lineHeight + "px"
            }, 600, function() {
                $self.css({
                    marginTop: 0
                }).find("li:first").appendTo($self);
            })
        }
    })
    

      

  • 相关阅读:
    InterView
    单例设计模式(附AS3)
    网络游戏的分类
    flex的动态链接库和静态链接库
    flash 中位图九宫格的用法
    删除Flex Builder中没用的工作空间
    一个3D游戏DEMO, 同步教程更新
    LVS NET部署
    zabbix安装
    MySQL+keepalived高可用配置
  • 原文地址:https://www.cnblogs.com/dfghjkl/p/10038132.html
Copyright © 2011-2022 走看看