YAOHAIXIAO.COM

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

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

Rss

Home » Downloads » Photomarker – jQuery 仿淘宝画报展示插件

Photomarker – jQuery 仿淘宝画报展示插件

程序简介:

Photomarker(我自己起了个名字),仿的淘宝画报的特效。这个在淘宝上看到的一个不错的广告特效,所以自己也用 jQuery 自己写了一个。支持部分加载 JSON 数据,支持全部加载JSON数据,也支持读取页面中以后的DOM数据+JSON数据。

演示地址:普通数据

var HB_DATA = {
	"data": [{
		"main": "sample\/hb-1.jpg",
		"title": "画报图片-1",
		"sub": [{
			"top": 200,
			"left": 140,
			"src": "sample\/s-1.jpg",
			"title": "画报图片-1",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}, {
			"top": 300,
			"left": 240,
			"src": "sample\/s-2.jpg",
			"title": "画报图片-2",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}, {
			"top": 100,
			"left": 140,
			"src": "sample\/s-3.jpg",
			"title": "画报图片-3",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}],
		"sample": "sample\/hb-s-1.jpg"
	}, {
		"main": "sample\/hb-2.jpg",
		"title": "画报图片-2",
		"sub": [{
			"top": 200,
			"left": 140,
			"src": "sample\/s-2-1.jpg",
			"title": "画报图片-1",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}, {
			"top": 100,
			"left": 340,
			"src": "sample\/s-2-2.jpg",
			"title": "画报图片-2",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}, {
			"top": 300,
			"left": 40,
			"src": "sample\/s-2-3.jpg",
			"title": "画报图片-3",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}],
		"sample": "sample\/hb-s-2.jpg"
	}, {
		"main": "sample\/hb-3.jpg",
		"title": "画报图片-3",
		"sub": [{
			"top": 200,
			"left": 140,
			"src": "sample\/s-3-1.jpg",
			"title": "画报图片-1",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}, {
			"top": 300,
			"left": 240,
			"src": "sample\/s-3-2.jpg",
			"title": "画报图片-2",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}],
		"sample": "sample\/hb-s-3.jpg"
	}, {
		"main": "sample\/hb-4.jpg",
		"title": "画报图片-4",
		"sub": [{
			"top": 210,
			"left": 140,
			"src": "sample\/s-4-1.jpg",
			"title": "画报图片-1",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}, {
			"top": 340,
			"left": 140,
			"src": "sample\/s-4-2.jpg",
			"title": "画报图片-2",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}],
		"sample": "sample\/hb-s-4.jpg"
	}, {
		"main": "sample\/hb-1.jpg",
		"title": "画报图片-5",
		"sub": [{
			"top": 110,
			"left": 340,
			"src": "sample\/s-1.jpg",
			"title": "画报图片-1",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}, {
			"top": 240,
			"left": 240,
			"src": "sample\/s-2.jpg",
			"title": "画报图片-2",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}, {
			"top": 280,
			"left": 100,
			"src": "sample\/s-3.jpg",
			"title": "画报图片-3",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}],
		"sample": "sample\/hb-s-1.jpg"
	}, {
		"main": "sample\/hb-2.jpg",
		"title": "画报图片-6",
		"sub": [{
			"top": 400,
			"left": 240,
			"src": "sample\/s-2-1.jpg",
			"title": "画报图片-1",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}, {
			"top": 240,
			"left": 140,
			"src": "sample\/s-2-2.jpg",
			"title": "画报图片-2",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}, {
			"top": 200,
			"left": 240,
			"src": "sample\/s-2-3.jpg",
			"title": "画报图片-3",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}],
		"sample": "sample\/hb-s-2.jpg"
	}]
}, Huabao = new jQuery.PhotoMarker(HB_DATA);

全动态数据

var HB_DATA = {
	"dynamic": {
		"target": "#photo-pointer-demo"
	},
	"data": [{
		"main": "sample\/hb-1.jpg",
		"title": "画报图片-1",
		"sub": [{
			"top": 200,
			"left": 140,
			"src": "sample\/s-1.jpg",
			"title": "画报图片-1",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}, {
			"top": 300,
			"left": 240,
			"src": "sample\/s-2.jpg",
			"title": "画报图片-2",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}, {
			"top": 100,
			"left": 140,
			"src": "sample\/s-3.jpg",
			"title": "画报图片-3",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}],
		"sample": "sample\/hb-s-1.jpg"
	}, {
		"main": "sample\/hb-2.jpg",
		"title": "画报图片-2",
		"sub": [{
			"top": 200,
			"left": 140,
			"src": "sample\/s-2-1.jpg",
			"title": "画报图片-1",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}, {
			"top": 100,
			"left": 340,
			"src": "sample\/s-2-2.jpg",
			"title": "画报图片-2",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}, {
			"top": 300,
			"left": 40,
			"src": "sample\/s-2-3.jpg",
			"title": "画报图片-3",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}],
		"sample": "sample\/hb-s-2.jpg"
	}, {
		"main": "sample\/hb-3.jpg",
		"title": "画报图片-3",
		"sub": [{
			"top": 200,
			"left": 140,
			"src": "sample\/s-3-1.jpg",
			"title": "画报图片-1",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}, {
			"top": 300,
			"left": 240,
			"src": "sample\/s-3-2.jpg",
			"title": "画报图片-2",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}],
		"sample": "sample\/hb-s-3.jpg"
	}, {
		"main": "sample\/hb-4.jpg",
		"title": "画报图片-4",
		"sub": [{
			"top": 210,
			"left": 140,
			"src": "sample\/s-4-1.jpg",
			"title": "画报图片-1",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}, {
			"top": 340,
			"left": 140,
			"src": "sample\/s-4-2.jpg",
			"title": "画报图片-2",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}],
		"sample": "sample\/hb-s-4.jpg"
	}, {
		"main": "sample\/hb-1.jpg",
		"title": "画报图片-5",
		"sub": [{
			"top": 110,
			"left": 340,
			"src": "sample\/s-1.jpg",
			"title": "画报图片-1",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}, {
			"top": 240,
			"left": 240,
			"src": "sample\/s-2.jpg",
			"title": "画报图片-2",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}, {
			"top": 280,
			"left": 100,
			"src": "sample\/s-3.jpg",
			"title": "画报图片-3",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}],
		"sample": "sample\/hb-s-1.jpg"
	}, {
		"main": "sample\/hb-2.jpg",
		"title": "画报图片-6",
		"sub": [{
			"top": 400,
			"left": 240,
			"src": "sample\/s-2-1.jpg",
			"title": "画报图片-1",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}, {
			"top": 240,
			"left": 140,
			"src": "sample\/s-2-2.jpg",
			"title": "画报图片-2",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}, {
			"top": 200,
			"left": 240,
			"src": "sample\/s-2-3.jpg",
			"title": "画报图片-3",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}],
		"sample": "sample\/hb-s-2.jpg"
	}]
}, Huabao = new jQuery.PhotoMarker(HB_DATA);

