JQuery插件之jQuery-easing的简单使用

最新推荐文章于 2024-03-15 09:33:58 发布

rzg813

最新推荐文章于 2024-03-15 09:33:58 发布

阅读量2.5k

点赞数

分类专栏： JQuery 文章标签： jquery插件动画

本文链接：https://blog.csdn.net/omsvip/article/details/38084707

版权

JQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

图片及文字滚动特效，目前在微信墙中使用：

首先html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>图片及文字滚动</title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script type="text/javascript" src="js/jQuery-easing.js" ></script>
		<script type="text/javascript" src="js/manhua_ImageScroll.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
		<script type="text/javascript">
			$(function (){
				$("#mhscroll").manhua_ImageScroll({up:"news_rolling_up",down:"news_rolling_down"});	
			});
		</script>
		<style>
			*{padding:0; margin:0;}
			img{border:0;}
			ul,li{list-style:none;}
			.scrolling{ overflow:hidden; margin:0 auto;}
			span{cursor:pointer; background:#009933; color:#fff; font-weight:bold; padding:5px; font-size:13px;}
		</style>
	</head>
	<body>
		<h1 class="h1">图片及文字滚动</h1>
		<div id="mhscroll" class="scrolling thumbnail">
			<ul>
				<li>5我是一段文字。。。你呢！</li>
				<li>4我是一段文字。。。你呢！</li>
				<li>3我是一段文字。。。你呢！</li>
				<li>2我是一段文字。。。你呢！</li>
				<li>1我是一段文字。。。你呢！</li>
			</ul>
		</div>
		<div style="margin:10px auto; width:150px;"><span id="news_rolling_up">向上滚动</span> <span id="news_rolling_down">向下滚动</span></div>
	</body>
</html>

manhua_ImageScroll.js

/***
 *图片滚动Jquery插件
 * version:manhua_ImageScroll.js
***/
$(function() {	
	$.fn.manhua_ImageScroll = function(options) {
		var defaults = {
			scrollCount 		: 1,					//图片滚动个数(默认为1个)
			width 				: 240,					//显示图片的宽度
			height				: 160,					//显示图片的高度
			showCount 			: 2,					//图片显示个数
			margin				: 10,					//图片与图片之间的间隔宽度（默认为：10）
			up 					: "up",					//绑定控制向上滚动的按钮
			down 				: "down",				//绑定控制向下滚动的按钮
			speed				: 1000,					//图片滚动的速度，数值越大，速度越慢（毫秒）
			time				: 3000,					//图片滚动的时间间隔（毫秒)
			state 				: 1,					//图片的滚动状态（0、向上或向左滚动，1、向下或向右滚动）
			easing				: "easeOutElastic"		//图片滚动动画类型（配合jQuery-easing.js动画插件里的参数）
		};		
		var options = $.extend(defaults,options);	
		var timer;// = $(parseInt(Math.random()*100000));//定时器
		var ulWH;//ul的高度或宽度
		var scrollWH;//图片滚动的第一个li的宽度或高度
		var scrollWidth;//图片滚动的宽度	
		var $this = $(this);
		var $ul = $(this).eq(0).find("ul:first");//获取图片滚动容器的UL对象
		var $li = $ul.find("li");//获取图片滚动容器的UL里面的li对象
		var $up = $("#"+options.up);//获取控制向上或向左滚动的按钮的对象
		var $down = $("#"+options.down);//获取控制向下或向右滚动的按钮的对象		
		//当滚动类型为上下滚动			
		$li.css({"height":options.height+"px","width":options.width+"px","margin-bottom":options.margin+"px"});//设置li的样式float:left
		scrollWH = $ul.find("li:eq(0)").outerHeight(true);//获取滚动的第一个li的高度
		ulWH = (parseInt(options.margin)+parseInt(options.height))*parseInt(options.showCount)-parseInt(options.margin);
		$this.css({"height":(ulWH+options.margin)+"px","width":(options.width+options.margin*2)+"px"});
		$ul.css({"height":ulWH+"px","width":options.width+"px"});			
		
		if(options.scrollCount===0){
			options.scrollCount = 1;//当滚动个数为0的时候，初始化为1
		}
		scrollWidth = 0-options.scrollCount*scrollWH;//初始化图片滚动的宽度	
		//图片向上滚动函数
		var scrollUp = function(){
			autoStop();
			options.state = 0;			
			if(options.type===1){
				$ul.stop().animate({marginLeft:scrollWidth},options.speed,options.easing,function(){
					for(i=1;i<=options.scrollCount;i++){
						$ul.find("li:first").appendTo($ul);
					}
					$ul.css({marginLeft:options.margin});					
				});
			}else{
				$ul.stop().animate({marginTop:scrollWidth},options.speed,options.easing,function(){
					for(i=1;i<=options.scrollCount;i++){
						$ul.find("li:first").appendTo($ul);
					}
					$ul.css({marginTop:options.margin});					
				});
			}
			autoPlay();
		}
		//图片向下滚动函数
		var scrollDown = function(){
			autoStop();
			options.state = 1;		
			for(i=1;i<=options.scrollCount;i++){
				$ul.find("li:last").show().prependTo($ul);
			}
			$ul.css({marginTop:scrollWidth});
			$ul.stop().animate({marginTop:options.margin},options.speed,options.easing);
			autoPlay();
		}
	   //图片自动滚动的函数
		var autoPlay = function(){
			//初始化定时器	
			timer = window.setInterval(function(){
				if (options.state === 0){
					scrollUp();
				}else{
					scrollDown();	
				}											   
			},options.time);			
		};		
		//图片停止自动滚动的函数
		var autoStop = function(){
			//清除定时器
			window.clearInterval(timer);
		};	
		//当鼠标移到图片时的事件绑定
		$ul.mouseover(autoStop).mouseout(autoPlay);
		//$up.die().bind("click",scrollUp); //绑定控制向上滚动的按钮的点击事件
		//$down.die().bind("click",scrollDown);//绑定控制向下滚动的按钮的点击事件	
		autoPlay();//启动自动滚动	
	}
});

需要引入jQuery-easing.js，jQuery.js

manhua_ImageScroll.js 修改备份：

/***
 *图片滚动Jquery插件
 * version:manhua_ImageScroll.js
***/
$(function() {	
	$.fn.manhua_ImageScroll = function(options) {
		var defaults = {
			scrollCount 		: 1,					//图片滚动个数(默认为1个)
			//width 				: 240,					//显示图片的宽度
			height				: 200,					//显示图片的高度
			showCount 			: 2,					//图片显示个数
			margin				: 10,					//图片与图片之间的间隔宽度（默认为：10）
			up 					: "up",					//绑定控制向上滚动的按钮
			down 				: "down",				//绑定控制向下滚动的按钮
			speed				: 1000,					//图片滚动的速度，数值越大，速度越慢（毫秒）
			time				: 3000,					//图片滚动的时间间隔（毫秒)
			state 				: 1,					//图片的滚动状态（0、向上或向左滚动，1、向下或向右滚动）
			easing				: "easeOutElastic"		//图片滚动动画类型（配合jQuery-easing.js动画插件里的参数）
		};		
		var options = $.extend(defaults,options);	
		var timer;// = $(parseInt(Math.random()*100000));//定时器
		var ulWH;//ul的高度或宽度
		var scrollWH;//图片滚动的第一个li的宽度或高度
		var scrollWidth;//图片滚动的宽度	
		var $this = $(this);
		var $ul = $(this).eq(0).find("ul:first");//获取图片滚动容器的UL对象
		var $li = $ul.find("li");//获取图片滚动容器的UL里面的li对象
		var $up = $("#"+options.up);//获取控制向上或向左滚动的按钮的对象
		var $down = $("#"+options.down);//获取控制向下或向右滚动的按钮的对象		
		//当滚动类型为上下滚动			
		$li.css({"height":options.height+"px","width":options.width+"px","margin-bottom":options.margin+"px"});//设置li的样式float:left
		scrollWH = $ul.find("li:eq(0)").outerHeight(true);//获取滚动的第一个li的高度
		ulWH = (parseInt(options.margin)+parseInt(options.height))*parseInt(options.showCount)-parseInt(options.margin);
		$this.css({"height":(ulWH+options.margin)+"px","width":(options.width+options.margin*2)+"px"});
		$ul.css({"height":ulWH+"px","width":options.width+"px"});			
		
		if(options.scrollCount===0){
			options.scrollCount = 1;//当滚动个数为0的时候，初始化为1
		}
		scrollWidth = 0-options.scrollCount*scrollWH;//初始化图片滚动的宽度	
		//图片向上滚动函数
		var scrollUp = function(){
			autoStop();
			options.state = 0;			
			if(options.type===1){
				$ul.stop().animate({marginLeft:scrollWidth},options.speed,options.easing,function(){
					for(i=1;i<=options.scrollCount;i++){
						$ul.find("li:first").appendTo($ul);
					}
					$ul.css({marginLeft:options.margin});					
				});
			}else{
				$ul.stop().animate({marginTop:scrollWidth},options.speed,options.easing,function(){
					for(i=1;i<=options.scrollCount;i++){
						$ul.find("li:first").appendTo($ul);
					}
					$ul.css({marginTop:options.margin});					
				});
			}
			autoPlay();
		}
		//图片向下滚动函数
		var scrollDown = function(){
			autoStop();
			options.state = 1;		
			for(i=1;i<=options.scrollCount;i++){
				$ul.find("li:last").show().prependTo($ul);
			}
			$ul.css({marginTop:scrollWidth});
			$ul.stop().animate({marginTop:options.margin},options.speed,options.easing);
			autoPlay();
		}
	   //图片自动滚动的函数
		var autoPlay = function(){
			//初始化定时器	
			timer = window.setInterval(function(){
				if (options.state === 0){
					scrollUp();
				}else{
					scrollDown();	
				}	
			},options.time);			
		};		
		//图片停止自动滚动的函数
		var autoStop = function(){
			//清除定时器
			window.clearInterval(timer);
		};	
		//当鼠标移到图片时的事件绑定
		//$ul.mouseover(autoStop).mouseout(autoPlay);
		//$up.die().bind("click",scrollUp); //绑定控制向上滚动的按钮的点击事件
		//$down.die().bind("click",scrollDown);//绑定控制向下滚动的按钮的点击事件	
		autoPlay();//启动自动滚动
		var stopAndStart=function(){
			var btnPauseVal=$(".btnPause").attr("title");
			if(btnPauseVal=="暂停"){
				autoStop();
				$(".btnPause").attr("title","开始");
				$(".btnPause").addClass("btn-pause");
			}else{
				options.state=1;
				autoPlay();
				$(".btnPause").attr("title","暂停");
				$(".btnPause").removeClass("btn-pause").addClass("btn-begin");
				$ul.find("li").show();
			}
		};
		$(".btnPause").click(stopAndStart);
		
		//上一条
		var scrollPrev = function(){
			autoStop();
			options.state = 0;			
			scrollUp();
			autoStop();
			$(".btnPause").attr("title","开始");
			$(".btnPause").addClass("btn-pause");
		}
		$(".btnPrev").click(scrollPrev);
		//下一条
		var scrollNext = function(){
			autoStop();
			options.state = 1;		
			scrollDown();
			autoStop();
			$(".btnPause").attr("title","开始");
			$(".btnPause").addClass("btn-pause");
		}
		$(".btnNext").click(scrollNext);
		//第一条
		var scrollOldest = function(){
			autoStop();
			var oldest=$ul.find("li").last().html();
			alert(oldest);
			$ul.find("li").hide(); 
			$ul.find("li:last").show(oldest);
			$(".btnPause").attr("title","开始");
			$(".btnPause").addClass("btn-pause");
		}
		$(".btnOldest").click(scrollOldest);
		//最后一条
		var scrollNewest = function(){
			autoStop();
			var newest=$ul.find("li").first().html();
			alert(newest);
			$ul.find("li").hide();
			$ul.find("li:last").show(newest);
			$(".btnPause").attr("title","开始");
			$(".btnPause").addClass("btn-pause");
		}
		$(".btnNewest").click(scrollNewest);
		
	}
});