码迷,mamicode.com
首页 > 其他好文 > 详细

新闻滚动

时间:2017-02-09 13:18:01      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:z-index   this   dex   use   font   str   innerhtml   idt   timer   

HMTL

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
         *{
             padding:0;
            margin:0;
         }
         li{ 
             vertical-align:bottom;  
            list-style-type:none;
         }
         .hotNews {
             width:100%;
             background: #000;
             position: relative;
             overflow:hidden;
        }
        .hotNews  ul{
            height:24px;
            overflow:hidden;
            margin-left:10px;
        }
        .hotNews ul li{
            height:24px;
            line-height:24px;
            color:#fff;
            font-size: 12px;
        }
        .notice_close{
             position: absolute;
             right:15px;
             top:50%;
             width:20px;
             margin-top:-10px;
             z-index: 1;
         }
        </style>
    </head>
    <body>
        <div class="hotNews" id="hotNews">
            <ul id="hotNewsUl">
                 <li>任志强:房价不高,胸罩比房子还暴利</li>
                 <li>木子美:约炮不是卖淫也不是性骚扰</li>
                 <li>里宁:现在的男人几乎没有不出轨的</li>
                 <li>李剑芒:毛时代农民进城隔夜不归是罪</li>
                 <li>冯学荣:北洋时期媒体可随意讽刺政府</li>
            </ul>
            <img  class="notice_close" src="regCloseIndex.png" />
        </div>
    </body>
</html>

JS插件

<script type="text/javascript">
function scollNew(element){
    if(arguments.length>1){
       for(var i=0,length=arguments.length,elements=[];i<length;i++){
           elements.push(scollNew(arguments[i]));
       };
      return elements;
    };
    if(typeof element=="string"){
      return document.getElementById(element);
    }else{
      return element;
    };
}
var Class={
    create:function(){
        return function(){
            this.initialize.apply(this,arguments);
        }
    }
}
Function.prototype.bind=function(object){
    var method=this;
    return function(){
         method.apply(object,arguments);
    }
}
var Scroll=Class.create();
Scroll.prototype={
     initialize:function(element,height){
      this.element=scollNew(element);
      this.element.innerHTML+=this.element.innerHTML;
      this.height=height;
      this.maxHeight=this.element.scrollHeight/2;
      this.counter=0;
      this.scroll();
      this.timer="";
      this.element.onmouseover=this.stop.bind(this);
      this.element.onmouseout=function(){this.timer=setTimeout(this.scroll.bind(this),1000);}.bind(this);
      var dom=document.getElementById(element);
      var domLi=dom.getElementsByTagName("li");
          for(var i=0;i<domLi.length;i++){
              domLi[i].style.height=height+"px";
              domLi[i].style.lineHeight=height+"px";
          }
          dom.style.height=height+"px";
     },
     scroll:function(){
          if(this.element.scrollTop<this.maxHeight){
               this.element.scrollTop++;
               this.counter++;
          }else{
               this.element.scrollTop=0;
               this.counter=0;
          }
          if(this.counter<this.height){
                this.timer=setTimeout(this.scroll.bind(this),20);
          }else{
               this.counter=0;
               this.timer=setTimeout(this.scroll.bind(this),3000);
          }
     },
     stop:function(){
        clearTimeout(this.timer);
     }
}
var myscroll=new Scroll("hotNewsUl",40);
</script>

 

新闻滚动

标签:z-index   this   dex   use   font   str   innerhtml   idt   timer   

原文地址:http://www.cnblogs.com/binmengxue/p/6381374.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!