html热力图的操作(点击图片的不同位置操作不同的事件)适合说明文档

标签：shape   核心   image   header   创建对象   图片   map   off   class   

页面核心代码

<div class="first_top">
<div class="back">
<img src="../assets/img/back@3x.png" class="imgup"></img>
</div>
<div class="use_book">使用说明</div>
</div>

<article class="wrap">
<header>
<div class="bg-img" id="div1">
<img class="imgto" src="../assets/img/1.png" usemap="#planetmap" alt="Planets" border="0"/>
<button class="but1" ></bitton>
<map name="planetmap" id="planetmap">
<area
shape="rect"
coords="0,0,0,0"
alt="rec"
id="single_ac"
/>
</map>
</div>
</header>
</article>

js代码：

$(function(){
// 创建对象
var img = new Image();
var src=jQuery(".imgto").attr("src");

img.src = src;
// 判断是否有缓存
if(img.complete){
var divheight=document.getElementById("div1").offsetHeight;
var divwidth=document.getElementById("div1").offsetWidth;

var y1=Math.round(divheight*(420/1144));
var x1=0;
var x2=divwidth;
var y2=20000;
var coords=x1+","+y1+","+x2+","+y2;
$("#single_ac").attr("coords",coords);
}else{
img.onload = function(){
var divheight=document.getElementById("div1").offsetHeight;
var divwidth=document.getElementById("div1").offsetWidth;
var y1=Math.round(divheight*(420/1144));
var x1=0;
var x2=divwidth;
var y2=20000;
var coords=x1+","+y1+","+x2+","+y2;
$("#single_ac").attr("coords",coords);

};
};
})

//图片的控制js代码

jQuery("#single_ac").click(function(){
var src=jQuery(".imgto").attr("src");
var array=src.split("/");
var str=array[array.length-1];
var array2=str.split(".");
var imgsize=parseInt(array2[0])+parseInt(1);

if(array2[0]==3){
jQuery(".imgto").attr("src","../assets/img/11.png"); //拍照图片
} else{
if(imgsize<11||(imgsize>11&&imgsize<17)){

jQuery(".imgto").attr("src","../assets/img/"+imgsize+".png");
}
//图片点击完成（自行处理）
if(imgsize==11||imgsize==17){

}
}
})
//下一张图片
$(".imgto").click(function(){
var src=jQuery(".imgto").attr("src");
var array=src.split("/");
var str=array[array.length-1];
var array2=str.split(".");

var imgsize=parseInt(array2[0])+parseInt(1);

//控制显示图片的张数
if(imgsize<11||(imgsize>11&&imgsize<17)){

jQuery(".imgto").attr("src","../assets/img/"+imgsize+".png");
}
//图片点击完成（自行处理）
if(imgsize==11||imgsize==17){

}
})
//上一张图片
$(".imgup").click(function(){
var src=jQuery(".imgto").attr("src");
var array=src.split("/");
var str=array[array.length-1];
var array2=str.split(".");
var imgsize=parseInt(array2[0])-parseInt(1);
//已经回到第一张
if(imgsize>0){
if(imgsize==10){
jQuery(".imgto").attr("src","../assets/img/"+3+".png");
}else{
jQuery(".imgto").attr("src","../assets/img/"+imgsize+".png");
}

}
})

html热力图的操作(点击图片的不同位置操作不同的事件)适合说明文档

标签：shape   核心   image   header   创建对象   图片   map   off   class   

原文地址：http://www.cnblogs.com/wpsyp/p/6186454.html