标签：album jQuery Training 200 function top box find left

放大镜:

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。