JS特效之美女放大镜效果
效果如下:
源码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>屌丝的寂寞之美女的放大镜效果</title> <style type="text/css"> #div1 { width: 200px; height: 200px; padding: 5px; border: 1px solid #ccc; position: relative; } #div1 .small_pic { width: 200px; height: 200px; background: #eee; position: relative; } #div1 .small_pic img{width:200px;height:200px;} #div1 .float_layer { width: 50px; height: 50px; border: 1px solid #000; background: #fff; filter: alpha(opacity: 30); opacity: 0.3; position: absolute; top: 0; left: 0; display:none; } #div1 .mark {width:100%; height:100%; position:absolute; z-index:2; left:0px; top:0px; background:red; filter:alpha(opacity:0); opacity:0;} #div1 .big_pic { position: absolute; top: -1px; left: 215px; width:250px; height:250px; overflow:hidden; border:2px solid #CCC; display:none; } #div1 .big_pic img { position:absolute; top: -30px; left: -80px; width:450px;height:450px} </style> </head> <body> <h2>屌丝的寂寞之美女的放大镜效果</h2> <div id="div1"> <div class="small_pic"> <span class="mark"></span> <span class="float_layer"></span> <img src="images/test.jpg" /> </div> <div class="big_pic"> <img src="images/test.jpg" /> </div> </div> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ var obj_div1=$('#div1'); var obj_mark=$('.mark'); var obj_float_layer=$('.float_layer'); var obj_small=$('.small_pic'); var obj_big=$('.big_pic'); var obj_img=obj_big.find('img'); obj_mark.mouseover(function(){ obj_float_layer.css('display','block'); obj_big.css('display','block'); }); obj_mark.mouseout(function(){ obj_float_layer.css('display','none'); obj_big.css('display','none'); }); obj_mark.mousemove(function(ev){ var obj_event=ev||event; //触发事件 var left=obj_event.clientX-obj_div1[0].offsetLeft-obj_small[0].offsetLeft-obj_float_layer[0].offsetWidth/2; var top=obj_event.clientY-obj_div1[0].offsetTop-obj_small[0].offsetTop-obj_float_layer[0].offsetHeight/2; //解决mark溢出到图片的问题 if(left<0){ //左边溢出 left=0; }else if(left>obj_mark[0].offsetWidth-obj_float_layer[0].offsetWidth){ //右边溢出 left=obj_mark[0].offsetWidth-obj_float_layer[0].offsetWidth; } if(top<0){ //上边溢出 top=0; }else if(top>obj_mark[0].offsetHeight-obj_float_layer[0].offsetHeight){ //下边溢出 top=obj_mark[0].offsetHeight-obj_float_layer[0].offsetHeight; } obj_float_layer[0].style.left=left+'px'; obj_float_layer[0].style.top=top+'px'; //左边鼠标移动时,右边可视区也跟着移动显示 var percentX=left/(obj_mark[0].offsetWidth-obj_float_layer[0].offsetWidth); //得到移动的X轴的比例 var percentY=top/(obj_mark[0].offsetHeight-obj_float_layer[0].offsetHeight); //得到移动的Y轴的比例 obj_img[0].style.left=-percentX*(obj_img[0].offsetWidth-obj_big[0].offsetWidth)+'px'; obj_img[0].style.top=-percentY*(obj_img[0].offsetHeight-obj_big[0].offsetHeight)+'px'; }); }) </script> </body> </html>