js不间断滚动的简单教程_第1页
js不间断滚动的简单教程_第2页
js不间断滚动的简单教程_第3页
已阅读5页，还剩4页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、js 不间断滚动的简单教程内容不间断向左滚动，相当于不断向右移动滚动条，内容向左滚动。要点一： scrollLeft使用：id.scrollLeft 例如下面的简单的例子，当文字向左滚动的时候，就可以看到滚动条在向右移动要点二： setInterval使用：var timer =setInterval(func,100); 每隔多长时间，执行一次<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0Transitional/EN""/TR/xhtml1/DTD/xhtml1-transit

2、ional.dtd"><html xmlns="/1999/xhtml"> <head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档 </title><style>body,divmargin:0

3、;padding:0;.wrapperwidth:200px; height:50px; line-height:30px;overflow-x:scroll; overflow-y:hidden; border:1px solid #ccc;.w1width:400px;</style></head><body><div id="s" class="wrapper"><div class="w1"&g

4、t;内容 1 内容 2 内容 3 内容 4 内容 5内容 6 内容 7</div></div><script>function scroll()var a = document.getElementById("s");a.scrollLeft+;var timer = setInterval(scroll,50);</script></body></html>复制代码要点三：offsetWidth对象的可见宽

5、度，包括滚动条等边线，会随窗口的显示大小改变要点四： innerHTML 设置或获取位于对象起始和结束标签内的 HTML<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档 </title><style&

6、gt;body,divmargin:0;padding:0;bodypadding:20px;#boxwidth:300px; height:50px; line-height:30px;overflow-x:scroll; overflow-y:hidden; border:1px solid #ccc;#cwidth:800px;#c1,#c2width:400px;float:left;</style></head><body><div id="box">&

7、amp;lt;div id="c"><div id="c1">内容 1 内容 2 内容 3 内容 4 内容 5 内容 6 内容 7</div><div id="c2"></div></div></div><script>var c1 = document.getElementById("c1"); var c

8、2 = document.getElementById("c2");c2.innerHTML = c1.innerHTML; function scroll() var a = document.getElementById("box");if(a.scrollLeft >= c2.offsetWidth)a.scrollLeft=0;elsea.scrollLeft+;var timer = setInterval(scroll,60);</script></body>&lt

9、;/html>复制代码说明：让 box 的 scrollLeft+ ，就可以向左滚动。 要做到一直不间断向左滚动，需要做判断，如果 scrollLeft 的值等于或大于 c2 的宽度时，把 scrollLeft 的值设为 0，这样就会一直循环。把 id 为 c1 的内容赋予 c2，这样可以在滚动的时候肉眼就会看不到变化现在已经可以滚动了，下面加上鼠标移上滚动停止，鼠标移出，滚动继续的效果。现在是向左滚动，如果向右滚动，可以用如下代码if(a.scrollLeft <= 0)a.scrollLeft+=c1.offsetWidth;elsea.scrollLeft-;

10、当元素左滚动距离小于0 时，让他的左滚动距离为一半的宽度，否则让左滚动的值-要点五： clearInterval取消由setInterval() 设置的timeoutc1.onmouseover = function()clearInterval(timer);c1.onmouseout = function()timer = setInterval(scroll,60);在上面的代码中现加上这两行，就可以鼠标移上停止滚动，鼠标移出滚动继续了。虽然有点啰嗦，但是现在可以实现控制左右无缝滚动的效果了，<!DOCTYPE html><html&gt

11、;<head><meta http-equiv="Content-Type" content="text/html;charset=gb2312" /><title>无标题文档 </title><style>body,divmargin:0;padding:0;bodypadding:20px;#boxwidth:300px; height:50px; line-height:30px; overflow-x:scr

12、oll; overflow-y:hidden; border:1px solid #ccc; float:left; margin:0 10px; display:inline; #cwidth:800px;#c1,#c2width:400px;float:left; #prev,#nextwidth:50px; height:50px; line-height:50px;text-align:center; background:#ccc; cursor:pointer; float:left;.wrapwidth:500px;</style></h

13、ead><body><div class="wrap"><divid="prev"><<</div><div id="box"><div id="c"><div id="c1">内容 1 内容 2 内容 3 内容 4 内容5 内容 6 内容 7</

14、div><div id="c2"></div></div></div><div id="next">>></div></div><script>var c1 = document.getElementById("c1"); var c2 = document.getElem

15、entById("c2"); var a = document.getElementById("box");var prev = document.getElementById("prev"); var next = document.getElementById("next");var timer;c2.innerHTML = c1.innerHTML;functionscroll_l()if(a.scrollLeft >= c1.offsetWidth)a.scrollLeft=0;elsea.s

16、crollLeft+;function scroll_r()if(a.scrollLeft <= 0)a.scrollLeft+=c1.offsetWidth;elsea.scrollLeft-;timer = setInterval(scroll_l,60);a.onmouseover = function()clearInterval(timer);a.onmouseout = function()timer = setInterval(scroll_l,60);prev.onclick = function()clearInterval(timer);change(0);next.onclick = function()clearInterval(timer);change(1)function change(r)if(r=

人人文库> 全部分类> 行业资料 > 工业设计

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论