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

 

posted @ 2015-12-24 14:52  镜子-正衣冠-知得失  阅读(349)  评论(0编辑  收藏  举报