php图片放大镜,图片放大镜效果

摘要：html>

图片放大效果jq图片放大效果jq

body{margin:0;padding:0;}

body > div {float:left;width:450px;height:450px;border:1px solid #999;overflow: hidden;margin:20px 20px;border-radius:3px;box-shadow: 1px 0px 6px 1px #999;position: relative;cursor: pointer;}

/* 预览 */

.leftBox{position: absolute;background:rgba(111,111,111,.5);width:150px;height:150px;top:0;border-radius:4px;}

/* 左边 */

.left img {width:100%;height:100%;}

/* 预览图黑子 */

.leftBox{transition: all .08s linear;}

/* 右边 */

.right img {width:1350px;height:1350px;position: absolute;top:0;left:0;transition: all .5s linear;}

$(function(){

$('.left').hover(function(e){

},function(){

$('.leftBox').css('display','none');

})

$('.left').on('mousemove',function(e){

//设置盒子

$('.leftBox').css({

top : e.pageY - 20 - 75 + 'px' ,

left : e.pageX - 20 - 75 + 'px',

display : 'block'

})

let lT = parseInt($('.leftBox').css('top'));

let lL = parseInt($('.leftBox').css('left'));

//超出边界后,返回

if(lT > 0 && lT 

$('.right img').css('top',-lT *3 + 'px');

}

if(lL >0 && lL<300){

$('.right img').css('left',-lL *3  + 'px');

}

})

})

批改老师：灭绝师太批改时间：2019-02-11 09:44:04

老师总结：布局和js代码都要知道使用的意义所在,不可以囫囵吞枣哦