这篇文章主要介绍了原生 javascript 实现图片无缝滚动效果的相关资料, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
图片水平无缝滚动效果在大量的网站都有应用,特别是一些企业网站在展示产品的时候,因为是动态效果,所以能够给网站增色不少,相比静态图片展示更能够吸引用户的注意力,下面就通过实例代码介绍一下如何实现此效果。
代码如下:
- <html>
- <head>
- <meta charset="gb2312">
- <title>
- phperz
- </title>
- <style type="text/CSS">
- #demo{ background:#FFF; overflow:hidden; border:1px dashed #CCC; width:500px;
- } #indemo{ float:left; width:2000px; } #indemo a{ width:100px; height:100px;
- float:left; background-color:blue; margin-left:5px; text-align:center;
- line-height:100px; color:red; text-decoration:none; } #demo1{float:left;}
- #demo2{float:left;}
- </style>
- <script type="text/javascript">
- window.onload = function() {
- var speed = 10;
- var tab = document.getElementById("demo");
- var tab1 = document.getElementById("demo1");
- var tab2 = document.getElementById("demo2");
- tab2.innerHTML = tab1.innerHTML;
- function Marquee() {
- if (tab2.offsetWidth - tab.scrollLeft <= 0) {
- tab.scrollLeft -= tab1.offsetWidth
- } else {
- tab.scrollLeft++;
- }
- }
- var MyMar = setInterval(Marquee, speed);
- tab.onmouseover = function() {
- clearInterval(MyMar)
- };
- tab.onmouseout = function() {
- MyMar = setInterval(Marquee, speed)
- };
- }
- </script>
- </head>
- <body>
- <div id="demo">
- <div id="indemo">
- <div id="demo1">
- <a href="#">
- phperz一
- </a>
- <a href="#">
- phperz二
- </a>
- <a href="#">
- phperz三
- </a>
- <a href="#">
- phperz四
- </a>
- <a href="#">
- phperz五
- </a>
- <a href="#">
- phperz六
- </a>
- </div>
- <div id="demo2">
- </div>
- </div>
希望对大家学习 javascript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0217/267184.html