javascript实现无缝滚动

被一个问题困扰住是一件很令人心酸的事情，当你解决它之后就会发现时间像不要钱似的没了。由于没有充分的准备，无缝滚动这混蛋搞的我怀疑人生了都！！！当我解决了问题并来一个王之蔑视后，再写篇博客把这小子彻底钉死。

解决思路：

设置一个方框来包含滚动内容，然后不断增加元素的左边距（假设向右滚）。当滚动块将要到达方框边界时，将滚动元素的左边距置零。

思路很简单，执行起来却容易出现一些漏洞，然后让痛苦的要飞起。下边放代码，我根据代码来说：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>无缝滚动</title><style type="text/css">*{margin: 0px;padding: 0px;}#div4 {height: 178px;width: 798px;/*算上边框长宽*/background-color: #D3D3D3;color: #ADD8E6;border: solid 1px black;overflow: hidden;}ul{position: absolute;margin-left: 0;}li {list-style: none;height: 100px;width: 60px;background: #F3F3F3;font-size: 50px;font-weight: 500;margin-top: 30px;text-align: center;line-height: 100px;float: left;color: #FFD700;border-right: solid 40px red;overflow: hidden;}</style></head><body><div id="div4"><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul></div><script type="text/javascript">var d = document.getElementById("div4");var oUl = d.getElementsByTagName("ul")[0];var aLi = oUl.getElementsByTagName("li");oUl.style.left=0+"px";d.onclick = function() {var timer = null;timer = setInterval("move()", 30);oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;oUl.style.width=aLi.length*aLi[0].offsetWidth;}function move() {oUl.style.left=parseInt(oUl.style.left)+3+"px";if(oUl.offsetLeft<-oUl.offsetWidth/2){oUl.style.left=0;}else if(oUl.offsetLeft>0){oUl.style.left=-oUl.offsetWidth/2+'px';}}</script></body></html>

1.首先说说offsetLeft和oUL.style.left这两个鬼，它们都是用来获取元素据父元素的左边距。offsetLeft是一个数值，只读，而后者则是带着“px”的字符串，可读写。当你需要各种数字操作时，offsetLeft更好用些。

2.oUL.style.left的使用。这家伙是比较傲娇的，这次我就在上面栽了跟头。使用时必须设置position（除static），要不然人家是会罢工的。

3. oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;不知读者是否注意到这句了呢？那么为什么？当滚动开始，那么包含框一部分就会漏出来，俗称走光。怎么办？把ul的内容在复制一次。得，就是这么简单。

4.就在我的文字欢快的滚动在电脑屏幕时，盯着控制台我的眉头一皱。我的高度本来设置800像素，咋成了802，真是在耍吗?盯一盯看一看，原来是边框的宽呀。。。

本文毕

javascript实现无缝滚动相关推荐

html5实现无缝滚动的效果,基于JavaScript实现无缝滚动效果
本文实例为大家分享了JavaScript实现无缝滚动效果展示的具体代码,供大家参考,具体内容如下首先应该区分样式中的绝对定位和相对定位,一般来说,移动的单位为绝对定位,在这个实例中,移动的Ul就是绝 ...
html5轮播怎么自动换图,如何使用JavaScript实现“无缝滚动自动播放”轮播图效果...
在一些项目开发中,我们经常需要使用到轮播图,但是没有深入学习的情况下做轮播图是非常困难的. 思路分成小问题来解决 1. 动态生成序号12345 页面有多少li(图片),就有多少序号 2. 点击序号. ...
JavaScript之图片的无缝滚动
图片无缝滚动就是图片一直不停的滚动,好像没有无穷无尽似的,实际上就是几张图片不停的循环,但是看不出有从最后面切换到最前面的效果,这就是无缝滚动,文字和图片都可以无缝滚动,这里介绍的是图片,文字是同样的 ...
JavaScript学习（二十五）—实现无缝滚动
JavaScript学习(二十五)-实现无缝滚动效果如下: 代码如下: <!DOCTYPE html> <html lang="en"><head& ...
html无缝滚动原理,JavaScript实现图片无缝滚动效果
图片无缝滚动就是图片一直不停的滚动,好像没有无穷无尽似的,实际上就是几张图片不停的循环,但是看不出有从最后面切换到最前面的效果,这就是无缝滚动,文字和图片都可以无缝滚动,这里介绍的是图片,文字是同样的 ...
JQuery控制图片无缝滚动
经常有人问怎么在HTML上制作图片的无缝滚动,我自己在一些项目中也会经常用到的,今天花了些时间,上网搜索了一下,下了些源码回来看了一下,发现都是只能在IE下能够滚动的,而且都是光<html> ...
vue无缝滚动的插件开发填坑分享
写插件的初衷 1.项目经常需要无缝滚动效果,当时写jq的时候用用msClass这个老插件,相对不上很好用. 2.后来转向vue在vue-awesome没有找到好的无缝滚动插件,除了配置swiper可以 ...
解决DataList控件无缝滚动图片(转)
解决问题:1.无缝滚动:2.页面初始时图片显示页面上,而不是才从一个方向出来. 将绑定数据绑定到DataList 控件后.其他数据控件也可使用此方法. 页面源代码: <div id=&quo ...
js php滚动图代码,JavaScript_JS实现的N多简单无缝滚动代码(包含图文效果)，本文实例讲述了JS实现的N多简 - phpStudy...
JS实现的N多简单无缝滚动代码(包含图文效果) 本文实例讲述了JS实现的N多简单无缝滚动代码.分享给大家供大家参考,具体如下: 实现原理很简单,注册事件之后,立即将元素的innerHTML累加一次. ...

javascript实现无缝滚动

javascript实现无缝滚动相关推荐

最新文章

热门文章