这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了原生 js 实现水平方向无缝滚动的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
水平方向无缝滚动
滚动支持图片,文字
原理 :一个大的盒子中放置两个盒子,通过设置 offsetWidth,scrollLeft 的关系来实现,而且还用到定时器函数 setInterval,当手指移动上去定义滚动,离开继续滚动。兼容各大浏览器。
html 代码
- <div id="demo">
- <div id="demoin">
- <div id="demo1">
- <a href="">
- 测试文字1
- </a>
- <a href="">
- 测试文字2
- </a>
- <a href="">
- 测试文字3
- </a>
- <a href="">
- 测试文字4
- </a>
- <a href="">
- 测试文字5
- </a>
- <a href="">
- 测试文字7
- </a>
- <a href="">
- 测试文字8
- </a>
- <a href="">
- 测试文字9
- </a>
- <a href="">
- 测试文字10
- </a>
- <a href="">
- 测试文字11
- </a>
- <a href="">
- 测试文字12
- </a>
- <a href="">
- 测试文字13
- </a>
- <a href="">
- 测试文字14
- </a>
- <a href="">
- 测试文字15
- </a>
- <a href="">
- 测试文字16
- </a>
- <a href="">
- 测试文字17
- </a>
- </div>
- <div id="demo2">
- </div>
- </div>
- </div>
CSS 代码
- #demo{
- width:1000px;
- height:30px;
- overflow:hidden;
- line-height:30px;
- font-size:13px;
- font-family:'宋体';
- background:#ddd url(images/notice.png) no-repeat 25px center;
- color:#0C77CF;
- font-weight:bold;
- margin: 0 auto;
- }
- #demoin {
- width: 900px;
- height: 30px;
- margin: 0 auto;
- white-space: nowrap;
- overflow: hidden;
- }
- #demo #demo1, #demo #demo2{display:inline}
Javascript 代码
- window.onload = function(){
- scrollLeft();
- };
- function scrollLeft(){
- var speed = 20;
- var tab = document.getElementById('demoin');
- var tab1 = document.getElementById('demo1');
- var tab2 = document.getElementById('demo2');
- tab2.innerHTML = tab1.innerHTML;
- function Marquee(){
- if(tab2.offsetWidth - tab.scrollLeft <=0) {
- tab.scrollLeft = 0;
- }else{
- tab.scrollLeft ++;
- }
- }
- var timer = setInterval(Marquee,speed);
- tab.onmouseover = function(){
- clearInterval(timer);
- };
- tab.onmouseout = function(){
- timer = setInterval(Marquee,speed);
- }
- }
效果图:
效果就是一直滚动。
注意:内容的宽度必须大于容器的宽度,否则无法滚动,测试文字一般是使用 ajax 后台获取。
来源: http://www.phperz.com/article/17/0706/328687.html