读取部分已有DOM数据

var HB_DATA = {
	"dynamic": {
		"target": "#photo-pointer-demo",
		"source": "#pp-source"
	},
	"data": [{
		"main": "sample\/hb-1.jpg",
		"title": "画报图片-1",
		"sub": [{
			"top": 200,
			"left": 140,
			"src": "sample\/s-1.jpg",
			"title": "画报图片-1",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}, {
			"top": 300,
			"left": 240,
			"src": "sample\/s-2.jpg",
			"title": "画报图片-2",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}, {
			"top": 100,
			"left": 140,
			"src": "sample\/s-3.jpg",
			"title": "画报图片-3",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}],
		"sample": "sample\/hb-s-1.jpg"
	}, {
		"main": "sample\/hb-2.jpg",
		"title": "画报图片-2",
		"sub": [{
			"top": 200,
			"left": 140,
			"src": "sample\/s-2-1.jpg",
			"title": "画报图片-1",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}, {
			"top": 100,
			"left": 340,
			"src": "sample\/s-2-2.jpg",
			"title": "画报图片-2",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}, {
			"top": 300,
			"left": 40,
			"src": "sample\/s-2-3.jpg",
			"title": "画报图片-3",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}],
		"sample": "sample\/hb-s-2.jpg"
	}, {
		"main": "sample\/hb-3.jpg",
		"title": "画报图片-3",
		"sub": [{
			"top": 200,
			"left": 140,
			"src": "sample\/s-3-1.jpg",
			"title": "画报图片-1",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}, {
			"top": 300,
			"left": 240,
			"src": "sample\/s-3-2.jpg",
			"title": "画报图片-2",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}],
		"sample": "sample\/hb-s-3.jpg"
	}, {
		"main": "sample\/hb-4.jpg",
		"title": "画报图片-4",
		"sub": [{
			"top": 210,
			"left": 140,
			"src": "sample\/s-4-1.jpg",
			"title": "画报图片-1",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}, {
			"top": 340,
			"left": 140,
			"src": "sample\/s-4-2.jpg",
			"title": "画报图片-2",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}],
		"sample": "sample\/hb-s-4.jpg"
	}, {
		"main": "sample\/hb-1.jpg",
		"title": "画报图片-5",
		"sub": [{
			"top": 110,
			"left": 340,
			"src": "sample\/s-1.jpg",
			"title": "画报图片-1",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}, {
			"top": 240,
			"left": 240,
			"src": "sample\/s-2.jpg",
			"title": "画报图片-2",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}, {
			"top": 280,
			"left": 100,
			"src": "sample\/s-3.jpg",
			"title": "画报图片-3",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}],
		"sample": "sample\/hb-s-1.jpg"
	}, {
		"main": "sample\/hb-2.jpg",
		"title": "画报图片-6",
		"sub": [{
			"top": 400,
			"left": 240,
			"src": "sample\/s-2-1.jpg",
			"title": "画报图片-1",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}, {
			"top": 240,
			"left": 140,
			"src": "sample\/s-2-2.jpg",
			"title": "画报图片-2",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}, {
			"top": 200,
			"left": 240,
			"src": "sample\/s-2-3.jpg",
			"title": "画报图片-3",
			"intro": "查看宝贝详情 专柜正品 香水CD Dior 迪奥香水 迪奥花漾甜心女士香水50ML 包邮",
			"link": "http:\/\/www.yaohaixiao.com\/"
		}],
		"sample": "sample\/hb-s-2.jpg"
	}]
}, Huabao = new jQuery.PhotoMarker(HB_DATA);

下载地址:photomarker.zip

程序特点:

  1. 支持多种格式的数据(支持部分加载 JSON 数据,支持全部加载JSON数据,也支持读取页面中以后的DOM数据+JSON数据)
  2. 浏览器兼容性好

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:Photomarker – 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)