/**
* 热点切图前端显示 : 热点图片通用接口
* Created by wangliang3 2014 - 11 -4
* 页面图片设置 <img data-imghot="ture" ...../>
* ; 合并js文件，防止何必与之前的非正常函数冲突
*/
;jQuery(document).ready(function(){(function($, window){
var imghotUtil = {
isShow : true,
imgs : [],
mapKey : {
area : 'area',
info : 'info'
},
msg : {
msgid : 'imgHotMsg'
},
//从数组中计算最大最小值
getMaxMinFromArr : function(arr){
var rs ={
max : Math.max.apply(null, arr),
min : Math.min.apply(null, arr)
};
return rs;
},
//得到当前页面的最大 z-index + 1
getMaxZIndex : function(){
// 负无穷大
var highest = -Infinity;
$("*").each(function() {
var current = parseInt($(this).css("z-index"), 10);
if(current && highest < current){
highest = current;
};
});
return highest + 1;
},
//ajax请求方法
getAjaxDatas : function (url,data,callBack){
$.ajax(
{
type : "get",
url:url,
data:data,
dataType : "jsonp",
jsonp: "callback",
jsonpCallback : "handlerShangouImgCut",
cache: true,
timeout: 5000,
error : function(result) {
try{
callBack(result);
}catch(e){
//console.error('imgHotCut,js error 加载异常：' + url);
}
},
success:function(result){
try{
callBack(result);
}catch(e){
//console.error('imgHotCut,js error 加载异常：' + url);
}
},
complete:function(e,t){
if(t && t == "timeout"){
// console.error('imgHotCut,js complete 加载超时：' + url);
callBack(t);
}
}
}
)
},
//Js 实现类似Java中的Map对象
map : (function (){
return new function() {
var size = 0;
var entry = new Object();
this.put = function (key, value) {
if (!this.containsKey(key)) {
size++;
};
entry[key] = value;
};
this.get = function (key) {
if (this.containsKey(key)) {
return entry[key];
}else {
return null;
}
};
this.remove = function (key) {
if (delete entry[key]) {
size--;
}
};
this.containsKey = function (key) {
return (key in entry);
};
this.containsValue = function (value) {
for (var prop in entry) {
if (entry[prop] == value) {
return true;
}
}
return false;
};
this.values = function () {
var values = [];
for (var prop in entry) {
values.push(entry[prop]);
}
return values;
};
this.keys = function () {
var keys = [];
for (var prop in entry) {
keys.push(prop);
}
return keys;
};
this.size = function () {
return size;
};
this.clear = function () {
entry = new Object();
};
this.isEmpty = function () {
return size == 0 ? true : false;
};
this.getObjs = function (){
return entry;
};
}
})(),
//创建area元素唯一id
getId : function(){
if(this.map.containsKey(this.mapKey.area)){
var num = this.map.get(this.mapKey.area) + 1;
this.map.put(this.mapKey.area, num);
return 'area_id' + num;
}else{
this.map.put(this.mapKey.area, 1);
return 'area_id1';
}
},
//得到时间戳 备用
getTimestamp : function (){
var timestamp = Date.parse(new Date());
return timestamp;
},
getShapType : function(type){
switch(type){
case 1: return 'rect';
break;
case 2: return 'circle';
break;
case 3: return 'polygon';
break;
};
},
//初始化图片数据map
initImg : function (){
$('img').each(function(i){
if(this && $(this).attr('data-imghot') === 'true'){
var url = this.src,
usemap = 'usemap' + i;
$(this).attr('usemap', '#' + usemap);
this.usemap = usemap;
imghotUtil.map.put(url, this);
};
});
return this;
},
//初始化area
initArea : function(){
if(!this.map.isEmpty()){
var URLPrefix = URLPrefix || {};
URLPrefix.tuanmall = URLPrefix.tuanmall || 'http://t.yhd.com';
var url = URLPrefix.tuanmall + '/tuangou/squid/getHotImgCutInfo.do',
keys = this.map.keys(),
urls = keys.length == 1 ? keys[0] : keys.join(','); //多数据用逗号隔开请求
if(isPreview == 1){
url += "?rd="+(Math.random());
}
var param = {'url' : urls,'brandPreview' : isPreview};
this.getAjaxDatas(url,param,function(resp){
if(resp=="null" || !resp.hasOwnProperty("data")){
//console.error('网络服务不给力: ' + url);
return;
};
$.each(resp.data, function(i, data){
var list = data.list,
url = data.url,
img = imghotUtil.map.get(url),
rs = imghotUtil.getImgMapHtml(img, list);
mapHtml = rs[0],
arr_info = rs[1];
$(img).parent().append(mapHtml);
//imghotUtil.bindEvents(arr_info, img);
imghotUtil.bindEventsToImg(arr_info, img);
});
});
};
return this;
},
imgEvent : function(){
if(this.imgs.length > 0){
for(var i = 0, len = this.imgs.length; i < len ; i++){
this.imgs[i].target.bind({mouseover : function(e){
}
});
}
}
},
//得到图片map的html
getImgMapHtml : function (obj, data) {
var arr = [],
rs = [],
arr_info = [];
arr.push('<map name="' + obj.usemap + '" id="' + obj.usemap + '">');
$.each(data, function(i, item){
var id = imghotUtil.getId();
arr.push('<area id="' + id + '" shape="' + imghotUtil.getShapType(item.type) + '" coords="' + item.coords + '" action_type ="' + item.action_type + '" alt="" href="javascript:void(0)" />');
item.id = id;
arr_info.push(item);
});
arr.push('</map>');
rs.push(arr.join(''));
rs.push(arr_info);
return rs;
},
//计算area的显示位置
getAreaXY : function(area){
var xy = {};
switch(area.type){
case 1: //矩形取中间位置
if(area.coords.indexOf(',')){
var arr = area.coords.split(','), x1 = +arr[0], y1 = +arr[1], x2 = +arr[2], y2 = +arr[3];
xy.x = Math.round(x1 + (x2 - x1)/2),
xy.y = Math.round(y1 + (y2 - y1)/2);
};
break;
case 2: //圆形取圆心
if(area.coords.indexOf(',')){
var arr = area.coords.split(','), x1 = +arr[0], y1 = +arr[1];
xy.x = x1,
xy.y = y1;
};
break;
case 3: //多边形切面的中心位置
if(area.coords.indexOf(',')){
var arr = area.coords.split(','),
arrX = [] ,arrY = [];
//递归分组
var pop = function (arr, a, b) {
arr.length && a.push(arr.shift());
arr.length && b.push(arr.shift());
arr.length && pop(arr, a, b);
}
pop(arr, arrX, arrY);
var maxminX = this.getMaxMinFromArr(arrX),
maxminY = this.getMaxMinFromArr(arrY);
xy.x = Math.round(maxminX.min + (maxminX.max - maxminX.min)/2),
xy.y = Math.round(maxminY.min + (maxminY.max - maxminY.min)/2);
};
break;
}
return xy;
},
//绑定事件给图片对象
bindEventsToImg : function(arr_info, img){
var dom,
imgX = img.getBoundingClientRect().left + document.documentElement.scrollLeft + document.body.scrollLeft,
imgY = img.getBoundingClientRect().top + document.documentElement.scrollTop + document.body.scrollTop,
zindex = this.getMaxZIndex();
//console.log('imgX : ' + imgX + ' imgY : ' + imgY);
if(document.getElementById(imghotUtil.msg.msgid)){
dom = $('#' + imghotUtil.msg.msgid);
}else{
dom = $("<span id='imgHotMsg'></span>");
dom.css({
position : 'absolute',
background : 'red',
'z-index' : zindex,
display : 'none'
}).appendTo('body');
};
//设置提示图片,自适应缩放
var setDomImg = function(dom, url, wh, topLeft){
//console.log(topLeft);
var domCss = function(dom, url, wh, topLeft){
var top = Math.round(((+topLeft.top) - (+wh.height)/2)) + 'px';
var left = Math.round(((+topLeft.left) - (+wh.width)/2)) + 'px';
//console.log('top : ' + top + ' left : ' + left);
dom.css({
top : Math.round(((+topLeft.top) - (+wh.height)/2)) + 'px',
left : Math.round(((+topLeft.left) - (+wh.width)/2)) + 'px',
background : 'url(' + url + ')',
width : wh.width,
height : wh.height,
cursor : 'pointer'
});
};
var newImg = new Image();
newImg.src = img.src;
var imgWh = {}, obj = $(img);
if(newImg.complete){
imgWh = {
now_width : obj.width(),
now_heigh : obj.height(),
width: newImg.width,
height: newImg.height
};
//计算缩放
if(imgWh.now_width != imgWh.width || imgWh.now_heigh != imgWh.height){
topLeft.top = Math.round((imgWh.now_heigh * topLeft.y)/imgWh.height) + topLeft.imgY;
topLeft.left = Math.round((imgWh.now_width * topLeft.x)/imgWh.width) + topLeft.imgX;
}
domCss(dom, url, wh, topLeft);
}else {
newImg.onload = function () {
imgWh = {
now_width : obj.width(),
now_heigh : obj.height(),
width: newImg.width,
height: newImg.height
};
//计算缩放
if(imgWh.now_width != imgWh.width || imgWh.now_heigh != imgWh.height){
topLeft.top = Math.round((imgWh.now_heigh * topLeft.y)/imgWh.height) + topLeft.imgY;
topLeft.left = Math.round((imgWh.now_width * topLeft.x)/imgWh.width) + topLeft.imgX;
}
domCss(dom, url, wh, topLeft);
};
};
};
//设置文字提醒,自适应缩放
var setDomMsg = function(dom, topLeft, item){
var domCss = function(dom, topLeft){
dom.css({
background: 'red',
width: null,
height: null,
top: topLeft.top + 'px',
left: topLeft.left + 'px'
});
};
var newImg = new Image();
newImg.src = img.src;
var imgWh = {}, obj = $(img);
if(newImg.complete){
imgWh = {
now_width : obj.width(),
now_heigh : obj.height(),
width: newImg.width,
height: newImg.height
};
//计算缩放
if(imgWh.now_width != imgWh.width || imgWh.now_heigh != imgWh.height){
topLeft.top = Math.round((imgWh.now_heigh * topLeft.y)/imgWh.height) + topLeft.imgY;
topLeft.left = Math.round((imgWh.now_width * topLeft.x)/imgWh.width) + topLeft.imgX;
}
domCss(dom, topLeft);
}else {
newImg.onload = function () {
imgWh = {
now_width : obj.width(),
now_heigh : obj.height(),
width: newImg.width,
height: newImg.height
};
//计算缩放
if(imgWh.now_width != imgWh.width || imgWh.now_heigh != imgWh.height){
topLeft.top = Math.round((imgWh.now_heigh * topLeft.y)/imgWh.height) + topLeft.imgY;
topLeft.left = Math.round((imgWh.now_width * topLeft.x)/imgWh.width) + topLeft.imgX;
}
domCss(dom, topLeft);
};
};
dom.unbind('click');
dom.html(item.hover_message); //文案提醒
dom.show('normal');
};
//跳转页面
var openWindow = function(url){
if(url.indexOf('http') > -1){
window.open(url);
}else{
window.open('http://' + url);
}
};
//公共接口方法
var app = (function() {
var area = null;
return {
setArea : function (arg){
area === null && arg.show();
area = arg;
return this;
},
getArea : function(){
return area;
},
addEvent : function(){
if(null != area){
area.eve = 0;
}
return this;
},
removeEvent : function(){
if(null != area){
area.eve = 1;
}
return this;
},
getId : function(){
if(null != area){
return area.id;
}
return null;
},
getEve : function(){
if(null != area){
return area.eve;
}
return null;
}
}
})();
//热点区域
var area = function(id, item){
this.item = item;
this.id = id;
this.eve = 0;
this.target = $('#' + id);
};
//热点msg
area.prototype.show = function(){
//console.log(this.id);
//if(this.eve === 0){
var item = this.item;
var xy = imghotUtil.getAreaXY(item),
topLeft = {
x : xy.x,
y : xy.y,
imgX : imgX,
imgY : imgY,
top : imgY + xy.y,
left : imgX + xy.x
};
switch(item.action_type) {
case 1 : //图片提示
dom.html('');
if (imghotUtil.map.containsKey(item.hover_img)) {
var wh = imghotUtil.map.get(item.hover_img);
setDomImg(dom, item.hover_img, wh, topLeft);
} else {
var newImg = new Image();
newImg.src = item.hover_img;
if(newImg.complete){
var wh = {
width: newImg.width,
height: newImg.height
};
imghotUtil.map.put(item.hover_img, wh);
setDomImg(dom, item.hover_img, wh, topLeft);
}else{
newImg.onload = function () {
var wh = {
width: newImg.width,
height: newImg.height
};
imghotUtil.map.put(item.hover_img, wh);
setDomImg(dom, item.hover_img, wh, topLeft);
}
}
}
if(item.hover_img == "" || item.hover_img == null || item.hover_img == undefined){
console.log($('#' + this.id))
$('#' + this.id).css({
'cursor' : 'pointer'
});
$('#' + this.id).unbind('click').bind('click', function (e) {
openWindow(item.click_link);
});
}
dom.unbind('click'); //更保险，判断是否已经绑定易失效
dom.bind('click', function (e) {
openWindow(item.click_link);
});
dom.show();
break;
case 2 : //文字提示
setDomMsg(dom, topLeft, item);
break;
};
this.eve = 1;
//}
};
area.prototype.hide = function(){
};
area.prototype.addEvent = function(){
this.target.bind('mouseover', function(){
app.event();
});
return this;
};
area.prototype.removeEvent = function(){
this.target.unbind('mouseover');
};
//热点图
var ImageHot = function(img, arr_info){
this.unArea = null;
this.events = [];
this.target = img;
this.arr_info = arr_info;
this.areas = [];
};
ImageHot.prototype.initEreas = function(){
for(var i = 0, len = arr_info.length; i < len ; i++){
var item = arr_info[i],
id = item.id,
_area = new area(id, item);
this.areas.push(_area);
imghotUtil.map.put(id, _area);
};
return this;
};
//计算热区缩放
ImageHot.prototype.initZooming = function(){
//调整MAP中坐标
var adjustPosition = function (position, imgObj) {
var pageWidth = imgObj.now_width,
pageHeith = imgObj.now_heigh, //图片当前尺寸
imageWidth = imgObj.width , //图片实际尺寸
imageHeigth = imgObj.height;
var each = position.split(",");
//获取每个坐标点
for (var i = 0; i < each.length; i++) {
each[i] = Math.round(parseInt(each[i]) * pageWidth / imageWidth);//x坐标
i++;
each[i] = Math.round(parseInt(each[i]) * pageHeith / imageHeigth);//y坐标
}
//生成新的坐标点
var newPosition = [];
for (var i = 0; i < each.length; i++) {
newPosition.push(each[i]);
}
return newPosition;
};
//矩形 多边形 圆形 缩放
var zoomShap = function(area, imgWh){
var shap = area.target.attr('shape').toLowerCase();
if(shap === 'polygon' || shap === 'rect'){
var oldCoords = area.target.attr('coords');
var newcoords = adjustPosition(oldCoords, imgWh).join(',');
area.target.attr('coords', newcoords);
}else if(shap === 'circle'){
var oldCoords = area.target.attr('coords') + ',0';
var newcoords = adjustPosition(oldCoords, imgWh);
newcoords.splice(3, 1);
area.target.attr('coords', newcoords);
}
};
var newImg = new Image();
newImg.src = this.target.src;
var imgWh = {},
obj = $(this.target),
areas = this.areas;
if(newImg.complete){
imgWh = {
now_width : obj.width(),
now_heigh : obj.height(),
width: newImg.width,
height: newImg.height
};
if(imgWh.now_width != imgWh.width || imgWh.now_heigh != imgWh.height){
for(var i = 0, leng = areas.length; i < leng ;i++){
zoomShap(areas[i], imgWh);
}
}
}else {
newImg.onload = function () {
imgWh = {
now_width : obj.width(),
now_heigh : obj.height(),
width: newImg.width,
height: newImg.height
};
if(imgWh.now_width != imgWh.width || imgWh.now_heigh != imgWh.height){
for(var i = 0, leng = areas.length; i < leng ;i++){
zoomShap(areas[i], imgWh);
}
}
};
};
return this;
};
ImageHot.prototype.addEvents = function(){
for(var i = 0, len = this.areas.length; i < len ; i++){
this.areas[i].target.bind('mouseover', function(e){
var id = e.target.id;
var _area = imghotUtil.map.get(id);
//if(app.getId() != _area.id){
_area.show();
//};
//app.addEvent();
//app.setArea(_area).removeEvent();
});
}
return this;
};
//设定图片事件
ImageHot.prototype.addImgEvents = function(){
$(this.target).hover(function(){
try{
var div=$('#' + imghotUtil.msg.msgid);
div.show();
}catch(e){}
},function(){
try{
var div=$('#' + imghotUtil.msg.msgid);
div.hide();
}catch(e){}
});
return this;
};
this.imgs.push((new ImageHot(img, arr_info)).initEreas().initZooming().addEvents().addImgEvents()); //this.imgs 为备用
}
};
var isPreviewUrl=window.location.href.indexOf('pc=1')>0;
var isPreview = 0;
if(isPreviewUrl){
isPreview = 1;
}
imghotUtil.initImg().initArea();
})(jQuery, window)});
|
