间歇性向上无缝滚动（jq插件封装型）

最新推荐文章于 2024-03-14 11:53:25 发布

kongjiea

最新推荐文章于 2024-03-14 11:53:25 发布

阅读量3.4k

点赞数

分类专栏：常用js函数自写小插件

本文链接：https://blog.csdn.net/kongjiea/article/details/17611135

版权

常用js函数同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

自写小插件

4 篇文章 0 订阅

订阅专栏

;(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>

kongjiea

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
间歇性向上无缝滚动（jq插件封装型）

;(function($){ $.fn.moveUp=function(options){ var defaults = {//初始化参数 moveHeight:30, time:2000 }; var opts =$.extend({},defaults,options);//扩展参数 a=$(this); var top=0;
复制链接

扫一扫