JS中scrollLeft(right,top,bottom)的用法和特点
2011-05-05 11:08
375 查看
在图片滚动的方法中,最常用的就是scroll方法。 上图所示的滚动条,我们称为srcollBar。在div的内容宽度超过div的宽度时。我们给div加属性overflow-x:scroll;就会出现这种效果。见得最多的scrollBar就是浏览器右侧的了。大家都很熟悉。当我们拖动滚动条的时候,未显示部分就会随着拖动显示出来。我们拖动的距离,就是scroll的大小,拖动的距离在四个不同方向上,就有了scrollLeft,scrollRight,scrollTop,scrollBottom四个属性。 这里我们以scrollLeft为例,其他三个都是一样的。由scrollLeft的由来,我们可以知道,如果scrollLeft值递增,效果也就相当于滚动条在向右拖动。在没有scrollBar的情况下,增加scrollBar的值,同样会有内容左移的效果。 也就是说使用scrollLeft的必要条件是 第一:此标签的内容宽度超过了标签本身的宽度。 这个很容易理解,如果内容没有超过标签的宽度,不需要横向的滚动就可以看到所有横向的范围,那在使用scrollLeft的时候肯定是无效的了。 在这里很多新手经常会犯一个错误,内容的大小确实是超过了标签的显示范围,但是却因为浏览器的默认属性换行了,也就是没有在横向上超出,这时候同样是不能使用scrollLeft的。 第二:scrollLeft的值范围是在一定范围内的,不能无限增大。 当内容的最右端可以显示的时候,scrollLeft便不能再增加了。这个也容易理解。以浏览器右侧滚动条为例,这个滚动条肯定是能拖到底的,这个拖动有一定的范围,跟页面内容高度有关。 第三:scrollLeft(包括其他三个)常与定时器一起使用,实现位置移动效果,如滚动。 这条就没什么好解释的了。定时器上一篇文章刚写了。 下面看一个滚动效果的实例。非常简单,就是内容从左滚动最右的效果。如果有兴趣的话可以吧内容换成图片什么的,看起来会漂亮些。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>滚动图片</title> <style type="text/css"> body,div{border:0;margin:0;padding:0;} #outer {overflow:hidden;width:300px;border:1px red solid;margin:50px auto;height:148px;} .part1 {height:140px;width:500px;overflow:hidden;border:4px blue solid;} </style> </head> <body> <div id="outer"> <div class="part1"> 这里可以放图片什么的。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。 </div> </div> </body> <script type="text/javascript" language="javascript"> function test() { document.getElementById("outer").scrollLeft++; } var run = setInterval(test,100); </script> </html>
相关文章推荐
- JS中scrollLeft(right,top,bottom)的用法和特点
- 转:JS中scrollLeft(right,top,bottom)的用法和特点
- js的offsetLeft,scrollLeft,offsetTop,scrollTop等等的用法
- 关于js中window.location.href,location.href,parent.location.href,top.location.href的用法
- Android-区分 View 的 translationX、Y , X、Y 和 Left、Top,Right、Bottom
- position:fixed; top: 0; right: 0; bottom: 0; left: 0;的意思
- absolute同时设置left,right,top,bottom
- 关于js中"window.location.href"、"location.href"、"parent.location.href"、"top.location.href"的用法
- Js中 关于top、clientTop、scrollTop、offsetTop的用法
- 安卓在代码中设置TextView的drawableLeft、drawableRight、drawableTop、drawableBottom
- Js中 关于top、clientTop、scrollTop、offsetTop的用法
- 关于js iframe 中"window(parent)(top).location.href"的用法
- DrawableLeft,DrawableTop,Right,Bottom点击事件的实现
- 关于js中window.location.href,location.href,parent.location.href,top.location.href的用法
- 动态设置android:drawableLeft|Right|Top|Bottom
- crect类里的left , top ,right , bottom分别是什么坐标?
- TextView 代码设置drawableLeft、drawableRight、drawableTop、drawableBottom
- 关于js中window.location.href,location.href,parent.location.href,top.location.href的用法
- left top right bottom问题
- Js中 关于top、clientTop、scrollTop、offsetTop的用法