JavaScript实现京东放大镜效果


Posted in Javascript onDecember 03, 2019

本文实例为大家分享了JavaScript实现京东放大镜展示的具体代码,供大家参考,具体内容如下

实现效果:

1.鼠标放到图片上显示放大镜和详细图,鼠标离开时什么都不显示(效果消失)
2.鼠标一直在放大镜的中间,且放大镜随鼠标移动
3.放大镜不能出缩列图的盒子
4.鼠标放在详细图上详细图消失

JavaScript实现京东放大镜效果

实现细节:

 1.大盒子虽然比详细图的盒子宽度小,但是在逻辑上详细图的盒子属于大盒子
 2.详细图不能使用浮动,因为盒子下面一般会有文字内容
 3.以父盒子来定位详细图的盒子
 4.放大镜鼠标选中为十字形
 5.对图片进行定位才能使图片移动
 6.使用var evt = event || window.event; //兼容性写法
 7.用放大镜顶点在盒子中的位置根据比例找到图片的位置,来显示图片
 8.图片在详细图中的定位为负值

代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>京东放大镜</title>
 <style>
 .box{ /*大盒子虽然比详细图的盒子宽度小,但是在逻辑上详细图的盒子属于大盒子*/
 width: 350px;
 height: 350px;
 position: relative;
 margin: 100px;
 border: 1px solid #aaa;
 }
 .box .detailed{ /*详细图不能使用浮动,因为盒子下面一般会有文字内容*/
 width: 450px;
 height: 450px;
 border: 1px solid #aaa;
 position: absolute;
 overflow: hidden;
 left: 365px; /*以父盒子来定位*/ 
 top: 0;
 /*初始设置为不可见*/
 display: none;
 }
 .box .normal .magnfier{
 width: 150px;
 height: 150px;
 top: 0;
 left: 0;
 position: absolute;
 background-color: rgba(0, 0, 255, 0.2);/*也可以用opacity来设置透明度*/
 cursor: move; /*鼠标选中为十字*/
 display: none; /*初始设为不可见*/
 }
 .detailed img{ /*对图片进行定位使图片移动*/
 position: absolute;
 top: 0;
 left: 0;
 }
 </style>
 <script>
 function $(id){
 return document.getElementById(id);
 }
 window.onload = function(){
 var box = $('box');
 var normal = box.children[0];
 var margnfier = normal.children[1];//获取放大镜的Dom对象,document.getElementsByClassName来获取。
 var detailed = box.children[1];//获得缩略图DOM对象也可以用document.getElementsByClassName('zoom')[0];
 var detailedImg = box.children[1].children[0];
 normal.onmouseover = function(){//不能给box注册onmousever事件,否则快速移到详细图上是详细图也不会消失,
 margnfier.style.display = 'block';
 detailed.style.display = 'block';
 }
 normal.onmouseout = function(){
 margnfier.style.display = 'none';
 detailed.style.display = 'none';
 }
 var x = 0;
 var y = 0;
 //控制zoom放大镜部分在normal里面的移动
 normal.onmousemove = function(event){
 var evt = event || window.event;
 //兼容性写法
 x = evt.clientX - box.offsetLeft - margnfier.offsetWidth / 2;
 y = evt.clientY - box.offsetTop - margnfier.offsetHeight / 2; 
 //判断鼠标是不是溢出了normal的区域,
 if(x < 0){
 x = 0; 
 }else{
 if(x > box.offsetWidth - margnfier.offsetWidth){
 x = box.offsetWidth - margnfier.offsetWidth;
 }
 }
 if(y < 0){
 y = 0;
 }else{
 if(y > box.offsetHeight - margnfier.offsetHeight){
  y = box.offsetHeight - margnfier.offsetHeight;
 }
 }
 margnfier.style.left = x + 'px';
 margnfier.style.top = y + 'px';
 var detailedX = -x * 800 / this.offsetWidth;
 var detailedY = -y * 800 / this.offsetHeight;
 //用放大镜顶点在盒子中的位置根据比例找到图片的位置,来显示图片
 //改变图片位置
 detailedImg.style.left = detailedX + 'px';
 detailedImg.style.top = detailedY + 'px';
 } 
 }
 </script>
</head>
<body>
 <div id="box" class="box"> <!--包含详细图和缩略图的盒子-->
 <div class="normal">
 <img src="imgs/show.jpg" alt="">
 <div class="magnfier"></div>
 </div>
 <div class="detailed">
 <img src="imgs/detail.jpg" alt="">
 </div>
 </div>
</body>
</html>

JavaScript实现京东放大镜效果

更多关于放大镜的效果,请查看专题:《放大镜特效》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
超棒的javascript页面顶部卷动广告效果
Dec 01 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
Jan 24 Javascript
Jquery实现图片左右自动滚动示例
Sep 25 Javascript
分享一则javascript 调试技巧
Jan 02 Javascript
JS定义类的六种方式详解
May 12 Javascript
解决vue 按钮多次点击重复提交数据问题
May 10 Javascript
js监听html页面的上下滚动事件方法
Sep 11 Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 Javascript
axios实现文件上传并获取进度
Mar 25 Javascript
weui中的picker使用js进行动态绑定数据问题
Nov 06 Javascript
微信小程序表单验证WxValidate的使用
Nov 27 Javascript
jQuery HTML css()方法与css类实例详解
May 20 jQuery
微信小程序实现图片压缩
Dec 03 #Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 #Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 #Javascript
浅谈关于vue中scss公用的解决方案
Dec 02 #Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 #Javascript
js实现一款简单踩白块小游戏(曾经很火)
Dec 02 #Javascript
JavaScript 自定义html元素鼠标右键菜单功能
Dec 02 #Javascript
You might like
PHP include_path设置技巧分享
2011/07/03 PHP
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
初识laravel5
2015/03/02 PHP
PHP自定义函数格式化json数据示例
2016/09/14 PHP
JavaScript的parseInt 进制问题
2009/05/07 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
2013/01/06 Javascript
node.js中的fs.utimes方法使用说明
2014/12/15 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
2015/09/05 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
js编写简单的聊天室功能
2017/08/17 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
int在python中的含义以及用法
2019/06/27 Python
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
Pandas时间序列:时期(period)及其算术运算详解
2020/02/25 Python
pytorch使用horovod多gpu训练的实现
2020/09/09 Python
python利用 keyboard 库记录键盘事件
2020/10/16 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
html5 Canvas绘制线条 closePath()实例代码
2012/05/10 HTML / CSS
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
WSDL的操作类型主要有几种
2013/07/19 面试题
自我评价范文分享
2014/01/04 职场文书
教学实习自我评价
2014/01/28 职场文书
旅游专业毕业生自荐书
2014/06/30 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
证婚人致辞精选
2015/07/28 职场文书
Nginx同一个域名配置多个项目的实现方法
2021/03/31 Servers
纯html+css实现Element loading效果
2021/08/02 HTML / CSS
详解redis在微服务领域的贡献
2021/10/16 Redis
MySQL数据库表约束讲解
2022/06/21 MySQL