實現文字自動橫移--- 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」.