<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>diao</title> <link rel="stylesheet" type="text/css" href="css/test.css" /> <style type="text/css"> div,img{margin:0;padding:0;} body{background:#666;} #smallimg{width:400px;border:1px #fff solid;position:relative;float:left;margin:100px 100px 0 0;} #smallimg img{width:400px;float:left;} #showimg{width:150px;height:150px;background:#fff;opacity:0.5;filter:alpha(opacity=50);border:1px red solid;cursor:move;display:none;position:absolute;} #bigimg{width:600px;height:600px;float:left;border:1px red solid;display:none;} </style></head><body><div id="txt"> </div><div id="smallimg"> <img src="http://hiphotos.baidu.com/diao_qingpeng/pic/item/894dcaac5a2f468e7dd92ad0.jpg" alt="shrek2"/> <div id="showimg"></div></div><div id="bigimg"> </div><script type="text/javascript"> var $=function(id){return typeof(id)=="string"?document.getElementById(id):id}; var smallimg=$("smallimg"); var showimg=$("showimg"); var bigimg=$("bigimg"); var smallurl=smallimg.getElementsByTagName("img")[0].getAttribute("src"); var maxwidth=maxheight=showhalf=0; smallimg.onmouseover=function(){ showimg.style.display="block"; bigimg.style.display="block"; showhalf=showimg.offsetWidth/2; maxwidth=smallimg.clientWidth-showimg.offsetWidth; maxheight=smallimg.clientHeight-showimg.offsetHeight; } smallimg.onmousemove=function(e){ e=e||window.event; mousepos=mouseposition(e); var Top=mousepos.y-smallimg.offsetTop-showhalf; var Left=mousepos.x-smallimg.offsetLeft-showhalf; var num=bigimg.clientWidth/showimg.clientWidth; Top=Top<0?0:Top>maxheight?maxheight:Top; Left=Left<0?0:Left>maxwidth?maxwidth:Left; showimg.style.top=Top+"px"; showimg.style.left=Left+"px"; bigimg.style.background="url("+smallurl+") -"+Left*num+"px -"+Top*num+"px no-repeat"; } smallimg.onmouseout=function(){ showimg.style.display="none"; bigimg.style.display="none"; } function mouseposition(ev){ return{ x:ev.clientX+(document.body.scrollLeft||document.documentElement.scrollLeft), y:ev.clientY+(document.body.scrollTop||document.documentElement.scrollTop) } }
</script></body></html>
给上面的js代码注释说明一下谢谢
添加回答
举报
0/150
提交
取消