您正在使用IPV4(35.168.110.128)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】多款云产品1折起,买云服务器送免费机器,最长免费续3个月      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2022年 中秋节 21
2022年 国庆节 42
2023年 元 旦 134
2023年 春 节 155
 
本类新增
本类热门文章
您现在的位置:首页 >> 脚本程序 >> 内容
js仿京东放大镜
内容摘要: !DOCTYPEhtmlhtmllang='en'headmetacharset='UTF-8'metahttp-equiv='X-UA-Compatible'content='IE=edge'metaname='viewport'content='width=device-width,initial-scale=1.0'title仿京东放大镜案例/titl......
<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metahttp-equiv="X-UA-Compatible"content="IE=edge">

<metaname="viewport"content="width=device-width,initial-scale=1.0">

<title>仿京东放大镜案例</title>

<style>

body{

padding:0;

margin:0;

}

.preview{

position:relative;

float:left;

width:400px;

height:300px;

}

.small{

width:400px;

height:300px;

}

.mask{

display:none;

position:absolute;

top:0px;

left:0px;

width:200px;

height:200px;

background-color:rgba(199,211,91,0.3);

cursor:move;

}

.big{

display:none;

position:absolute;

top:0px;

left:410px;

background-color:thistle;

width:600px;

height:500px;

z-index:999;

overflow:hidden;

/*超过图片的部分会隐藏*/

}

.bigImg{

position:absolute;

top:0;

left:0;

}

</style>

</head>

<body>

<divclass="preview">

<imgclass="small"src="bg2.jpg"alt="">

<divclass="mask"></div>

<divclass="big"><imgclass="bigImg"src="bg2.jpg"alt=""></div>

</div>

<script>

varmask=document.querySelector('.mask');

varpreview=document.querySelector('.preview');

varbig=document.querySelector('.big');

preview.addEventListener('mousemove',function(e){

varx=e.pageX-this.offsetLeft;

vary=e.pageY-this.offsetTop;

//找到鼠标在盒子内的坐标。

varnew_x=x-mask.offsetWidth/2;

varnew_y=y-mask.offsetHeight/2;

//限制黄色盒子的坐标。不能移动到盒子外。最大运动坐标:盒子宽(高)-遮罩层宽(高);最小运动坐标0

if(new_x>this.offsetWidth-mask.offsetWidth){

new_x=this.offsetWidth-mask.offsetWidth;

}elseif(new_x<0){

new_x=0;

}

if(new_y>this.offsetHeight-mask.offsetHeight){

new_y=this.offsetHeight-mask.offsetHeight;

}elseif(new_y<0){

new_y=0;

}

mask.style.left=new_x+'px';

mask.style.top=new_y+'px';

//大盒子的运动像素,应该按照小盒子运动的一定比例来运动。

//公式:遮挡层移动距离/最大移动距离=大图片移动距离/最大移动距离

//所以:大图片移动距离=遮挡层移动距离*大图片最大移动距离/遮挡层的最大移动距离。

varbigImg=document.querySelector('.bigImg');

varbig=document.querySelector('.big');

//遮罩层最大移动距离x

varmaskMax_x=this.offsetWidth-mask.offsetWidth;

//大图片最大移动距离x

varbigMax_x=bigImg.offsetWidth-big.offsetWidth;

//大图片的移动距离x

varbigX=new_x*bigMax_x/maskMax_x;

//遮罩层最大移动距离y

varmaskMax_y=this.offsetHeight-mask.offsetHeight;

//大图片最大移动距离y

varbigMax_y=bigImg.offsetHeight-big.offsetHeight;

//大图片的移动距离y

varbigY=new_y*bigMax_y/maskMax_y;

bigImg.style.left=-bigX+'px';

bigImg.style.top=-bigY+'px';

});

preview.addEventListener('mouseover',function(){

big.style.display='block';

mask.style.display='block';

});

preview.addEventListener('mouseout',function(){

big.style.display='none';

mask.style.display='none';

});

</script>

</body>

</html>

上一篇:基于JavaScript实现报警器提示音 下一篇:js实现淘宝固定侧边栏
发布日期:2022/7/3
手机扫二维码直达本页
发布时间:22:10:39
点击:85
录入:壹家怡园
相关文章
Baidu

YiJiaCMS 6.3.1.220701(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
Copyright©2000-2022