本文给通过 js 代码实现无缝滚动,侧边栏效果,在项目中经常会遇到,下面小编把代码整理分享到 phperz 平台,供大家参考
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
废话不多说,直接给大家贴代码了,代码解决一起问题!
下面一段代码给大家介绍 js 无缝滚动实例代码:
代码如下所示:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- 无标题文档
- </title>
- <style>
- *{margin:0px; padding:0px;} #div1{width:830px; height:166px; margin:50px
- auto; position:relative; background:white; overflow:hidden;} #div1 ul li{float:left;
- width:174px; height:166px; list-style:none; } ul{position:absolute;}
- </style>
- <script>
- window.onload = function() {
- var oDiv = document.getElementById('div1');
- var oUl = oDiv.getElementsByTagName('ul')[0];
- var aLi = oUl.getElementsByTagName('li');
- var speed = 3 oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
- oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
- function move() {
- if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
- oUl.style.left = '0';
- }
- if (oUl.offsetLeft > 0) {
- oUl.style.left = -oUl.offsetWidth / 2 + 'px';
- }
- oUl.style.left = oUl.offsetLeft + speed + 'px';
- };
- var timer = setInterval(move, 30);
- oDiv.onmouseover = function() {
- clearInterval(timer);
- };
- oDiv.onmouseout = function() {
- timer = setInterval(move, 30);
- }
- document.getElementsByTagName('a')[0].onclick = function() {
- speed = -3;
- };
- document.getElementsByTagName('a')[1].onclick = function() {
- speed = 3;
- };
- };
- </script>
- </head>
- <body>
- <a href="javascipt:;">
- 向左走
- </a>
- <a href="javascipt:;">
- 向右走
- </a>
- <div id="div1">
- <ul>
- <li>
- <img src="images/b01.jpg" />
- </li>
- <li>
- <img src="images/b02.jpg" />
- </li>
- <li>
- <img src="images/b03.jpg" />
- </li>
- <li>
- <img src="images/b04.jpg" />
- </li>
- <li>
- <img src="images/b05.jpg" />
- </li>
- </ul>
- </div>
- </body>
- </html>
分享到侧边栏 js 代码如下所示:
代码如下所示:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- 无标题文档
- </title>
- <style>
- #div1{width:100px; height:150px; background:#0F0; position:absolute; left:-100px;}
- #div1 span{position:absolute; width:20px; height:60px; line-height:20px;
- background:#00F; right:-20px; top:50px;}
- </style>
- <script>
- window.onload = function() {
- var oDiv = document.getElementById('div1');
- oDiv.onmouseover = function() {
- startMove(10, 0);
- }
- oDiv.onmouseout = function() {
- startMove( - 10, -100);
- }
- }
- var timer = null;
- function startMove(speed, locall) {
- var oDiv = document.getElementById('div1');
- clearInterval(timer);
- timer = setInterval(function() {
- if (oDiv.offsetLeft == locall) {
- clearInterval(timer);
- } else {
- oDiv.style.left = oDiv.offsetLeft + speed + 'px';
- }
- },
- 30);
- }
- </script>
- </head>
- <body>
- <div id="div1">
- <span>
- 分享到
- </span>
- </div>
- </body>
- </html>
以上所述是小编给大家介绍的 JavaScript 中实现无缝滚动、分享到侧边栏实例代码,代码简单易懂,有疑问欢迎给我留言,小编及时给您答复!
来源: http://www.phperz.com/article/17/0225/266397.html