Home Downloads jQuery advsBlocks 特效 - 仿无名良品首页商品图片展示特效

jQuery advsBlocks 特效 - 仿无名良品首页商品图片展示特效

// 普通静态效果
(function(){
    var VanclBlocksData = {
		blocksContainer: $('#vancl-block'),
		// mackup -- 所有数据都在页面上;
		// attribute -- 数据从图片的属性中获取,动态生成其余的界面
		// dynamic - 全部数据动态获取,然后根据数据动态生成界面
		dataType: 'mackup',
		isFade: false
	}, 
    blockVancl = new jQuery.advsBlocks(VanclBlocksData);
})();
// 通过加载数据自动生成界面
(function(){
    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);
})();
// 通过属性自动生成数据和部分界面
(function(){
    var KuaduBlockData = {
		blocksContainer: $('#kuadu-block'),
		// mackup -- 所有数据都在页面上;
		// atrribute -- 数据从图片的属性中获取,动态生成其余的界面
		// dynamic - 全部数据动态获取,然后根据数据动态生成界面
		dataType: 'attribute'
	},
	blockKuadu = new $.advsBlocks(KuaduBlockData);
})();

下载地址:advblocks.zip

Facebook Twitter Delicious 开心网 人人网 豆瓣网 新浪微博 网易微博 腾讯微博