YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Downloads » ZoomOut Carousel – jQuery 图片缩放Carousel插件

ZoomOut Carousel – jQuery 图片缩放Carousel插件

程序简介:

ZoomOut Carousel是利用 jQuery 写的一个图片图片循环滚动放大的类似 Carousel 的特效。其实就是基本的布局结构和Carousel特效一样,只是图片在展示的时候的过度效果是中间的图片大显示。应该也是一个常见和实用的效果。喜欢的朋友可以试试我的这个程序,在展示多个图片的时候,或者像影片信息的内容时,这个效果是十分不错的选择。不过程序只是一个基础的雏形,如果还想做自动播放和其他功能的,就需要自己扩展了。我稍后也会不断的完善程序功能。

$('#zoomout-carousel').zoomOutCarousel({
   btnPrev: $('#zoomout-carousel-btn-prev'), // 必选
   btnNext: $('#zoomout-carousel-btn-next'), // 必选
   contents: $('.zoomout-carousel-item'),    // 必选
   tabs: $('.zoomout-carousel-index-item'),  // 可选
   lastIndex: 4                              // 默认显示低级个图片
});

下载地址:zoomoutcarousel.zip

程序特点

  1. 支持前后循环展示
  2. 支持制定默认展示项
  3. 浏览器兼容性好

ZoomOut Carousel 文档: 

安装调用方法 

ZoomOut Carousel 是由 jQuery 编写的,所以首页需要在页面中添加 jQuery 库,代码如下:

<script type="text/javascript" src="http://www.yaohaixiao.com/js/jquery.js"></script>

其次就是添加 ZoomOut Carousel 的插件代码:

<script type="text/javascript" src="http://www.yaohaixiao.com/js/zoomout-carousel.js"></script>

调用代码如下:

$('#zoomout-carousel').zoomOutCarousel({
   btnPrev: $('#zoomout-carousel-btn-prev'), // 必选
   btnNext: $('#zoomout-carousel-btn-next'), // 必选
   contents: $('.zoomout-carousel-item'),    // 必选
   tabs: $('.zoomout-carousel-index-item'),  // 可选
   lastIndex: 4                              // 默认显示低级个图片
});

初始化配置参数说明 

ZoomOut Carousel 初始化的配置参数有9个:rootbtnPrevbtnNextcontentstabslastIndexprevIndexnextIndexdisabledIndex

Name Optional Data Type Discription
root  必选 HTMLElement 用来指定显示 ZoomOut Carousel 特效的根节点。
btnPrev  必选 HTMLElement 用来指定显示 ZoomOut Carousel 特效的上一张图片的按钮的 DOM 节点。
btnNext  必选 HTMLElement 用来指定显示 ZoomOut Carousel 特效的下一张图片的按钮的 DOM 节点。
contents  必选 HTMLNodelist 用来指定显示 ZoomOut Carousel 特效的所有图片节点的 NodeList 对象。
tabs  可选 HTMLNodelist 用来指定显示 ZoomOut Carousel 特效的索引标签节点(tab)的 NodeList 对象。
lastIndex  可选 Number 存储当前显示图片在 contents 对象中的 索引值。
prevIndex  可选 Number 存储当前显示图片的上一张图片在 contents 对象中的 索引值。
nextIndex  可选 Number 存储当前显示图片的下一张图片在 contents 对象中的 索引值。
disabledIndex  可选 Number 移动到不可见区域的图片的索引值。

ZoomOut Carousel 对象方法说明 

init() 

init()是初始化方法,根据初始化配置的参数获取相应的组件,并且显示制定的默认显示图片,代码如下:

	    /**
	     * 初始化程序
		 *
		 * @method init
		 * @return {Object} - 返回  $.zoomOutCarousel 对象
		 */
        init: function(){
			var setting = this.setting, contents = null, root = $(setting.root);
			
			// 设置了 root 则在 root 中查找 tabs 和 contents
			// 推荐设置 root,减少 DOM 遍历,提高效率
			if (root) {
				setting.tabs = root.find(setting.tabs);
				contents = setting.contents = root.find(setting.contents);
			}
			else {
				// 没有设置 root 则全文档遍历查找 tabs 和 contents
				// 相对在制定的 root 中查找效率要低
				setting.tabs = $(setting.tabs);
				contents = setting.contents = $(setting.contents);
			}
			
			if (contents.length < 1) {
				return false;
			}
			
			// 获得相关的展示内容(在contents中)的索引值
			setting.prevIndex = setting.lastIndex - 1 > 0 ? setting.lastIndex - 1 : (contents.length - 1);
			setting.nextIndex = setting.lastIndex + 1 < (contents.length - 1) ? setting.lastIndex + 1 : 0;
			setting.disabledIndex = setting.nextIndex + 1 < (contents.length - 1) ? setting.nextIndex + 1 : 0;
			
			// 根据设置显示当前显示的图片
			this.move(setting.lastIndex, 0, true);
			
			return this;
		}

