;(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>
相关文章: