原生javascript实现图片放大镜效果
当我们在电商网站上购买商品时，经常会看到这样一种效果，当我们把鼠标放到我们浏览的商品图片上时，会出现类似放大镜一样的一定区域的放大效果，方便消费者观察商品。今天我对这一技术，进行简单实现，实现图片放大镜效果。
我在代码中进行了代码编写的思路的说明和详细的代码注释，方便读者，请看代码：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0px; padding:0px;}
.small-box {
width:300px;
height:300px;
margin-left:100px;
margin-top:100px;
border:1px #ccc solid;
cursor:move;
float:left;
position:relative;
}
.small-box img {
width:300px;
height:300px;
}
.tool {
width:150px;
height:150px;
background-color:gold;
opacity:0.6;
filter:alpha(opacity=60);
position:absolute;
left:0px;
top:0px;
display:none;
}
.tool.active {
display:block;
}
.big-box {
width:300px;
height:300px;
border:1px #ccc solid;
overflow:hidden;
float:left;
margin-top:100px;
position:relative;
display:none;
}
.big-box.active {
display:block;
}
.big-box img {
width:600px;
height:600px;
position:absolute;
}
</style>
</head>
<body>
<div class="small-box" id="smallBox">
<img src="img1.jpg"/>
<div class="tool" id="tool"></div>
</div>
<div class="big-box" id="bigBox">
<img src="img1.jpg" id="bigImg" />
</div>
<script>
/*
第一步：当页面加载完后，获取所要操作的节点对象。
第二步：为smallBox添加一个鼠标浮动事件
当鼠标浮动到smallBox可视区域的时候，显示出小黄盒子tool
和右边的大盒子（小黄盒子的放大版）bigBox
添加active 为smallBox添加一个鼠标离开事件
隐藏小黄盒子和右边的大盒子
去掉active 第三步：为smallBox添加一个鼠标移动事件
小黄盒子tool要跟着鼠标的坐标移动
右边的大盒子里的图片也跟着指定的比例移动
*/
var smallBox = document.getElementById("smallBox");//小盒子
var tool = document.getElementById("tool");//小盒子中的黄色区域
var bigBox = document.getElementById("bigBox");//大盒子
var bigImg = document.getElementById("bigImg");//放大的图片
//鼠标进入小盒子区域内，显示黄色区域和大盒子
smallBox.onmouseenter = function(){
tool.className = "tool active";
bigBox.className = "big-box active";
}
//鼠标离开小盒子区域，不显示黄色区域和大盒子
smallBox.onmouseleave = function(){
tool.className = "tool";
bigBox.className = "big-box";
}
//鼠标在小盒子内移动
smallBox.onmousemove = function(e){
var _e = window.event||e;//事件对象
var x = _e.clientX-this.offsetLeft-tool.offsetWidth/2;//事件对象在小盒子内的横向偏移量
var y = _e.clientY-this.offsetTop-tool.offsetHeight/2;//竖向偏移量
if(x<0){
x = 0;//当左偏移出小盒子时，设为0
}
if(y<0){
y = 0;//当上偏移出小盒子时，设为0
}
if(x>this.offsetWidth-tool.offsetWidth){
x = this.offsetWidth-tool.offsetWidth;//当右偏移出小盒子时，设为小盒子的宽度-黄色放大区域宽度
}
if(y>this.offsetHeight-tool.offsetHeight){
y = this.offsetHeight-tool.offsetHeight;//当下偏移出小盒子时，设为小盒子的高度-黄色放大区域高度
}
tool.style.left = x + "px";//黄色放大区域距离小盒子左偏距
tool.style.top = y + "px";//黄色放大区域距离小盒子上偏距
bigImg.style.left = -x*2 + "px";//放大图片移动方向相反，偏移距离加倍
bigImg.style.top = -y*2 + "px";
}
</script>
</body>
</html>
这里，我并没有对代码中css样式，JavaScript行为进行和html结构的分离，方便读者阅读和运行。
有读者可能考虑，获取事件对象的偏移距离时直接使用offsetX和offsetY属性，省去了计算，但是笔者在试验时，出现了异常，黄色放大区域并不能稳定的随着鼠标进行移动，笔者认为，当时用offsetX和offsetY时，执行onmousemove会不断地出发onmouseover，而onmouseover会产生事件传播，从而导致在获取offsetX时出现异常。最终，笔者采用上述代码中的方法，能够出现稳定的效果。读者可以自行运行代码，查看效果。这里附上笔者的效果图：
原生javascript实现图片放大镜效果的更多相关文章
- javascript图片放大镜效果展示
javascript图片放大镜效果展示 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...
- Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果
Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...
- 原生js实现的放大镜效果
这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html&g ...
- 【Demo】jQuery 图片放大镜效果——模仿淘宝图片放大效果
实现功能: 模仿淘宝图片放大效果,鼠标移动到小图片的某一处,放大镜对应显示大图片的相应位置. 实现效果: 实现代码: <!DOCTYPE html> <html> <he ...
- WPF设置VistualBrush的Visual属性制作图片放大镜效果
原文:WPF设置VistualBrush的Visual属性制作图片放大镜效果 效果图片:原理:设置VistualBrush的Visual属性,利用它的Viewbox属性进行缩放. XAML代码:// ...
- javascript 实现图片放大镜功能
淘宝上经常用到的一个功能是利用图片的放大镜功能来查看商品的细节 下面我们来实现这样一个功能吧,原理很简单: 实现一个可以随鼠标移动的虚框 在另外一个块中对应显示虚框中的内容 实现思路: 虚框用css中 ...
- jQuery实现图片放大镜效果
实现图片放大镜的原理: 给放大镜元素一个对应的html元素为<div class='right'> 设置这个div的宽高固定为某个值(350px,350px) 设置div的css为超出部分 ...
- javascript html 鼠标放大镜效果
1.鼠标放大镜效果 鼠标放大镜效果,将鼠标移入到左图片,则可以在其右边看到放大的图片,且鼠标移动滑块的大小即为右图显示图片.实际效果如下图所示: <!DOCTYPE html> < ...
- 原生JS实现图片放大镜插件
前 言 我们大家经常逛各种电商类的网站,商品的细节就需要用到放大镜,这个大家一定不陌生,今天我们就做一个图片放大镜的插件,来看看图片是如何被放大的…… 先看一下我们要是实现的最终效果是怎么样的 ...
随机推荐
- 套接字和域名系统DNS
套接字产生的原因: 当应用进程通过传输层进行通信时 ,TCP和 UDP将面临同时为多个应用进程提供并行通信的问题.多个TCP连接或多个应用程序进程可能需要通过同一个TCP协议端口传输数据. 为了区别每 ...
- Codeforces Round #364 (Div. 2) E. Connecting Universities (DFS)
E. Connecting Universities time limit per test 3 seconds memory limit per test 256 megabytes input s ...
- 打开地图文件和shape文件代码加载Mxd文档
代码加载Mxd文档 用代码添加Mxd文档,用到AxMapControl.LoadMxFile(sFilePath),我们只要将Mxd文档的路径传给这个方法即可 /// <summary> ...
- EF 报【序列包含一个以上的元素】解决办法
1.检查模型是否存在重复的字段,eg: public class AggregateRoot { public System.Guid Guid { get; set; } } public part ...
- nginx keepalived 主从切换
注: LVS + Keepalived 不知道为什么出现一个很郁闷的问题....... ------------------------------------------------------ ...
- Sping--Id, Name
bean, id/name 都可以 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=& ...
- 【python】matplotlib在windows下安装
昨晚装了好久的这玩意,终于在凌晨成功搞定,然后跑起了一个人人网抓取好友关系的脚本~开心. 以下是我参考的最给力的文档,全部安装一遍,就可以啦~ 但是!在安装前一定要先确认自己的python版本!本人自 ...
- css 弹出框
最近想弄一个类似登陆框的那种弹出框,其实网上已经有很多例子,而且也有相应的插件,例如:jquery-ui的,可直接使用,而我就简单的弄了个简易版的登陆框,真的很简易. 其实原理就是设置两个div,一个 ...
- Laravel 使用简述
开始使用laravel 在此之前我们需要修改一些配置: app/config/app.php 文件中的 debug 选项设置为 true (注:开启开发模式,更友好的开发提示:网站运行时则关闭): a ...
- 对AD域进行定期自动备份设置图解
今天为大家讲解一下,如何对域进行定期的备份,因为如果域出问题了,在公司里那可就不好玩了啊,对做定期备份,在域出问题的时候可以及时恢复,减少对域重建而浪费大量的时间,同样也耽误公司员工的工作,这样的事情 ...