特效描述:单排图片 无缝滚动。js单排图片无缝滚动特效代码下载
代码结构
1. 引入JS
<script type="text/javascript" src="scrollver.js"></script>
2. HTML代码
<h2 align="center" style="margin:20px 0;font-size:14px;">javascript 特效 图片内容滚动插件 支持单排图片上下无缝自动滚动 和 图片上下连续自动滚动</h2> <div class="warrper"> <div id="container"> <div id="message"> <ul> <li> <a title="javascript特效多功能选项卡自动切换内容图片延迟加载" href="http://www.51qianduan.com/"><img width="150" height="150" alt="javascript特效多功能选项卡自动切换内容图片延迟加载" src="images/small546ee4ae135fdeec7f6b0eb9a16b3440.jpg" /> <div>javascript特效多功能选项卡自动切换内容图片延迟加载</div></a> </li> <li> <a title="jquery特效制作banner图片滚动播放、按钮控制图片滚动、选项卡等基于多功能jquery slide插件" href="http://www.51qianduan.com/"><img width="150" height="150" alt="jquery特效制作banner图片滚动播放、按钮控制图片滚动、选项卡等基于多功能jquery slide插件" src="images/small93f0fbcca20b400dfab9522431cc9de0.jpg" /> <div>jquery特效制作banner图片滚动播放、按钮控制图片滚动、选项卡等基于多功能jquery slide插件</div></a> </li> <li> <a title="jquery特效制作 slide 图片窗帘式滚动" href="http://www.51qianduan.com/"><img width="150" height="150" alt="jquery特效制作 slide 图片窗帘式滚动" src="images/smallbb276cedeaeb0438ed3275a9711b1d69.jpg" /> <div>jquery特效制作 slide 图片窗帘式滚动 效果酷炫</div></a> </li> </ul> <ul> <li> <a title="用jquery特效制作一个简单的图像预览" href="http://www.51qianduan.com/"><img width="150" height="150" alt="用jquery特效制作一个简单的图像预览" src="images/smallf2a366c8954d666360c4b214940963cf.jpg" /> <div>用jquery特效制作一个简单的图像预览</div></a> </li> <li> <a title="用jquery特效制作图片金字塔式放大缩小展示" href="http://www.51qianduan.com/"><img width="150" height="150" alt="用jquery特效制作图片金字塔式放大缩小展示" src="images/smallaa6d7f26f941d87728eb0716d36d9cbe.jpg" /> <div>用jquery特效制作图片金字塔式放大缩小展示</div></a> </li> <li> <a title="纯CSS下拉菜单" href="http://www.51qianduan.com/"><img width="150" height="150" alt="纯CSS下拉菜单" src="images/smallee9241175b1e38b5df271a9f2f67034d.jpg" /> <div>纯CSS下拉菜单导航特效兼容IE6和IE6+以上</div></a> </li> </ul> </div> </div><!--container end--> </div><!--warrper end--> <h2 align="center" style="margin:20px 0;font-size:14px;">javascript 特效 图片内容滚动插件 图片单排上下连续自动滚动</h2> <div id="jsfoot_scroll"> <div> <h4 class="img"><a href="http://www.51qianduan.com/"><img width="90" height="60" src="images/smallf2a366c8954d666360c4b214940963cf.jpg" alt="用jquery特效制作一个简单的图像预览"></a></h4> <dl> <dt><a href="https://www.51qianduan.com/" target="_blank">51前端</a></dt> <dd><a href="https://www.51qianduan.com/" target="_blank">51前端</a></dd> </dl> </div> <div> <h4 class="img"><a href="http://www.51qianduan.com/"><img width="90" height="60" alt="javascript特效按钮控制图片左右自动滚动" src="images/small6ae21c4c44285e9a58afd5c3f42ae36f.jpg"></a></h4> <dl> <dt><a href="https://www.51qianduan.com/" target="_blank">51前端</a></dt> <dd><a href="https://www.51qianduan.com/" target="_blank">51前端</a></dd> </dl> </div> <div> <h4 class="img"><a href="http://www.51qianduan.com/"><img width="90" height="60" alt="用CSS3更换一个确认对话框的jQuery特效" src="images/small79b7ec4e3a48d1f0b125bcbd6bed0fb2.jpg"></a></h4> <dl> <dt><a href="https://www.51qianduan.com/" target="_blank">51前端</a></dt> <dd><a href="https://www.51qianduan.com/" target="_blank">51前端</a></dd> </dl> </div> <div> <h4 class="img"><a href="http://www.51qianduan.com/"><img width="90" height="60" alt="旋转幻灯片使用jQuery和CSS3" src="images/small6b87a0e9c81c16b2cd43bc4a2879c2d0.jpg"></a></h4> <dl> <dt><a href="https://www.51qianduan.com/" target="_blank">51前端</a></dt> <dd><a href="https://www.51qianduan.com/" target="_blank">51前端</a></dd> </dl> </div> </div><!--jsfoot_scroll end--> <script language="javascript"> var $ = function (d){ typeof d == "string" &&(d = document.getElementById(d)); return $.fn.call(d); }; $.fn = function (){ this.$ADD = function (fn){CLS.add(this,fn)}; this.addEvent = function (sEventType,fnHandler){ if (this.addEventListener) {this.addEventListener(sEventType, fnHandler, false);} else if (this.attachEvent) {this.attachEvent("on" + sEventType, fnHandler);} else {this["on" + sEventType] = fnHandler;} } this.removeEvent = function (sEventType,fnHandler){ if (this.removeEventListener) {this.removeEventListener(sEventType, fnHandler, false);} else if (this.detachEvent) {this.detachEvent("on" + sEventType, fnHandler);} else { this["on" + sEventType] = null;} } return this; }; var Class = {create: function() {return function() { this.initialize.apply(this, arguments); }}}; var Bind = function (obj,fun,arr){return function() {return fun.apply(obj,arr);}} var Marquee = Class.create(); Marquee.prototype = { initialize: function(id,name,out,speed) { this.name = name; this.box = $(id); this.out = 3;//滚动间隔时间,单位秒 this.speed = speed; this.d = 1; this.box.style.position = "relative"; this.box.scrollTop = 0; var _li = this.box.firstChild; while(typeof(_li.tagName)=="undefined")_li = _li.nextSibling; this.lis = this.box.getElementsByTagName(_li.tagName); this.len = this.lis.length; for(var i=0;i<this.lis.length;i++){ var __li = document.createElement(_li.tagName); __li.innerHTML = this.lis[i].innerHTML; this.box.appendChild(__li); if(this.lis[i].offsetTop>=this.box.offsetHeight)break; } this.Start(); this.box.addEvent("mouseover",Bind(this,function(){clearTimeout(this.timeout);},[])); this.box.addEvent("mouseout",Bind(this,this.Start,[])); }, Start:function (){ clearTimeout(this.timeout); this.timeout = setTimeout(this.name+".Up()",this.out*1000) }, Up:function(){ clearInterval(this.interval); this.interval = setInterval(this.name+".Fun()",10); }, Fun:function (){ this.box.scrollTop+=this.speed; if(this.lis[this.d].offsetTop <= this.box.scrollTop){ clearInterval(this.interval); this.box.scrollTop = this.lis[this.d].offsetTop; this.Start(); this.d++; } if(this.d >= this.len + 1){ this.d = 1; this.box.scrollTop = 0; } } }; $(window).addEvent("load",function (){ marquee = new Marquee("jsfoot_scroll","marquee",1,2); }); </script>