这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JS 实现间歇滚动的运动效果, 涉及 javascript 定时器触发动态改变页面元素的相关操作技巧, 需要的朋友可以参考下
本文实例讲述了 JS 实现间歇滚动的运动效果。分享给大家供大家参考,具体如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="content-type" charset="utf-8" />
- <meta http-equiv="content-type" content="text/html" />
- <title>
- demo
- </title>
- </head>
- <style type="text/CSS">
- *{margin:0;padding:0;} ul,li,img{margin:0;padding:0;border:0;list-style-type:none;}
- #luanbo{border:1px solid red;overflow:hidden;height:24px;} #info li{height:24px;line-height:24px;}
- </style>
- <body>
- <div id="luanbo">
- <ul id="info">
- <li>
- aaaaaaaaaaa
- </li>
- <li>
- bbbbbbbbbbb
- </li>
- <li>
- ccccccccccc
- </li>
- <li>
- ddddddddddd
- </li>
- <li>
- eeeeeeeeeee
- </li>
- <li>
- fffffffffff
- </li>
- </ul>
- </div>
- <script type="text/javascript">
- var odiv = document.getElementById("luanbo");
- var oul = document.getElementById("info");
- var oli = document.getElementById("info").getElementsByTagName("li");
- var iNow = 0;
- function move(obj, tg) { //运动框架
- clearInterval(dt);
- var dt = setInterval(function() {
- var speed = 2;
- if (tg - obj.scrollTop < speed) {
- tg = obj.scrollTop;
- clearInterval(dt);
- } else {
- obj.scrollTop += speed;
- }
- },
- 30);
- }
- oul.innerHTML += oul.innerHTML;
- function star() {
- clearInterval(tm);
- var tm = setInterval(function() {
- iNow++;
- if (odiv.scrollTop >= (oli[0].offsetHeight * oli.length) / 2) {
- odiv.scrollTop = 0;
- iNow = 0;
- } else {
- var get = oli[0].offsetHeight * iNow;
- move(odiv, get); //运动框架
- }
- },
- 2000);
- }
- star();
- </script>
- </body>
- </html>
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0518/329304.html