这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 offsetLeft 实现图片滚动效果实例代码,有需要的朋友可以参考一下
效果:
代码:
- <head runat="server">
- <title></title>
- <style type="text/CSS">
- #div1
- {
- width: 245px;
- height: 150px;
- background: red;
- margin: 250px;
- margin-left: 500px;
- position: absolute;
- overflow: hidden;
- }
- #div1 ul li
- {
- float: left;
- width: 44px;
- height: 66px;
- margin-top: 20px;
- margin-right: 5px;
- list-style: none;
- }
- #div1 ul
- {
- width: 250px;
- position: absolute;
- padding: 0;
- }
- </style>
- <script type="text/javascript">
- window.onload = function () {
- var oul = document.getElementsByTagName('ul')[0];
- var odiv = document.getElementById('div1');
- var ali = document.getElementsByTagName('li');
- oul.innerhtml = oul.innerHTML + oul.innerHTML;
- oul.style.width = (ali[0].offsetWidth + 5) * ali.length + 'px';
- function roll() {
- if (oul.offsetLeft <= -oul.offsetWidth / 2) {
- oul.style.left = '0';
- }
- oul.style.left = oul.offsetLeft - 2 + 'px';
- }
- var timer = null;
- timer = setInterval(roll, 30);
- odiv.onmouseover = function () {
- clearInterval(timer);
- }
- odiv.onmouseout = function () {
- timer = setInterval(roll, 30);
- }
- };
- </script>
- </head>
- <body>
- <div id="div1">
- <ul>
- <li>
- <img src="../Images/Number1/0.jpg" /></li>
- <li>
- <img src="../Images/Number1/1.jpg" /></li>
- <li>
- <img src="../Images/Number1/2.jpg" /></li>
- <li>
- <img src="../Images/Number1/3.jpg" /></li>
- <li>
- <img src="../Images/Number1/4.jpg" /></li>
- </ul>
- </div>
- </body>
(adsbygoogle = window.adsbygoogle || []).push({});
来源: http://www.phperz.com/article/17/0701/278127.html