bind() 

bind()是给上下一张按钮绑定处理函数,代码如下:

	    /**
	     * 给上下一张按钮绑定处理函数
		 *
		 * @method bind
		 * @return {Object} - 返回  $.zoomOutCarousel 对象
		 */
        bind: function(){
			var that = this, 
			    setting = this.setting, 
				btnNex = null, 
				btnPrev = null;
			
			if (!setting.btnPrev || !setting.btnNext) {
				return false;
			}
			
			// 获得上下一张按钮
			btnPrev = $(setting.btnPrev);
			btnNext = $(setting.btnNext);
			
			// 给上一张按钮绑定处理方法
			btnPrev.click(function(evt){
				that.prev.call(that, setting.lastIndex);
				
				evt.preventDefault();
				evt.stopPropagation();
			});
			
			// 给下一张按钮绑定处理方法
			btnNext.click(function(evt){
				that.next.call(that, setting.lastIndex);
				
				evt.preventDefault();
				evt.stopPropagation();
			});
			
			return this;
		}	

move() 

move()是切换移动图片的方法,代码如下:

	    /**
	     * 切换移动图片的方法
		 *
		 * @method move
		 * @parma {Number} curIndex - 必选,当前显示在最中间图片的索引值
		 * @parma {Boolean} [isPrev] - 可选,是否是从左到右的顺序移动图片
		 * @parma {Boolean} [isInit] - 可选,是否是初始化的移动配置
		 * @return {Object} - 返回  $.zoomOutCarousel 对象
		 */
        move: function(curIndex, isPrev, isInit){
			if (!curIndex && curIndex !== 0) {
				return false;
			}
			
			var that = this, 
			    setting = this.setting, 
				tabs = setting.tabs, 
				contents = setting.contents, 
				disabledIndex = setting.disabledIndex, 
				nextIndex = setting.nextIndex, 
				prevIndex = setting.prevIndex, 
				curImg = $($(contents[curIndex]).find('img')[0]), 
				nextImg = $($(contents[nextIndex]).find('img')[0]), 
				prevImg = $($(contents[prevIndex]).find('img')[0]), 
				NORMAL_IMG_CONFIG = {
				    width: '166px',
				    height: '240px',
			    };
			
			// 初始化配置时显示
			if (isInit) {
				contents.each(function(i, content){
					// 将所有不可见的图片都隐藏起来,设置为 zoomout-carousel-disabled
					if (i !== curIndex && i !== nextIndex && i !== prevIndex) {
						$(contents[i]).removeClass('current').addClass('zoomout-carousel-disabled');
						// 调用disable设置为不可见
						that.disable.call(that, i, isPrev);
					}
				});
			}
			else {
			    // 如果不是初始化,则值需要将上一张或下一张的图片设置为不可见
				this.disable(disabledIndex, isPrev);
			}
			
			// 如果有下一张的图片,则给图片设置缩放的动画
			// 我的程序是同时动画缩放包含图片的DIV和缩放图片
			if (nextImg.length > 0) {
				nextImg.animate(NORMAL_IMG_CONFIG);
			}
			
			// 动画缩放包含图片的DIV
			$(contents[nextIndex]).animate({
				top: '50px',
				left: '314px',
				opacity: 0.6,
				width: '166px',
				height: '240px'
			}, null, function(){
			    // 如果是从右向左移动显示
				if (isPrev) {
				    // 之前的当前图片就是上一张的图片,向左边移动,就不是当前图片了
					$(contents[nextIndex]).removeClass('current');
				}
				else {
					$(contents[nextIndex]).removeClass('zoomout-carousel-disabled');
				}
				
	            // 设置下一张图片的样式
				$(contents[nextIndex]).addClass('zoomout-carousel-next');
			});
			
			// 动画缩放显示当前的图片
			if (curImg.length > 0) {
				curImg.animate({
					width: '222px',
					height: '320px'
				});
			}
			
			// 动画缩放显示当前的图片框的DIV
			$(contents[curIndex]).animate({
				left: '134px',
				top: '10px',
				opacity: 1,
				width: '222px',
				height: '320px'
			}, null, function(){
				if (isPrev) {
					$(contents[curIndex]).removeClass('zoomout-carousel-prev');
				}
				else {
					$(contents[curIndex]).removeClass('zoomout-carousel-next');
				}
				$(contents[curIndex]).addClass('current');
			});
			
			if (prevImg.length > 0) {
				prevImg.animate(NORMAL_IMG_CONFIG);
			}
			
			$(contents[prevIndex]).animate({
				top: '50px',
				left: '10px',
				opacity: 0.6,
				width: '166px',
				height: '240px'
			}, null, function(){
				if (isPrev) {
					$(contents[prevIndex]).removeClass('zoomout-carousel-disabled');
				}
				else {
					$(contents[prevIndex]).removeClass('current');
				}
				$(contents[prevIndex]).addClass('zoomout-carousel-prev');
			});
			
			// 如果有索引tabs,则设置 tab 的当前状态
			if (tabs.length >= 3) {
			    // 初始化时将默认第一个当前tab设置为非当前状态
				if (isInit) {
					tabs.removeClass('current');
					$(tabs[curIndex]).addClass('current');
				}
				else {
				    // 将上个当前状态设置为非当前状态
					$(tabs[setting.lastIndex]).removeClass('current');
					$(tabs[curIndex]).addClass('current');
				}
			}
			
			return this;
		}

