放大镜

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)

}