| 广 告 位 置 |
|
|
|
 |
| 站 内 搜 索 |
|
|
|
|
|
|
|
|
实现图片的无缝循环滚动
来源：盛绿设计 等级：默认等级
发布于2006-10-03 09:08 被读60次 【字体：大 中 小】
|
|
|
解决思路：
一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆副本，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到"无缝"滚动的目的。
具体步骤：
1.向上滚动。
2.向下滚动。
3.向左滚动。
4.向右滚动。
提示：关于循环滚动的原理，光看本例代码的话可能会觉得枯涩难懂，那样的话可以运行下面修改过的代码，注意滚动条和背景颜色的变化：
特别提示
运行本例所给的四段代码，将看到图片分别按指定的上、下、左和右四个方向循环滚动。图1.8.29为提示中所给代码的运行效果，可以看到，Y轴的滚动滑块滚动一段距离(在红色背景的那块滚动到顶端时)后又自动跳到顶端。
特别说明
本例主要是对象属性中和滚动相关的几个属性的应用，各属性说明如下：
innerHTML 设置或获取位于对象起始和结束标签内的 HTML。
scrollHeight 获取对象的滚动高度。
scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。
scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。
scrollWidth 获取对象的滚动宽度。
offsetHeight 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。
offsetLeft 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。
offsetTop 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置。
offsetWidth 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。 |
相关专题：暂无相关专题
上一篇：站长常用广告代码的表达大全
下一篇：网页将不能被另存
|
共有评论 0 条 网友评分  查看全部
|
|
|
当前位置：首 页 >> 教程资料 >> 网页制作 >> 实现图片的无缝循环滚动
