间歇性向上无缝滚动(jq插件封装型)
2013-12-27 14:14
225 查看
;(function($){ $.fn.moveUp=function(options){ var defaults = {//初始化参数 moveHeight:30, time:2000 }; var opts =$.extend({},defaults,options);//扩展参数 a=$(this); var top=0; var timer; a.find('li').first().clone().appendTo(a);//克隆追加第一个子对象 timer=setInterval(moveUp,opts.time); a.hover(function(){clearInterval(timer)},function(){timer=setInterval(moveUp,opts.time)}); var endHeight=a.height();//追加子对象后的总高度 function moveUp(){ top=top+opts.moveHeight; if(top>=endHeight){ a.css('marginTop','0px'); top=opts.moveHeight; } a.stop().animate({'marginTop':-top+'px'}); document.title=a.css('marginTop'); } } })(jQuery)
引用方式:
$(function(){ $('ul').moveUp({moveHeight:30,time:2200}); })
demo:
<!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title></title> <script type="text/javascript" src="jQuery.js"></script> <style type="text/css"> *{list-style:none;margin:0;padding:0;} .wrap{border:1px solid #333;width: 800px ;height:30px;margin:100px auto;overflow:hidden;} ul{} ul li{height: 30px;line-height: 30px;} </style> <script type="text/javascript"> ;(function($){ $.fn.moveUp=function(options){ var defaults = {//初始化参数 moveHeight:30, time:2000 }; var opts =$.extend({},defaults,options);//扩展参数 a=$(this); var top=0; var timer; a.find('li').first().clone().appendTo(a);//克隆追加第一个子对象 timer=setInterval(moveUp,opts.time); a.hover(function(){clearInterval(timer)},function(){timer=setInterval(moveUp,opts.time)}); var endHeight=a.height();//追加子对象后的总高度 function moveUp(){ top=top+opts.moveHeight; if(top>=endHeight){ a.css('marginTop','0px'); top=opts.moveHeight; } a.stop().animate({'marginTop':-top+'px'}); document.title=a.css('marginTop'); } } })(jQuery) $(function(){ $('ul').moveUp({moveHeight:30,time:2200,zhangsan:'名字'}); }) </script> </head> <body> <div class="wrap"> <ul> <li> <a target="_blank" >站长之家</a> <a target="_blank" >名品导购网</a> <a target="_blank" >翻东西</a> <a target="_blank" >厦门小鱼网</a> <a target="_blank" >购物</a> <a target="_blank" >寻购网</a> <a target="_blank" >游多多自助游</a> <a target="_blank" >酒店预订</a> <a target="_blank" >比价网</a> <a target="_blank" >服饰搭配</a> </li> <li> <a target="_blank" >美丽说</a> <a target="_blank" >阿里巴巴生意经</a> <a target="_blank" >马可波罗采购</a> <a target="_blank" >中国供应商</a> <a target="_blank" >堆糖网</a> <a target="_blank" >爱帮网</a> <a target="_blank" >LC风格网</a> <a target="_blank" >饭统网</a> <a target="_blank" >好豆网</a> <a target="_blank" >中国女装网</a> </li> <li> <a target="_blank" >服装品牌</a> <a target="_blank" >衣联网服装批发</a> <a target="_blank" >汽车答疑</a> <a target="_blank" >团购大全</a> <a target="_blank" >逛</a> <a target="_blank" >中国丽人网</a> <a target="_blank" >游记攻略</a> <a target="_blank" >名鞋库</a> <a target="_blank" >我易网</a> <a target="_blank" >亲贝网</a> </li> <li> <a target="_blank" >团800</a> <a target="_blank" >京东社区</a> <a target="_blank" >九正建材网</a> <a target="_blank" >中国品牌服装网</a> </li> </ul> </div> </body> </html>
相关文章:
jq【封装函数】向上滚动函数
相关文章推荐
- JQ插件第五十:文字列表无缝向上滚动
- jQuery插件实现文字无缝向上滚动效果代码
- jQuery插件实现文字无缝向上滚动效果代码
- jquery插件之文字无缝向上滚动
- 基于zepto的插件之移动端无缝向上滚动并上下触摸滑动
- js实现-新闻间歇性向上无缝滚动
- 向上滚动代码,不是无缝的,老代码,放在这里备忘
- 基于jQuery的图片左右无缝滚动插件
- 文字向上无缝滚动
- JQuery-跑马灯(文字无缝向上翻动)(自已封装的第三个插件)
- 功能强大的滚动播放插件JQ-Slide
- 基于JS实现新闻列表无缝向上滚动实例代码
- js向上无缝滚动,网站公告效果 具体代码
- jquery插件之文字间歇自动向上滚动效果代码
- 新闻无缝滚动插件
- 一个文字无缝滚动的jQuery插件
- marquee.js - jQuery 多功能无缝滚动插件
- JQuery插件Marquee.js实现无缝滚动效果
- jq 列表滚动图片jcarousellite插件介绍
- 基于编写jQuery的无缝滚动插件