这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
图片向左无缝滚动,JavaScript 版,速度可自定义,代码简洁易懂,自己修改方便。
- <!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=gb2312" />
- <title>向左无缝滚动</title>
- <style type="text/CSS">
- body,html,div,a{ margin:0; padding:0}
- #demo {
- background: #FFF;
- overflow:hidden;
- border: 1px dashed #CCC;
- width: 500px;
- }
- #demo img {
- border: 3px solid #F2F2F2;
- }
- #indemo {
- float: left;
- width: 800%;
- }
- #demo1 {
- float: left;
- }
- #demo2 {
- float: left;
- margin-left:7px;
- }
- </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>
- <div>
- <div>
- <img class="img-responsive" src="/images/logo_s.gif" border="0" data-src="" />
- <img class="img-responsive" src="/images/logo_s.gif" border="0" data-src="" />
- <img class="img-responsive" src="/images/logo_s.gif" border="0" data-src="" />
- <img class="img-responsive" src="/images/logo_s.gif" border="0" data-src="" />
- <img class="img-responsive" src="/images/logo_s.gif" border="0" data-src="" />
- <img class="img-responsive" src="/images/logo_s.gif" border="0" data-src="" />
- <img class="img-responsive" src="/images/logo_s.gif" border="0" data-src="" />
- </div>
- <div></div>
- </div>
- </div>
- </body>
- </html>
(adsbygoogle = window.adsbygoogle || []).push({});
来源: http://www.phperz.com/article/17/0703/284206.html