prev() 

prev()向前一张图片移动的方法,代码如下:

	    /**
	     * 向前一张图片移动的方法
		 *
		 * @method move
		 * @parma {Number} index - 必选,当前显示在最中间图片的索引值
		 * @return {Object} - 返回  $.zoomOutCarousel 对象
		 */
        prev: function(index){
			if (!index && index !== 0) {
				return false;
			}
			
			var that = this, 
			    setting = this.setting, 
				contents = setting.contents, 
				curIndex = index - 1 >= 0 ? index - 1 : (contents.length - 1);
			
			// 根据向上移动的顺序计算各个位置的图片的索引值
			setting.prevIndex = curIndex - 1 >= 0 ? curIndex - 1 : (contents.length - 1);
			setting.nextIndex = curIndex + 1 <= (contents.length - 1) ? curIndex + 1 : 0;
			setting.disabledIndex = setting.nextIndex + 1 <= (contents.length - 1) ? setting.nextIndex + 1 : 0;
			
			// 开始移动图片
			that.move.call(that, curIndex, 1);
			
			// 移动完毕后,当前的显示图片就是上一次显示的图片
			setting.lastIndex = curIndex;
			
			return this;
		}	

next() 

next()向后一张图片移动的方法,代码如下:

	    /**
	     * 向后一张图片移动的方法
		 *
		 * @method move
		 * @parma {Number} index - 必选,当前显示在最中间图片的索引值
		 * @return {Object} - 返回  $.zoomOutCarousel 对象
		 */
        prev: function(index){
			if (!index && index !== 0) {
				return false;
			}
			
			var that = this, 
			    setting = this.setting, 
				contents = setting.contents, 
				curIndex = index - 1 >= 0 ? index - 1 : (contents.length - 1);
			
			// 根据向后移动的顺序计算各个位置的图片的索引值
			setting.prevIndex = curIndex - 1 >= 0 ? curIndex - 1 : (contents.length - 1);
			setting.nextIndex = curIndex + 1 <= (contents.length - 1) ? curIndex + 1 : 0;
			setting.disabledIndex = setting.nextIndex + 1 <= (contents.length - 1) ? setting.nextIndex + 1 : 0;
			
			// 开始移动图片
			that.move.call(that, curIndex, 1);
			
			// 移动完毕后,当前的显示图片就是上一次显示的图片
			setting.lastIndex = curIndex;
			
			return this;
		}	

disable() 

