function $(id){
return document.getElementById(id);
}
$("small").onmouseout=function(){
$("move").style.display="none";
$("big").style.display="none";
}
//鼠标在small里面移动
$("small").onmousemove=function(en){
$("move").style.display="block";
$("big").style.display="block";
$("small").style.cursor="move";
var e=en || window.event;
var x=e.clientX; //鼠标当前的坐标
var y=e.clientY;
var smallL=$("small").offsetLeft-document.body.scrollLeft;; //small的距离
var smallT=$("small").offsetTop-document.body.scrollTop;
var moveW=$("move").offsetWidth; //move的宽高
var moveH=$("move").offsetHeight;
var moveL=x-smallL-moveW/2; //move的相对于small的距离
if(moveL<0){
moveL=0;
}
var maxL=$("small").offsetWidth-moveW-2;
if(moveL>maxL){
moveL=maxL;
}
var moveT=y-smallT-moveH/2;
if(moveT<0){
moveT=0;
}
var maxT=$("small").offsetHeight-moveH-2;
if(moveT>maxT){
moveT=maxT;
}
// console.log(y)
// console.log(moveT)
//改变move的位子
$("move").style.left=moveL+"px";
$("move").style.top=moveT+"px";
//算big的显示区域
var bigW=$("big").offsetWidth-2;
var bigH=$("big").offsetHeight-2;
//big距离顶部的距离
// console.log(bigW)
// console.log(moveL)
bigL=(bigW/moveW)*moveL;
bigT=(bigH/moveH)*moveT;
// console.log(bigL)
$("bigImg").style.left=-bigL+"px";//相对的运动,方向是反的
$("bigImg").style.top=-bigT+"px";
}
var imgs=document.getElementsByTagName("li");
for(var i=0;i
imgs[i].onclick=function(){
console.log(this.childNodes[0].src)
//获取小图的src,赋值给smallImg和bigImg
$("smallImg").src=this.childNodes[0].src;
$("bigImg").src=this.childNodes[0].src;
}
// (function(n){
// imgs[n].onclick=function(){
// console.log(imgs[n].childNodes[0])
// $("smallImg").src=n+".jpg";
// $("bigImg").src=n+".jpg";
// }
// })(i)
}
