摘要:本篇教程介绍了JavaScript进阶学习之图片操作5,希望阅读本篇文章以后大家有所收获,帮助大家对JavaScript的理解更加深入。
本篇教程介绍了JavaScript进阶学习之图片操作5,希望阅读本篇文章以后大家有所收获,帮助大家对JavaScript的理解更加深入。
<
本次的图片操作是要实现模仿天猫淘宝的放大镜效果,如下图所示:
技术分享图片
其实现原理其实很简单,主要就是定位的运用,在上面的图中,左边是一个div,它的大小就是左边图片的大小,我们称为左窗口(原图),红色部分我们称为放大镜,右边也是一个div,我们称为右窗口,在右窗口中有一个大图,要实现放大效果,就需要保证原图/放大镜 = 大图 / 右窗口 = 放大倍率。当鼠标在左图中移动时,让放大镜跟随鼠标一起移动,然后大图在又窗口中同步运动,这样就可以模拟放大效果了。
首先是基本的结果:
<body>
<div id="box">
<img src="img/small.jpg"/>
<div id="small"></div>
</div>
<div id="big">
<img src="img/big.jpg" id="imgs"/>
</div>
</body>
然后是基本样式:
html,body {
margin: 0;
padding:0;
}
/* 小图 */
#box{
width: 310px;
height: 310px;
position: relative;
float:left;
}
#box img{
width:100%;
height:100%;
}
/* 红色方块 */
#box #small{
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
background: red;
opacity: 0.6;
display: none;
}
/* 放大图的盒子 */
#big{
width: 310px;
height: 310px;
overflow: hidden;
position: relative;
display: none;
float:left;
}
/* 大图 */
#big img{
width: 930px;
height: 930px;
position: absolute;
}
这里为了简单操作,我们将右窗口设置成和原图也就是左窗口同样大小。
通过上面我们知道,大图是右窗口的3倍,所以是放大了3倍,而且放大镜是原图的三分之一。
接下来需要设置在鼠标没有悬浮在左窗口时,放大镜、右窗口和原图是不可见的,只有当鼠标悬浮在左窗口之上时,放大镜、右窗口和原图是可见的。
box.onmouseenter = function(e){
big.style.display=‘block‘;
small.style.display=‘block‘;
}
box.onmouseleave = function(e){
big.style.display=‘none‘;
small.style.display=‘none‘;
}
最后就是监听鼠标事件,实现放大效果了。
box.onmousemove = function(e){
//获取鼠标的x、y坐标。为了让鼠标刚好在small红色小方块的中心,所以需要减去50
var top = e.clientY-50;
var left = e.clientX-50;
//限制small小方块移出box的范围
if(top > 200){top = 200};
if(top < 0){top = 0};
if(left > 200){left = 200};
if(left < 0){left = 0};
//动态设置small小方块的位置,让小方块跟随鼠标移动
small.style.left = left + ‘px‘;
small.style.top = top + ‘px‘;
//让big里面的图片跟随鼠标的移动而移动。这里为什么要乘以(-3)呢?因为big里面的大图是box的3倍。鼠标在box上面向右移动1px,那么big里面的大图就要向左移动(1 x -3)px才能达到我们想要的效果。
img.style.top = top*(-3) + ‘px‘;
img.style.left = left*(-3) + ‘px‘;
}
这样,就可以实现放大镜效果了。
详细代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="box">
<img src="img/small.jpg"/>
<div id="small"></div>
</div>
<div id="big">
<img src="img/big.jpg" id="imgs"/>
</div>
</body>
<script>
var box = document.querySelector(‘#box‘);
var small = document.querySelector(‘#small‘);
var big = document.querySelector(‘#big‘);
var img = document.querySelector(‘#imgs‘);
box.onmousemove = function(e){
var top = e.clientY-50;
var left = e.clientX-50;
if(top > 200){top = 200};
if(top < 0){top = 0};
if(left > 200){left = 200};
if(left < 0){left = 0};
small.style.left = left + ‘px‘;
small.style.top = top + ‘px‘;
img.style.top = top*(-3) + ‘px‘;
img.style.left = left*(-3) + ‘px‘;
}
box.onmouseenter = function(e){
big.style.display=‘block‘;
small.style.display=‘block‘;
}
box.onmouseleave = function(e){
big.style.display=‘none‘;
small.style.display=‘none‘;
}
</script>
</html>
jQuery也可以实现上面的效果,原理是一样,基于鼠标事件和定位,这里就不再详细介绍了,会在代码下载链接中给出详细完整的代码。
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端JavaScript频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号