放大镜一：图片上部添加可移动遮盖层
重点：
不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src="jquery.js"></script> <style> *{ margin: 0px; padding: 0px; } .outer{ margin-left: 250px; margin-top: 250px; width:311px; height: 207px; position: relative; border:5px dashed lawngreen; } .float{ height:150px; width:150px; background-color: darkgray; opacity: 0.5; position: absolute; } .outer .small_box{ height:207px;
//这里不设置高度时，为何下边界会显示多出10px高度？？？？ } .outer .big_box{ position: absolute; top:0; left:321px; border: 5px dashed darkorange; width: 300px; height: 300px; overflow: hidden; } .hide{ display: none; } </style> <body> <div class="outer"> <div class="small_box"> <div class="float hide"> </div> <img src="small.jpg"/> </div> <div class="big_box hide"> <img src="big.jpg"/> </div> </div> </body> </html>
<script> $(".small_box").mouseover(function(){ $(".float").removeClass('hide'); $(".big_box").removeClass("hide"); }) $(".small_box").mouseout(function(){ $(".float").addClass('hide'); $(".big_box").addClass("hide"); }) $(".small_box").mousemove(function (e) { //防止其获取坐标出错 var _event=e || windows.event; //图片所在文档的偏移位置 var small_box_offset_top=$(".small_box").offset().top; var small_box_offset_left=$(".small_box").offset().left; //图片框的大小 var small_box_height=$(".small_box").height(); var small_box_width=$(".small_box").width(); //遮罩层的大小，取一半，为后面遮罩层四边和鼠标做准备 var float_height=$(".float").height()/2; var float_width=$(".float").width()/2; //面板可移动面积：只有中间区域，边界距离为面板的一半是无法移动的 //判断时将鼠标坐标转换到面板边界，然后与小照片相比 //鼠标为遮罩层的中心，获取遮罩层的四边，以便限制移动 var mouse_left=_event.clientX-float_width; var mouse_top=_event.clientY-float_height; var mouse_right=_event.clientX+float_width; var mouse_bottom=_event.clientY+float_height; //遮罩层应该移动的距离 var move_left=mouse_left-small_box_offset_left; var move_top=mouse_top-small_box_offset_top; if(mouse_top<=small_box_offset_top) move_top=0; if(mouse_bottom>small_box_offset_top+small_box_height) move_top=small_box_height-float_height*2; if(mouse_left<=small_box_offset_left) move_left=0; if(mouse_right>small_box_offset_left+small_box_width) move_left=small_box_width-float_width*2; $(".float").css('left',move_left+'px'); $(".float").css('top',move_top+'px'); //大图移动 //大小图比例2:1 }) </script>
以上移动鼠标遮罩层会正常移动，当.float遮罩层在small_box下为子元素时；
<div class="float hide"> </div> <div class="small_box"> <img src="small.jpg"/> </div> <div class="big_box hide"> <img src="big.jpg"/> </div>
但是当两者为同级时会出现闪烁选项，因为现实遮罩是在和small_box之间相互触发事件来回显示。
当加入.small_box时.float显示遮挡small_box导致.float消失，鼠标又回到.small_box中。来回显示切换
