介绍了大半天的setTimeout和clearTimeout,呵呵,现在可以看看怎么使用这个特效吧,页面代码:
<!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 type="text/css"> <!-- *{ margin:0; padding:0; } body{ text-align:center; background-color:#FFF; color:#000; font:'宋体',sans-serif; } img{ border:0; } ul,li{ list-style-type:none; } a:link, a:visited{ color:#000; text-decoration:none; } a:hover{ color:#F00; text-decoration:none; } #container{ margin:0 auto; position:relative; margin-top:10px; width:720px; height:100px; overflow:hidden; } #message, #message_copymsgid{ margin:0; width:720px; overflow:hidden; } #container ul{ float:left; width:720px; height:100px; overflow:hidden; clear:both; } #container li{ float:left; text-align:center; width:120px; height:100px; line-height:100px; overflow:hidden; padding:0; } #container li img{ width:96px; height:96px; margin-bottom:10px; padding:1px; border:1px solid #999; } --> </style> </head> <body> <div id="container"> <div id="message"> <ul><li><a href="http://www.yaohaixiao.com/" target="_blank" title="听海"><img src="img/img1.gif" alt="听海" /></a></li> <li><a href="http://www.yaohaixiao.com/" target="_blank" title="听海"><img src="img/img1.gif" alt="听海" /></a></li> <li><a href="http://www.yaohaixiao.com/" target="_blank" title="听海"><img src="img/img1.gif" alt="听海" /></a></li> <li><a href="http://www.yaohaixiao.com/" target="_blank" title="听海"><img src="img/img1.gif" alt="听海" /></a></li> <li><a href="http://www.yaohaixiao.com/" target="_blank" title="听海"><img src="img/img1.gif" alt="听海" /></a></li> <li><a href="http://www.yaohaixiao.com/" target="_blank" title="听海"><img src="img/img1.gif" alt="听海" /></a></li> </ul> <ul> <li><a href="http://www.yaohaixiao.com/" target="_blank" title="宝贝"><img src="img/img2.gif" alt="宝贝" /></a></li> <li><a href="http://www.yaohaixiao.com/" target="_blank" title="宝贝"><img src="img/img2.gif" alt="宝贝" /></a></li> <li><a href="http://www.yaohaixiao.com/" target="_blank" title="宝贝"><img src="img/img2.gif" alt="宝贝" /></a></li> <li><a href="http://www.yaohaixiao.com/" target="_blank" title="宝贝"><img src="img/img2.gif" alt="宝贝" /></a></li> <li><a href="http://www.yaohaixiao.com/" target="_blank" title="宝贝"><img src="img/img2.gif" alt="宝贝" /></a></li> <li><a href="http://www.yaohaixiao.com/" target="_blank" title="宝贝"><img src="img/img2.gif" alt="宝贝" /></a></li> </ul> <ul> <li><a href="http://www.yaohaixiao.com/" target="_blank" title="因为你"><img src="img/img3.gif" alt="因为你" /></a></li> <li><a href="http://www.yaohaixiao.com/" target="_blank" title="因为你"><img src="img/img3.gif" alt="因为你" /></a></li> <li><a href="http://www.yaohaixiao.com/" target="_blank" title="因为你"><img src="img/img3.gif" alt="因为你" /></a></li> <li><a href="http://www.yaohaixiao.com/" target="_blank" title="因为你"><img src="img/img3.gif" alt="因为你" /></a></li> <li><a href="http://www.yaohaixiao.com/" target="_blank" title="因为你"><img src="img/img3.gif" alt="因为你" /></a></li> <li><a href="http://www.yaohaixiao.com/" target="_blank" title="因为你"><img src="img/img3.gif" alt="因为你" /></a></li> </ul> </div> </div> <script type="text/javascript" language="javascript" src="js/event.js"></script> <script type="text/javascript" language="javascript" src="js/scrollver.js"></script> <script type="text/javascript" language="javascript"> <!-- function init_Scroll(){ // 创建一个垂直滚动对象的实例 // 显示容器为container,你也可以直接写document.getElement('container') var scrollPics = new scrollVertical('container','message','ul'); scrollPics.speed = 4000; // 间隔时间,更准确的说,是滚动完一行,停留的时间 scrollPics.isPause = true; // 是否暂停为true,不能一开始就滚动,需要先停留下,然后再滚动 // 这个则是指定,第一次显示滚动内容第一行停留的时间为2秒 // 2秒后isPause为false,也就不暂停滚动,开始滚动了。 // 这个时间大家可以自己设定 var timer_start = setTimeout(function(){clearTimeout(timer_start);scrollPics.isPause = false;},2000); Event.addEvent(scrollPics.scrollArea,"mouseover",function(){scrollPics.isPause = true;}); Event.addEvent(scrollPics.scrollArea,"mouseout",function(){scrollPics.isPause = false;}); } /* * 其实这里也可以直接写init_Scroll(); * 应为我已经把脚本放到文档的最后面, * 在加载脚本之前,所有的DOM节点已经加载完毕 * 已经可以直接用脚本访问DOM节点了 */ Event.addEvent(window,'load',init_Scroll); //--> </script> </body> </html>
刚才给大家介绍了JS的一些知识点,现在就讲下相关的CSS技巧。
#container{ margin:0 auto; margin-top:10px; width:720px; height:100px; overflow:hidden; }
一定要“overflow:hidden;”,为什么?呵呵,看看我们把高度设置为了height:100px;,正好是只一行信息的高度,如果你不overflow:hidden,在firefox也许没有问题,它会严格按照你指定的高度显示相应高度的内容,而隐藏多余的部分(多余的5行),而在IE中,一直就自做聪明把容器挤高,让它把里面的全部内容都显示出来。而我们的效果也是只显示一行,而隐藏多余的5行。
出处:蓝色理想
责任编辑:moby
上一页 不间断滚动图片Javascript特效讲解 [2] 下一页 不间断滚动图片Javascript特效讲解 [4]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|