YAOHAIXIAO.COM

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

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

Rss

Home » Downloads » advsBlocks - jQuery仿无名良品首页商品图片展示插件

advsBlocks - jQuery仿无名良品首页商品图片展示插件

程序简介:

advsBlocks – 在阿里巴巴时候需要这么一个效果,于是就自己写了一个。现在这个版本是用 jQuery 重写的,很经典也很实用的一个商品展示效果,主要的技巧是使用 CSS 预定义样式做好定位。推荐大家试试!

// mackup格式数据 - 所有数据都在页面上
var VanclBlocksData = {
    blocksContainer: $('#vancl-block'),
    // mackup -- 所有数据都在页面上;
    // attribute -- 数据从图片的属性中获取,动态生成其余的界面
    // dynamic - 全部数据动态获取,然后根据数据动态生成界面
    dataType: 'mackup',
    isFade: false
},
blockVancl = new jQuery.advsBlocks(VanclBlocksData);
// attribute -- 数据从图片的属性中获取,动态生成其余的界面
var KuaduBlockData = {
    blocksContainer: $('#kuadu-block'),
    // mackup -- 所有数据都在页面上;
    // atrribute -- 数据从图片的属性中获取,动态生成其余的界面
    // dynamic - 全部数据动态获取,然后根据数据动态生成界面
    dataType: 'attribute'
},
blockKuadu = new jQuery.advsBlocks(KuaduBlockData);
// 全部数据动态获取,然后根据数据动态生成界面
var MboxBlocksData = {
		blocksContainer: $('#mbox-block'),
		dataType: 'dynamic',
		isScrollTip: false,
		data: [{
			"blockClass": "s-1-1 p-1-1", // 根据预定义的样式给广告图片定位
			"url": "http://www.aliexpress.com/fm-store/602731/211078480-460717230/GGMM-Factory-DHL-Free-Shipping-Bluetooth-Keyboard-for-Apple-Series.html",
			"title": "GGMM Genuine Leather Cover Case iPad 2",
			"img": "sample/brand-7.jpg",
			"price": "US $34.99"
		}, {
			"blockClass": "s-1-1 p-2-1",
			"url": "http://www.aliexpress.com/fm-store/602731/211078480-460717230/GGMM-Factory-DHL-Free-Shipping-Bluetooth-Keyboard-for-Apple-Series.html",
			"title": "GGMM Genuine Leather Cover Case iPad 2",
			"img": "sample/brand-8.jpg",
			"price": "US $344.99"
		}, {
			"blockClass": "s-2-3 p-1-2",
			"url": "http://www.aliexpress.com/fm-store/602731/211078480-460717230/GGMM-Factory-DHL-Free-Shipping-Bluetooth-Keyboard-for-Apple-Series.html",
			"title": "GGMM Genuine",
			"img": "sample/brand-9.jpg"
		}, {
			"blockClass": "s-1-1 s-s-1 p-1-5",
			"url": "http://lp.taobao.com/go/act/discount/xrtj.php?spm=563.55011.102396.4&",
			"title": "Leather Cover Case iPad 2",
			"img": "sample/brand-10.jpg"
		}, {
			"blockClass": "s-1-1 s-s-1 p-1-6 p-s-6-1",
			"url": "http://lp.taobao.com/go/act/lp/lpjbp.php?spm=563.55011.102396.7&ad_id=&am_id=&cm_id=1400488128f35e6daf20&pm_id=",
			"title": "Cover Case iPad 2",
			"img": "sample/brand-11.jpg",
			"price": "US $64.99"
		}, {
			"blockClass": "s-1-2 s-s-2 p-2-5",
			"url": "http://lp.taobao.com/go/act/sale/xjbbgl.php?spm=563.55011.102396.2&",
			"title": "夏季宝宝攻略 - 无名良品",
			"img": "sample/brand-12.jpg",
			"price": "US $44.99"
		}]
}, 
blockMbox = new jQuery.advsBlocks(MboxBlocksData);

下载地址:advblocks.zip

程序特点:

  1. 支持多种格式数据(mackup、attribute、dynamic)
  2. 自定义展示效果(fade、scroll、both)
  3. 支持不同类型的展示样式(price – 展示单个产品价格的(普通)、no price – 展示品牌列表样式)
  4. 浏览器兼容性好

程序 JavaScript 源代码:

