这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
网上有不少图片滚动的效果代码,但大多兼容性不好,或者结构混乱,xhtml,CSS,js 均没有得到良好的优化。
下面介绍一个方法;基本上实现结构跟行为相分离,两者的联系只需要一个
id 就可以,使用起来很方便,而且同一个 js 代码可以实现在本页面多个滚动图效果,之间互不干扰,
1.xhtml
- <div class="demo" id="demo1">
- <table cellpadding="0" cellspacing="0">
- <tr>
- <td>
- <ul>
- <li>
- <img src="img.jpg">
- <br>
- 滚动图1
- </li>
- <li>
- <img src="img.jpg">
- <br>
- 滚动图2
- </li>
- <li>
- <img src="img.jpg">
- <br>
- 滚动图3
- </li>
- <li>
- <img src="img.jpg">
- <br>
- 滚动图4
- </li>
- </ul>
- </td>
- </tr>
- </table>
- </div>
- <!--第二个滚动图开始-->
- <div class="demo" id="demo2">
- <table cellpadding="0" cellspacing="0">
- <tr>
- <td>
- <ul>
- <li>
- <img src="img.jpg">
- <br>
- 滚动图1
- </li>
- <li>
- <img src="img.jpg">
- <br>
- 滚动图2
- </li>
- <li>
- <img src="img.jpg">
- <br>
- 滚动图3
- </li>
- <li>
- <img src="img.jpg">
- <br>
- 滚动图4
- </li>
- </ul>
- </td>
- </tr>
- </table>
- </div>
2.css
- ul,
- li,
- img,
- td {
- font - size: 12px;
- list - style - type: none;
- text - align: center;
- margin: 0;
- padding: 0;
- }.demo {
- width: 230px;
- margin - bottom: 8px;
- height: 172px;
- overflow: hidden;
- }.demo ul {
- width: 408px;
- clear: both;
- }.demo li {
- width: 102px;
- float: left;
- text - align: center;
- }.demo img {
- margin - bottom: 8px;
- }
3.js
- function startmarquee(lh, speed, delay, index) {
- var o = document.getElementById("demo" + index);
- var o_td = o.getElementsByTagName("td")[0];
- var str = o_td.innerHTML;
- var newtd = document.createElement("td");
- newtd.innerHTML = str;
- o_td.parentNode.appendChild(newtd);
- var t;
- var p = false;
- o.onmouseover = function() {
- p = true;
- }
- o.onmouseout = function() {
- p = false;
- }
- function start() {
- t = setInterval(Marquee, speed);
- if (!p) {
- o.scrollLeft += 3;
- }
- }
- function Marquee() {
- if (o_td.offsetWidth - o.scrollLeft <= 0) o.scrollLeft -= o_td.offsetWidth;
- else {
- if (o.scrollLeft % lh != 0) {
- o.scrollLeft += 3
- } else {
- clearInterval(t);
- setTimeout(start, delay);
- }
- }
- }
- setTimeout(start, delay);
- }
- startmarquee(102, 1, 1500, 1); //图片间停式滚动
- startmarquee(102, 30, 1, 2); //图片不间断滚动
测试代码:js 需要在 html 文件加载完成后执行,才能正常运行,所以记得将 js 放到 div 之后;图片滚动跟文字滚动实现原理上大同小异。
演示代码:
[Ctrl+A 全选 注: 如需引入外部 Js 需刷新才能执行]
- <style type="text/css"><!--
- ul, li, img, td {
- margin:0;
- padding:0;
- font-size:12px;
- list-style-type:none;
- text-align:center;
- }
- .demo {
- width:230px;
- margin-bottom: 8px;
- height: 172px;
- overflow: hidden;
- }
- .demo ul {
- width:408px;
- clear:both;
- }/*102*4=408px等于实际内容的总宽度*/
- .demo li {
- width:102px;
- float:left;
- text-align:center;
- }
- .demo img {
- margin-bottom:8px;
- }
- --></style>
- <div>
- <table cellpadding="0" cellspacing="0">
- <tbody>
- <tr>
- <td>
- <ul>
- <li><img class="img-responsive" src="http://www.jb51.net/img.jpg" data-src="" /><br>滚动图1</li>
- <li><img class="img-responsive" src="http://www.jb51.net/img.jpg" data-src="" /><br>滚动图2</li>
- <li><img class="img-responsive" src="http://www.jb51.net/img.jpg" data-src="" /><br>滚动图3</li>
- <li><img class="img-responsive" src="http://www.jb51.net/img.jpg" data-src="" /><br>滚动图4</li>
- </ul>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <div>
- <table cellpadding="0" cellspacing="0">
- <tbody>
- <tr>
- <td>
- <ul>
- <li><img class="img-responsive" src="http://www.jb51.net/img.jpg" data-src="" /><br>滚动图1</li>
- <li><img class="img-responsive" src="http://www.jb51.net/img.jpg" data-src="" /><br>滚动图2</li>
- <li><img class="img-responsive" src="http://www.jb51.net/img.jpg" data-src="" /><br>滚动图3</li>
- <li><img class="img-responsive" src="http://www.jb51.net/img.jpg" data-src="" /><br>滚动图4</li>
- </ul>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <script type="text/javascript" language="JavaScript">// <![CDATA[
- function startmarquee(lh,speed,delay,index){
- var o=document.getElementById("demo"+index);
- var o_td=o.getElementsByTagName("td")[0];
- var str=o_td.innerHTML;
- var newtd=document.createElement("td");
- newtd.innerHTML=str;
- o_td.parentNode.appendChild(newtd);
- var t;
- var p=false;
- o.onmouseover=function(){p=true;}
- o.onmouseout=function() {p=false;}
- function start(){
- t=setInterval(Marquee,speed);
- if(!p){o.scrollLeft += 3;}
- }
- function Marquee(){
- if(o_td.offsetWidth-o.scrollLeft<=0)
- o.scrollLeft-=o_td.offsetWidth;
- else{
- if(o.scrollLeft%lh!=0){
- o.scrollLeft+= 3
- }else{clearInterval(t); setTimeout(start,delay);}
- }
- }
- setTimeout(start,delay);
- }
- startmarquee(102,1,1500,1);
- startmarquee(102,30,1,2);
- // ]]></script>
代码中,是针对 102 宽度的图片,可以在代码中修改,适合自己图片大小的宽度,才可以完美的运行。
(adsbygoogle = window.adsbygoogle || []).push({});
来源: http://www.phperz.com/article/17/0630/284768.html