实现文字自动横移--- jquery尺寸相关函数

效果图：

一实现文字自动横移

<style type="text/css">

#demo {overflow:scroll;width:740px; }   
#indemo { float: left; width: 800%;}

#demo1 { float: left; }

#demo2 { float: left;margin-left:7px;}

</style>

<script src="bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>

<div id="demo">

    <div id="indemo">

        <div id="demo1">

            <a href="#"><img src="zhuanpan/images/pointer.png" alt="#" /></a>

            <a href="#"><img src="zhuanpan/images/pointer.png" alt="#" /></a>

            <a href="#"><img src="zhuanpan/images/pointer.png" alt="#" /></a>

        </div>

        <div id="demo2"></div>  </div>

</div>
一 采用jquery方式实现文字横移

<script>

    var speed=20;

    $("#demo2").html($("#demo1").children().clone());

    var n=0;

    function Marquee(){

        if(n>=$("#demo").innerWidth())

            n=0;

        else{

            n++;

        }

        $("#demo").scrollLeft( n );

    }

var MyMar=setInterval(Marquee,speed);

    $("#demo").mouseover(function(){clearInterval(MyMar)});

    $("#demo").mouseout(function(){MyMar=setInterval(Marquee,speed)});

</script>
二 采用原生script实现横移
<script>

var speed=10;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
$("#demo2").text($("#demo1").clone());
$("#demo2").clone();
function Marquee(){
    if(tab2.offsetWidth-tab.scrollLeft<=0)
    tab.scrollLeft-=tab1.offsetWidth
    else{
    tab.scrollLeft++;
    }
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
</script>

附：jquery尺寸：

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

innerWidth() 方法返回元素的宽度（包括内边距）。

innerHeight() 方法返回元素的高度（包括内边距）。

outerWidth() 方法返回元素的宽度（包括内边距和边框）。

outerHeight() 方法返回元素的高度（包括内边距和边框）。

outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。

outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。

scrollLeft() 方法返回或设置匹配元素的滚动条的水平位置。

.scrollTop()上面的是不带参数的，是获取匹配元素的相对滚动条顶部的偏移。

.scrollTop(value)这是带参数的用法，是用来设置匹配元素相对于滚动条顶部的偏移。value是数字，请不要带上像素单位“px”.