实现文字自动横移--- 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”.