• 通用无缝连续滚动JS


    无缝连续滚动JS,工作中经常会用到整理出来需要用的时候可以直接拿来用。代码很简单主要就是修改元素的scrollLeft值。需要注意的是获取元素overflow:hidden中内容的真实宽高时,需要先克隆元素并内容设置样式setyle.cssText="position;absolute; visibility:visible;display:block;" 。 然后再使用元素的offsetWidth/offsetWidth属性才可以获取到元素的真实宽高。否则被隐藏部分的宽高无法获取到。

    点击这里查看显示效果

    代码:

    <!DOCTYPE html >
    <html>
    <head>
    <meta charset="utf-8" />
    <title>通用无缝连续滚动JS(by rentj1@163.com;)</title>
    <style>
    body{ font-size:12px;}
    #scroll{500px; overflow:hidden }
    .referer{ margin-top:50px;}
    </style>
    </head>
     
    <body>
    <div id="scroll">
        <a href="#" target="_blank">关注反弹成交量</a> <font color="#999999">11:22</font> 
      <a href="#" target="_blank">中信建投期货:关注甲醇60日均线的得失</a> <font color="#999999">11:21</font> 
      <a href="#" target="_blank">大盘技术性反抽 不宜过分乐观</a> <font color="#999999">11:21</font> 
      <a href="#" target="_blank">中证期货:PVC市场恐难改低迷</a>  <font color="#999999">11:21</font>
    </div>
    <script>
         
    (function(ns){  
    	 
        //Class Scroll{ 
             
            /**
            * 构造函数
            * email: rentj1@163.com;
            * @param {HTMLElement} 滚动内容的容器
            * @return {Undefined}
            */
            function Scroll(element){
                 
                var content = document.createElement("div");
                var container = document.createElement("div");
                var _this =this;
                var cssText = "position: absolute; visibility:hidden; left:0; white-space:nowrap;";
                this.element = element; 
                this.contentWidth = 0;
                this.stop = false;
                 
                content.innerHTML = element.innerHTML;
              
                //获取元素真实宽度
                content.style.cssText = cssText;
                element.appendChild(content);
                this.contentWidth = (getComputedStyle && parseFloat(getComputedStyle(content,null).width)) || content.offsetWidth;
                content.style.cssText= "float:left;";
                container.style.cssText = " " + ((this.contentWidth) * 2) + "px; overflow:hidden";
                container.appendChild(content);
                container.appendChild(content.cloneNode(true));
                element.innerHTML = "";
                element.appendChild(container);
                 
                container.onmouseover = function(e){
                    clearInterval(_this.timer);
                     
                };
                 
                container.onmouseout = function(e){
                    _this.timer = setInterval(function(){ 
                        _this.run();
                    },20);          
     
                     
                };
                _this.timer = setInterval(function(){ 
                    _this.run();
                }, 20);
            }
             
            Scroll.prototype = {
                 
                run: function(){
                     
                    var _this = this;
                    var element = _this.element;
                     
                    element.scrollLeft = element.scrollLeft + 2;
                     
                    if(element.scrollLeft >=  this.contentWidth ) {
                            element.scrollLeft = 0;
                    }
                }
            };
        //}
     
        ns.Scroll = Scroll; 
     
    //参考:<br />
    //http://www.ilovejs.net/archives/108
    }(window));
    var elem = document.getElementById("scroll");
    var sc = new Scroll(elem);
     
    </script>
    </body>
    </html>
    

      

    更新:2012930

    代码说明:

     this.contentWidth = (getComputedStyle && parseFloat(getComputedStyle(content,null).width)) || content.offsetWidth;

    1 在IE9使用 content.offsetWidth获取元素的宽度时,得到值会忽略小数位数,使用 getComputedStyle 可以获取元素的实际宽度。

    2 在IE/6/7/8中使用元素的currentStyle属性兼容getComputedStyle 时,如果没有显式指定元素的width,height样式值会返回auto。

  • 相关阅读:
    数组的完全随机排列算法
    css超出2行部分省略号...
    前端面试题精华总结
    在地址栏输入网址后页面是如何呈现的?
    document.write和innerHTML的区别
    js运算符单竖杠“|”与“||”的用法和作用介绍
    border:none与border:0的区别
    如何实现浏览器内多个标签页之间的通信?
    js 关键字 in 的使用方法
    msyql: navicat 连接时msyql遇到的问题
  • 原文地址:https://www.cnblogs.com/rentj1/p/2619031.html
Copyright © 2020-2023  润新知