js实现放大镜效果
原理：
鼠标在小图片上移动时，通过捕捉鼠标在小图片上的位置，定位大图片的相应位置；
放大镜的移动方向和大图片的移动方向：横向和纵向都是相反，才可以保证同步；
需要元素：大图和小图，存放大图和小图的容器，一个放大镜
技术点：
鼠标事件的捕获：onmouseover（进入）、onmouseout（移除）、onmousemove（移动）
clientX、clientY：事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平、垂直坐标
offsetLeft、offsetTop：距离左侧和上部的距离，相对于窗口
offsetWidth、offsetHeight：本身的宽高，包括border
重点、难点：让小图和大图等比例同步移动
关键：小图片的比例和大图片的比例是一样的，放大镜比例和右侧大的容器比例是一样的；他们之间的比例是相同的
<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="data:images/img.jpg" />
<div class="tool" id="tool"></div>
</div>
<div class="big-box" id="bigBox">
<img src="data:images/img-lg.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; //事件对象
//this.offsetLeft小图距离左边的距离
//tool.offsetWidth放大镜的宽度，除以2的话鼠标就位于放大镜的中心了
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"; //放大图片移动方向相反，偏移距离加倍（css样式中，大图div是小图div的2倍，所以乘2）
bigImg.style.top = -y * 2 + "px";
}
</script>
</body>
</html>
js实现放大镜效果的更多相关文章
- 原生js实现放大镜效果
今天做任务的时候,有一个任务就是让实现电商网站常用的放大镜效果,类似于这样的效果,之前并没有做过这种放大镜效果,刚开始的思路是对图片进行裁剪,但是后来发现实在是难以实现,于是求助了万能的谷歌,发现一个 ...
- js之放大镜效果
HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 使用js实现放大镜效果
点击预览放大镜效果,图片比较大,因为需要精细的图片去凸显放大的效果,请耐心 可以通过滑轮控制放大倍数,由于图片太大 如果放大镜没有出现 可刷新一下网页
- JS实现放大镜效果(放大图片)
注意:里边的两张图片(一大一小)可以自己添加,JQ采用jquery-1.11.3.js版,也可自行调换. HTML代码: <!DOCTYPE html> <html> < ...
- jquery+js实现鼠标位移放大镜效果
jQuery实现仿某东商品详情页放大镜效果 用jquery+js实现放大镜效果,效果大概如下图! 效果是不是大家很感兴趣,放大镜查看细节,下边大家可以详细看一看具体是怎么实现的.下边直接看代码! HT ...
- javascript放大镜效果
JS实现放大镜效果 首先我们先设想一下放大镜效果 1.当鼠标进入小盒子的时候,把大图片显示出来 2.当指定移动区域的时候,显示当前放大区域(放大效果) 3.鼠标移除我们让它消失 一.实现页面布局HTM ...
- 用js实现放大镜的效果
第一次发博客,还有点小激动,本人现在正在天津上大学,希望以后从事前端这一行业,学习的时间不长,写博客为了记录自己的学习过程和收获,当然也算是巩固.可能写的东西不会像大牛那样高大上,只是一些基本的内容, ...
- Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果
Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...
- JS 文本输入框放大镜效果
JS 文本输入框放大镜效果 今天下午研究了下 "文本输入框放大镜效果" 当然KISSY官网也有这种组件 请看kissy demo 其实这种效果 对于很多童鞋来说 应该并不陌生!我今 ...
随机推荐
- js的学习
对于 ff的 relatedTarget 及IE的toElement fromElement DOM通过event对象的relatedTarget属性提供了相关元素的信息.这个属性只对于mou ...
- rest-framework组件 之 渲染器与版本
浏览目录 渲染器 版本 渲染器 规定页面显示的效果(无用,了解即可). 局部渲染 只返回json数据. 效果: 看另一种情况: 既返回json数据,又嵌套在html中.注意:容易出bug. 效果如下: ...
- 1.5快速上手OpenCV图像处理
在上一节中,已经完成了OPENCV的配置,在本节接触几个Opencv图像处理相关的程序,看看opencv用简洁的代码能够实现哪些有趣的图像效果. 1.第一个程序:图像显示 #include<op ...
- HttpServletRequest和ServletRequest的区别.RP
问题: 请问HttpServletRequest和ServletRequest的区别? 回答: servlet理论上可以处理多种形式的请求响应形式 http只是其中之一 所以HttpServletRe ...
- 使用Serializable接口进行JAVA的序列化和反序列化
OBJECT STREAMS – SERIALIZATION AND DESERIALIZATION IN JAVA EXAMPLE USING SERIALIZABLE INTERFACE Hite ...
- css 隐藏html元素的方法
1.常见方法 display:none 这个方法的问题是 元素被隐藏了 同时该元素不占位置了,应该也可以说该元素没有高度和宽度了 2.常见方法 visibility: hidden; 这个方法和dis ...
- Docker 的优势
下面我们主要从Docker对业务架构和生产实践的角度来分析. 随着业务规模的逐渐扩大,产品复杂度也随着增加,企业需要解决快速迭代.高可靠和高可用等问题,一个自然的选择是服务化的拆分,把一个单体架构拆分 ...
- java24种设计模式
一.设计模式定义 设计模式(Design Pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结,使用设计模式是为了可重用代码.让代码更容易被他人理解并且保证代码可靠性. ...
- 手机APP测试
注:以下内容来自网络: 一.手机APP测试类型 1.1 接口协议测试 在APP客户端开发设计时,一般服务端会提供相应的接口协议文档,接口协议文档的质量,决定了APP的开发进度.此部分的测试,应首先检测 ...
- 正经学C#_位移与其位移运算符[c#入门经典]
在c#入门经典一书中,最为糟糕的一节就是位移了,完全没有讲明白,也没有说全,似乎只是轻轻点了一下何为位移,带了两次原码和补码,完全不理会是否明白不明白.这一点这本书很差.因为此书说了,在大多数应用开发 ...