(function(){
	var isMouseLeaveOrEnter = function(e, handler){
		var reltg = null;
		
		if (e.type !== 'mouseout' && e.type !== 'mouseover') {
			return false;
		}
		
		reltg = e.relatedTarget;
		
		while (reltg && reltg !== handler) {
			reltg = reltg.parentNode;
		}
		
		return (reltg !== handler);
	};
	
	jQuery.advsBlocks = function(oConfig){
		this.setting = {
			isFade: true,
			isScrollTip: true,
			blocksContainer: null,
			blocks: null,
			dataType: 'attribute',
			blocksData: []
		};
		
		$.extend(this.setting, oConfig);
		
		this.init();
		
		return this;
	};
	
	jQuery.advsBlocks.prototype = {
		init: function(){
			var setting = this.setting;
			
			if (!setting.blocksContainer) {
				return null;
			}
			
			this.build().bind();
			
			return this;
		},
		
		build: function(){
			var advsBlocks = this, 
			    blocksContainer = null, 
				blocks = null, 
				photos = null, 
				dataType = this.getDataType(), 
				data = [], 
				url = '', 
				price = '', 
				title = '', 
				tmpArray = null;
			
			// 非mackup的数据类型才需要创建相关的组件
			if (dataType === 'mackup') {
				return this;
			}
			else {
				// 静态数据时,直接可以获得blocks的nodeList,并且可以获得nodeList长度
				if (dataType === 'attribute') {
					blocks = this.setting.blocks = this.getBlocks();
					
					tmpArray = $(blocks);
				}
				else {
					// 动态数据时,需要获取动态的数据数组,从而获得数组长度
					if (dataType === 'dynamic') {
						data = this.getBlocksData();
						tmpArray = $(data);
					}
				}
			}
			
			tmpArray.each(function(i, tmpData){
				var curBlock = null, 
				    curContent = null, 
					curLink = null, 
					curImage = null, 
					curData = {}, 
					tmpPlus = null, 
					tmpMask = null, 
					tmpHeader = null, 
					tmpFooter = null;
				
				// 静态数据时,可以直接通过blocks的nodeList的索引值获得当前的curBlock的DOM对象
				if (dataType === 'attribute') {
					curBlock = $(tmpData);
				}
				else {
					// 动态数据时,我们需要通过对应的动态数据的信息来创建对象curBlock的DOM对象
					if (dataType === 'dynamic') {
						curData = tmpData;
						
						// 通过curData的信息,动态创建出跟静态数据一样的内容(一个图片链接),格式如:
						// <a href="http://www.aliexpress.com/fm-store/405910/211006654-462073678/AK-Baseball-Label-Printed-Washer-Polo-tshirt-100-Cotton-Men-s-Casual-tshirt-Wholesale-Retail.html" rel="US $32.00">
						//     <img src="sample/brand-14.jpg" alt="AK Baseball Label Printed Washer Polo tshirt,100% Cotton ,Men's Casual tshirt,Wholesale/Retail" />
						// </a>
						curContent = advsBlocks.createContent.call(advsBlocks, curData.url, curData.title, curData.price || '', curData.img);
						// 根据curData的信息创建curBlock的DOM对象
						curBlock = advsBlocks.createBlock.call(advsBlocks, curData.blockClass);
						// 把创建出来的内容信息添加到curBlock中
						curBlock.append(curContent);
						
						// 将创建出来的curBlock添加到BlocksContainer节点中
						blocksContainer = advsBlocks.getBlocksContainer.call(advsBlocks);
						blocksContainer.append(curBlock);
					}
				}
				
				// 根据已有(或动态创建)的图片链接,获取相关信息
				curLink = $(curBlock.find('a')[0]);
				curImage = $(curBlock.find('img')[0]);
				
				url = curLink.attr('href'); // 超链接的路径
				price = curLink.attr('rel'); // 商品的价格
				title = curImage.attr('alt'); // 图片介绍
				// 动态创建动画特效需要的DOM组件,格式如:
				// <h5 class="hd-block"><a href="http://www.aliexpress.com/category/3/apparel.html?ismall=y">GGMM Genuine Leather Cover Case iPad 2</a></h5>
				// <p class="ft-block"><a href="http://www.aliexpress.com/category/3/apparel.html?ismall=y"><em>US $120.00</em></a></p>
				// <span class="plus-block"><a href="http://www.aliexpress.com/category/3/apparel.html?ismall=y">GGMM Genuine Leather Cover Case iPad 2</a></span>
				// <span class="mask-block"><a href="http://www.aliexpress.com/category/3/apparel.html?ismall=y">GGMM Genuine Leather Cover Case iPad 2</a></span>
				tmpHeader = advsBlocks.createHeader.call(advsBlocks, url, title, price);
				tmpFooter = advsBlocks.createFooter.call(advsBlocks, url, price);
				tmpPlus = advsBlocks.createPlus.call(advsBlocks, url, title);
				tmpMask = advsBlocks.createMask.call(advsBlocks, url, title);
				
				curBlock.append(tmpHeader).append(tmpFooter).append(tmpPlus).append(tmpMask);
			});
			
			return this;
		},
		
		createBlock: function(blockClass){
			var block = $('<li></li>').addClass(blockClass);
			
			return block;
		},
		
		createHeader: function(url, title, price){
			var link = this.createLink(url, title), 
			    header = $('<h5></h5>').addClass('hd-block');
			
			if (price == '') {
				header.addClass('list-bg');
			}
			
			header.append(link);
			
			return header;
		},
		
		createContent: function(url, title, price, img){
			var image = $('<img/>').attr({
				'src': img,
				'alt': title
			}), link = $('<a></a>').attr({
				'rel': price,
				'href': url
			}).append(image);
			
			return link;
		},
		
		createFooter: function(url, price){
			var footer = $('<p></p>').addClass('ft-block').html('<a href=\"' + url + '\"><em>' + price + '<\/em><\/a>');
			
			return footer;
		},
		
		createMask: function(url, title){
			var link = this.createLink(url, title), 
			    mask = $('<span></span>').addClass('mask-block').append(link);
			
			return mask;
		},
		
		createPlus: function(url, title){
			var link = this.createLink(url, title), 
			    plus = $('<span></span>').addClass('plus-block').append(link);
			
			return plus;
		},
		
		createLink: function(url, title){
			var link = $('<a></a>').attr('href', url).text(title);
			
			return link;
		},
		
		bind: function(){
			var blocks = this.getBlocks(), 
			    advsBlocks = this;
			
			blocks.each(function(i, block){
				$(block).on('mouseover', {
					scope: advsBlocks,
					target: block
				}, advsBlocks._onBlockOver);
				
				$(block).on('mouseout', {
					scope: advsBlocks,
					target: block
				}, advsBlocks._onBlockOut);
			});
			
			return this;
		},
		
		_onBlockOver: function(evt){
			var evtData = evt.data, 
			    advsBlocks = evtData.scope, 
				curHover = evtData.target, 
				hd = $(curHover).find('h5')[0], 
				mask = $(curHover).find('span')[1], 
				plus = $(curHover).find('span')[0], 
				ft = $(curHover).find('p')[0], 
				price = null, 
				hdTop = 0, 
				ftTop = 0, 
				isFade = advsBlocks.getIsFade.call(advsBlocks), 
				isScrollTip = advsBlocks.getIsScrollTip.call(advsBlocks);
				
			if (isMouseLeaveOrEnter(evt, curHover)) {
				if (!mask.isFading) {
					$(mask).css({
						'opacity': 0.5,
						'display': 'block'
					});
					
					if (plus) {
						$(plus).css('display', 'block');
					}
					
					// 如果设置了文字价格信息的滚动动画
					if (isScrollTip) {
						if (hd) {
							if (!$(hd).hasClass('list-bg')) {
								hdTop = -($(hd).height());
								
								$(hd).css({
									'display': 'block',
									'top': hdTop + 'px'
								});
								
								if (!hd.isScrolling) {
									hd.isScrolling = true;
									
									$(hd).animate({
										'top': 0
									}, null, function(){
										hd.isScrolling = false;
									});
								}
							}
							else {
								$(hd).css('display', 'block');
							}
						}
						
						if (ft) {
							ftTop = ($(mask).height()) - ($(ft).height());
							
							$(ft).css({
								'top': $(mask).height() + 'px',
								'display': 'block'
							});
							
							price = $($(ft).find('a')[0]).addClass('scroll');
							
							if (!ft.isScrolling) {
								ft.isScrolling = true;
								
								$(ft).animate({
									'top': ftTop + 'px'
								}, null, function(){
									ft.isScrolling = false;
								});
							}
						}
					}
					else {
						if (hd) {
							$(hd).css('display', 'block');
						}
						
						if (ft) {
							price = $($(ft).find('a')[0]).addClass('scroll');
							
							$(ft).css('display', 'block');
						}
					}
				}
				else {
					$(mask).css({
						'opacity': 0.5,
						'display': 'block'
					});
				}
			}
		},
		
		_onBlockOut: function(evt){
			var evtData = evt.data, 
			    advsBlocks = evtData.scope, 
				curHover = evtData.target, 
				hd = $(curHover).find('h5')[0], 
				mask = $(curHover).find('span')[1], 
				plus = $(curHover).find('span')[0], 
				ft = $(curHover).find('p')[0], 
				price = null, 
				isFade = advsBlocks.getIsFade.call(advsBlocks), 
				isScrollTip = advsBlocks.getIsScrollTip.call(advsBlocks);
			
			if (isMouseLeaveOrEnter(evt, curHover)) {
				// 如果设置了遮罩层的淡出动画
				if (isFade) {
					if (!mask.isFading) {
						mask.isFading = true;
						
						$(mask).css('opacity', 0.5).fadeOut(function(){
							mask.isFading = false;
							$(mask).css('display', 'none');
						});
					}
				}
				else {
					$(mask).css('display', 'none');
				}
				
				
				if (hd) {
					$(hd).css('display', 'none');
				}
				
				if (plus) {
					$(plus).css('display', 'none');
				}
				
				if (ft) {
					$(ft).css('display', 'none');
					
					price = $($(ft).find('a')[0]).removeClass('scroll');
				}
			}
		},
		
		getBlocksContainer: function(){
			var setting = this.setting;
			
			return setting.blocksContainer;
		},
		
		getDataType: function(){
			var setting = this.setting;
			
			return setting.dataType;
		},
		
		getBlocksData: function(){
			var setting = this.setting;
			
			return setting.data;
		},
		
		getIsFade: function(){
			var setting = this.setting;
			
			return setting.isFade;
		},
		
		getIsScrollTip: function(){
			var setting = this.setting;
			
			return setting.isScrollTip;
		},
		
		getBlocks: function(){
			var setting = this.setting;
			
			return setting.blocksContainer.find('li');
		}
	};
})();

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:advsBlocks - jQuery仿无名良品首页商品图片展示插件

« »

发表评论

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

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

(Spamcheck Enabled)