这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 javascript 实现的上下无缝滚动效果, 具有无缝滚动及响应鼠标滑过停止滚动的功能, 简便实用, 需要的朋友可以参考下
本文实例讲述了 javascript 实现的上下无缝滚动效果。分享给大家供大家参考,具体如下:
前面介绍了 JS 左右无缝滚动效果,现在做下无缝滚动——上下的效果。其他代码和左右的差不多,只是改变的是 offsetTop 的值,并且不需要计算 ul 整体的宽度了。
- <!DOCTYPE html>
- <html lang="en-US">
- <head>
- <meta charset="UTF-8">
- <title>
- 无缝滚动——上下
- </title>
- <style type="text/CSS">
- *{margin:0;padding:0;} li{list-style:none;} img{border:0;} #scroll{width:178px;margin:50px
- auto;position:relative;} .btn{display:block;width:27px;height:27px;margin-left:auto;margin-right:auto;cursor:pointer;}
- .up{background:url(images/up.gif);} .down{background:url(images/down.gif);}
- .content{margin:10px 0;height:440px;overflow:hidden;position:relative;}
- .content ul{position:absolute;top:0;left:0;} .content li{height:110px;}
- </style>
- </head>
- <body>
- <div id="scroll">
- <a href="javascript:;" id="up" class="btn up">
- </a>
- <div class="content">
- <ul>
- <li>
- <a href="#" title="111">
- <img src="images/1.jpg" alt="111" width="178" height="108" />
- </a>
- </li>
- <li>
- <a href="#" title="222">
- <img src="images/2.jpg" alt="222" width="178" height="108" />
- </a>
- </li>
- <li>
- <a href="#" title="333">
- <img src="images/3.jpg" alt="333" width="178" height="108" />
- </a>
- </li>
- <li>
- <a href="#" title="444">
- <img src="images/4.jpg" alt="444" width="178" height="108" />
- </a>
- </li>
- </ul>
- </div>
- <a class="btn down" href="javascript:;" id="down">
- </a>
- </div>
- </body>
- </html>
- <script type="text/javascript">
- window.onload = function() {
- var oDiv = document.getElementById('scroll');
- var btnUp = document.getElementById('up');
- var btnDown = document.getElementById('down');
- var oUl = oDiv.getElementsByTagName('ul')[0];
- var timer = null;
- var speed = -1;
- oUl.innerHTML += oUl.innerHTML;
- setTimeout(move, 1500);
- btnUp.onclick = function() {
- clearInterval(timer);
- speed = -1;
- move();
- };
- btnDown.onclick = function() {
- clearInterval(timer);
- speed = 1;
- move();
- };
- oUl.onmouseover = function() {
- clearInterval(timer);
- };
- oUl.onmouseout = function() {
- move();
- };
- function move() {
- timer = setInterval(function() {
- oUl.style.top = oUl.offsetTop + speed + 'px';
- if (oUl.offsetTop <= -oUl.offsetHeight / 2) {
- oUl.style.top = '0';
- } else if (oUl.offsetTop >= 0) {
- oUl.style.top = -oUl.offsetHeight / 2 + 'px';
- };
- },
- 30);
- };
- };
- </script>
如果要改变移动速度,修改 speed 的值即可,初始默认为向上移动,即速度为负数。
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0517/331747.html