disable()根据移动顺序将图片设置为不可见,代码如下:

	    /**
	     * 向后一张图片移动的方法
		 *
		 * @method move
		 * @parma {Number} disabledIndex - 必选,当前不可见图片的索引值
		 * @parma {Boolean} [isPrev] - 可选,是否为从左向右的顺序移动
		 * @return {Object} - 返回  $.zoomOutCarousel 对象
		 */
        disable: function(disabledIndex, isPrev){
			if (!disabledIndex && disabledIndex !== 0) {
				return false;
			}
			
			var setting = this.setting, 
			    contents = setting.contents;
			
			// 给不可见的图片添加动画
			$(contents[disabledIndex]).animate({
				left: '152px',
				opacity: 0
			}, null, function(){
			    // 动画移动完毕后将图片设置为不可见
				// 从左向右的顺序移动
				if (isPrev) {
					$(contents[disabledIndex]).removeClass('zoomout-carousel-next');
				}
				else {
					$(contents[disabledIndex]).removeClass('zoomout-carousel-prev');
				}
				$(contents[disabledIndex]).addClass('zoomout-carousel-disabled');
			});
			
			return this;
		}

程序 JavaScript 源代码

/**
 * @author Yaohaixiao
 */
$.ZoomOutCarousel = function(config){
	this.setting = {
		root: null,
		btnPrev: null,
		btnNext: null,
		contents: null,
		tabs: null,
		lastIndex: 0,
		prevIndex: 0,
		nextIndex: 0,
		disabledIndex: 0
	};
	
	$.extend(this.setting, config);
	
	this.init().bind();
	
	return this;
};
$.ZoomOutCarousel.prototype = {
	init: function(){
		var setting = this.setting,
			contents = null,
			root = $(setting.root);
		
		// 设置了 root 则在 root 中查找 tabs 和 contents
		// 推荐设置 root,减少 DOM 遍历,提高效率
		if(root){
			setting.tabs = root.find(setting.tabs);
			contents = setting.contents = root.find(setting.contents);
		}
		else{
			// 没有设置 root 则全文档遍历查找 tabs 和 contents
			// 相对在制定的 root 中查找效率要低
			setting.tabs = $(setting.tabs);
			contents = setting.contents = $(setting.contents);
		}
		
	    if (contents.length < 1) {
			return false;
		}
		
		// 获得相关的展示内容(在contents中)的索引值
		setting.prevIndex = setting.lastIndex - 1 > 0 ? setting.lastIndex - 1 : (contents.length - 1);
		setting.nextIndex = setting.lastIndex + 1 < (contents.length - 1) ? setting.lastIndex + 1 : 0;
		setting.disabledIndex = setting.nextIndex + 1 < (contents.length - 1) ? setting.nextIndex + 1 : 0;
		
		this.move(setting.lastIndex, 0, true);
		
		return this;
	},
	bind: function(){
		var that = this, 
		    setting = this.setting, 
			btnNex = null,
			btnPrev = null;
			
		if(!setting.btnPrev || !setting.btnNext){
			return false;
		}
		
		btnPrev = $(setting.btnPrev);
	    btnNext = $(setting.btnNext);
		
		btnPrev.click(function(evt){
			that.prev.call(that, setting.lastIndex);
			
			evt.preventDefault();
			evt.stopPropagation();
		});
		
		btnNext.click(function(evt){
	        that.next.call(that, setting.lastIndex);
			
			evt.preventDefault();
			evt.stopPropagation();
		});
		
		return this;
	},
	move: function(curIndex, isPrev, isInit){
		if(!curIndex && curIndex !== 0){
			return false;
		}
		
		var that = this,
		    setting = this.setting,
	        tabs = setting.tabs,
		    contents = setting.contents,
			disabledIndex = setting.disabledIndex,
			nextIndex = setting.nextIndex,
			prevIndex = setting.prevIndex,
			curImg = $($(contents[curIndex]).find('img')[0]),
			nextImg = $($(contents[nextIndex]).find('img')[0]),
			prevImg = $($(contents[prevIndex]).find('img')[0]),
			NORMAL_IMG_CONFIG = {
				width: '166px',
				height: '240px',
			};
		
		if (isInit) {
		    contents.each(function(i,content){
				if (i !== curIndex && i !== nextIndex && i !== prevIndex) {
				    $(contents[i]).removeClass('current').addClass('zoomout-carousel-disabled');
				    that.disable.call(that, i, isPrev);
				}
			});
		}
		else {
			this.disable(disabledIndex, isPrev);
		}
		
		if (nextImg.length > 0) {
			nextImg.animate(NORMAL_IMG_CONFIG);
		}
		
		$(contents[nextIndex]).animate({
			top: '50px',
			left: '314px',
			opacity: 0.6,
			width: '166px',
			height: '240px'
		}, null, function(){
			if (isPrev) {
				$(contents[nextIndex]).removeClass('current');
			}
			else {
				$(contents[nextIndex]).removeClass('zoomout-carousel-disabled');
			}
			$(contents[nextIndex]).addClass('zoomout-carousel-next');
		});
		
		if (curImg.length > 0) {
			curImg.animate({
				width: '222px',
				height: '320px'
			});
		}
		
		$(contents[curIndex]).animate({
			left: '134px',
			top: '10px',
			opacity: 1,
			width: '222px',
			height: '320px'
		}, null, function(){
			if (isPrev) {
				$(contents[curIndex]).removeClass('zoomout-carousel-prev');
			}
			else {
				$(contents[curIndex]).removeClass('zoomout-carousel-next');
			}
			$(contents[curIndex]).addClass('current');
		});
		
		if (prevImg.length > 0) {
			prevImg.animate(NORMAL_IMG_CONFIG);
		}
		
		$(contents[prevIndex]).animate({
			top: '50px',
			left: '10px',
			opacity: 0.6,
			width: '166px',
			height: '240px'
		}, null, function(){
			if (isPrev) {
				$(contents[prevIndex]).removeClass('zoomout-carousel-disabled');
			}
			else {
				$(contents[prevIndex]).removeClass('current');
			}
			$(contents[prevIndex]).addClass('zoomout-carousel-prev');
		});
		
		if (tabs.length >= 3) {
			if (isInit) {
			    tabs.removeClass('current');
				$(tabs[curIndex]).addClass('current');
			}
			else {
				$(tabs[setting.lastIndex]).removeClass('current');
				$(tabs[curIndex]).addClass('current');
			}
		}
		
		return this;
	},
	prev: function(index){
		if(!index && index !== 0){
			return false;
		}
		
		var that = this,
		    setting = this.setting,
		    contents = setting.contents,
		    curIndex = index - 1 >= 0 ? index - 1 : (contents.length - 1);
            
		setting.prevIndex = curIndex - 1 >= 0 ? curIndex - 1 : (contents.length - 1);
        setting.nextIndex = curIndex + 1 <= (contents.length - 1) ? curIndex + 1 : 0;
        setting.disabledIndex = setting.nextIndex + 1 <= (contents.length - 1) ? setting.nextIndex + 1 : 0;
			
        that.move.call(that, curIndex, 1);
            
        setting.lastIndex = curIndex;
	    
		return this;
	},
	next: function(index){
		if(!index && index !== 0){
			return false;
		}
		
		var that = this,
		    setting = this.setting,
		    contents = setting.contents,
			curIndex = index + 1 <= (contents.length - 1) ? index + 1 : 0;
			
		setting.prevIndex = curIndex - 1 >= 0 ? curIndex - 1 : (contents.length - 1);
        setting.nextIndex = curIndex + 1 <= (contents.length - 1) ? curIndex + 1 : 0;
        setting.disabledIndex = setting.prevIndex - 1 >= 0 ? setting.prevIndex - 1 : (contents.length - 1);
			
	    that.move.call(that, curIndex, 0);
			
	    setting.lastIndex = curIndex;
		
		return this;
	},
	disable: function(disabledIndex, isPrev){
		if (!disabledIndex && disabledIndex !== 0) {
			return false;
		}
		
		var setting = this.setting, 
		    contents = setting.contents;
		
		$(contents[disabledIndex]).animate({
			left: '152px',
			opacity: 0
		}, null, function(){
			if (isPrev) {
				$(contents[disabledIndex]).removeClass('zoomout-carousel-next');
			}
			else {
				$(contents[disabledIndex]).removeClass('zoomout-carousel-prev');
			}
			$(contents[disabledIndex]).addClass('zoomout-carousel-disabled');
		});
		
		return this;
	}
};

$.fn.extend({
	zoomOutCarousel: function(options){
		options.root = $(this);
		
		new $.ZoomOutCarousel(options);
	}
});

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:ZoomOut Carousel – jQuery 图片缩放Carousel插件

« »

1 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)