<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<style>
ul{
list-style:none;
margin:0px;
padding:0px;
position:absolute;
top:420px;
width:350px;
}
ul li{
margin-left:50px;
}
ul li img{
margin-top:10px;
margin-right:10px;
border:2px solid #fff;
}
ul li img:hover{
border:2px solid red;
}
#fdj{
width:150px;
height:150px;
position:absolute;
background:#FEEEA7;
display:none;
filter:alpha(opacity=50);
cursor:move;
}
.transparent_class {
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
#did{width:350px;height:350px;overflow:hidden;position:absolute;display:none;}
</style>
</head>
<body>
<h2>图片转换加放大镜</h2>
<img id="mid" src="./images/aa.jpg" width="350"/>
<ul id="uid">
<li>
<img src="./images/aa.jpg" width="50"/>
<img src="./images/bb.jpg" width="50"/>
<img src="./images/cc.jpg" width="50"/>
<img src="./images/dd.jpg" width="50"/>
</li>
</ul>
<div id="fdj" class="transparent_class"></div>
<div id="did">
<img src="images/aa.png"/>
</div>
<script>
var mid = document.getElementById("mid");
var aa = document.getElementById("aa");
var did = document.getElementById("did");
var didimg = document.getElementById("did").getElementsByTagName('img');
var list = document.getElementById("uid").getElementsByTagName("img");
for(var i=0;i<list.length;i++){
list[i].onmousemove = function(){
mid.src = this.src;
didimg[0].src = this.src.substring(0,(this.src.lastIndexOf('.')+1))+"png";;
}
}
//控制淡黄色方框移动的移动区域
window.document.onmousemove = function(e){
var et = e || window.event;
fdj.style.top = Math.max(70,Math.min(270,(et.clientY-75)))+"px";
fdj.style.left = Math.max(10,Math.min(210,(et.clientX-75)))+"px";;
fdj.style.display = "block";
if(et.clientY<70||et.clientY>415||et.clientX<10||et.clientX>360){
fdj.style.display = "none";
}
}
//当鼠标在放大镜上时 让右边大图显示
fdj.onmouseover = function(){
did.style.top = mid.offsetTop+"px";
did.style.left = (mid.offsetLeft+mid.offsetWidth+10)+"px";
did.style.display = "block";
}
//当鼠标移出放大镜上时 让右边大图消失
fdj.onmouseout = function(){
did.style.display = "none";
}
//当鼠标在放大镜上移动时 显示对于大图的位置
fdj.onmousemove = function(e){
var ev = e || window.event;
var x = ev.clientX-mid.offsetLeft;
var y = ev.clientY-mid.offsetTop;
did.scrollLeft = x*2.3-175;
did.scrollTop = y*2.3-175;
}
</script>
</body>
</html>
京东 图片转换加放大镜.rar （18个子文件） 
京东 图片转换加放大镜 
1.html 3KB images 
bb.png 458KB
dd.jpg 25KB Meinv121.jpg 410KB c.jpg 877B Meinv089.jpg 559KB cc.png 64KB bb.jpg 52KB Meinv110.jpg 603KB dd.png 239KB b.jpg 2KB d.jpg 2KB a.jpg 3KB aa.jpg 34KB aa.png 458KB cc.jpg 7KB Meinv052.jpg 701KB Meinv051.jpg 590KB资源评论
