<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>放大镜</title> <style> * { margin: 0; padding: 0; }
#container { position: relative; }
#left { width: 430px; height: 430px; position: relative;
}
#inner { display: none; width: 231px; height: 231px; background-image: url(../images/21_03.png); opacity: 0.7; position: absolute; left: 0; top: 0; }
#tags li { width: 60px; height: 60px; list-style: none; float: left; }
#right { width: 430px; height: 430px; /*border: 1px solid red;*/ position: absolute; left: 500px; top: 0; overflow: hidden; } #right img{ position: absolute; left: 0; top: 0; } </style></head><body> <div id="container"> <div id="left"> <img src="../images/imgA_2.jpg"> <div id="inner"></div> </div> <ul id="tags"> <li><img src="../images/imgA_1.jpg"></li> <li><img src="../images/imgB_1.jpg"></li> <li><img src="../images/imgC_1.jpg"></li> <li><img src="../images/imgD_1.jpg"></li> </ul> <div id="right"></div> </div> <script src="../js/jquery-1.12.4.js"></script>
<script >
$(function(){ var setPosition; if((/IE [678]/).test(navigator.userAgent)){ setPosition=function(JDOM,x,y){ JDOM.css({ left:x+‘px‘, top:y+‘px‘ }); } }else{ setPosition=function(JDOM,x,y){ JDOM.css({ transform:‘translate(‘+x+‘px,‘+y+‘px)‘, WebkitTransform:‘translate(‘+x+‘px,‘+y+‘px)‘, MozTransform:‘translate(‘+x+‘px,‘+y+‘px)‘, OTransform:‘translate(‘+x+‘px,‘+y+‘px)‘, msTransform:‘translate(‘+x+‘px,‘+y+‘px)‘ }) } } $(‘#tags‘).on(‘mouseenter‘,‘li img‘,function(){ var imgPath=$(this).prop(‘src‘); //console.log(newPath); var newImgPath=imgPath.replace(/_1/,‘_2‘); //console.log(newImgPath); $(‘#left img‘).prop(‘src‘,newImgPath); });
$(‘#left‘).on(‘mouseenter‘,function(){ $(‘#inner‘).show(); var imgPath=$(‘#left img‘).prop(‘src‘); $(‘<img>‘).prop(‘src‘,imgPath.replace(/_2/,‘_3‘)).appendTo($(‘#right‘));
}).on(‘mousemove‘,‘#inner‘,function(event){ var x=event.pageX-115.5-$(‘#left‘).offset().left; if(x<0){ x=0; }else if(x>199){ x=199; } var y=event.pageY-115.5-$(‘#left‘).offset().top; if(y<0){ y=0; }else if(y>199){ y=199; } setPosition($(‘#inner‘),x,y); setPosition($(‘#right img‘),-x*800/430,-y*800/430); }).on(‘mouseleave‘,function(){ $(‘#inner‘).hide(); $(‘#right‘).hide(); });});
</script></body></html>
时间： 2025-01-02 16:10:55