我做个放大镜玩,这些原生在JQ中不知道怎么修改求解决

图片描述

$('div.box>div.imgOne').bind('mouseover',function (e) {

    var $box = $('div.box');
    var $imgOne = $('div.box>div.imgOne');
    var $imgOne_1 = $('div.box>div.imgOne>div.imgOne_1');
    var $imgTwo = $('div.box>div.imgTwo');

    $('div.box>div.imgOne>div.imgOne_1').css('display','block');
    $('div.box>div.imgTwo').css('display','block');

    var a = e || window.event;
    var left_1  = a.clientX-$box.offsetLeft-$imgOne_1.offsetWidth/2;
    var top_1 = a.clientY-$box.offsetTop-$imgOne_1.offsetHeight/2;

    if(left_1<0){
        left_1 = 0;
    }else if(left1>$imgOne.offsetWidth-$imgOne_1.offsetWidth){
        left1 = $imgOne.offsetWidth-$imgOne_1.offsetWidth;
    }

    if(top_1<0){
        top_1 = 0;
    }else if(top_1>$imgOne.offsetHeight-$imgOne_1.offsetHeight){
        top_1 = $imgOne.offsetHeight-$imgOne_1.offsetHeight;
    }
    $imgOne_1.style.left = left_1+"px";
    $imgOne_1.style.top = top_1+"px";
    //等比例移动
    $imgTwo.style.left = -left_1*$imgTwo.offsetWidth/$imgOne.offsetWidth+'px';
    $imgTwo.style.top = -top_1*$imgTwo.offsetHeight/$imgOne.offsetHeight+'px';

}).bind('mouseout',function () {

    $('div.box>div.imgOne>div.imgOne_1').css('display','none');
    $('div.box>div.imgTwo').css('display','none');

})
阅读 1.5k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题