Practical Training Demo1-album-detail的jQuery-放大镜的写法
作者:互联网
放大镜:
jQuery内容:
$(function(){ // 放大镜的写法与应用 $(".small_box").hover(function(){ // find =》向内查找子节点 $(this).find(".float_layer").show(); $(".big_box").show(); },function(){ $(this).find(".float_layer").hide(); $(".big_box").hide(); }); $(".small_box").mousemove(function(e){ // 是鼠标位置 var x = e.offsetX, y = e.offsetY; // 小黑框的左上角位置,-100 为保证让鼠标永远在小黑裤的中间位置 var left = x - 100,top = y - 100; // 让left和top不能为负值 if (left < 0) { left = 0; } if (top < 0) { top = 0; } if (left > 200) { left = 200; } if (top > 200) { top = 200; } // 小黑框 $(this).find(".float_layer").css({ top:top+"px", left:left+"px", }); // 大图片 $(".big_box img").css({ top:-2 * top +"px", left:-2 * left +"px", }) }); });
效果图:
标签:album,jQuery,Training,200,function,top,box,find,left 来源: https://www.cnblogs.com/zky1012/p/15557873.html