通用无缝连续滚动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 [email protected];)</title>

<style>

body{ font-size:12px;}

#scroll{width: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: [email protected];

        * @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 = "width: " + ((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。

 

 

你可能感兴趣的:(js)