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 IFrame 强制刷新代码
Jul 23 Javascript
正负小数点后两位浮点数实现原理及代码
Sep 06 Javascript
jQuery阻止事件冒泡具体实现
Oct 11 Javascript
JSON取值前判断
Dec 23 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
Nov 01 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
Nov 06 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
Nov 22 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
微信小程序 选项卡的简单实例
May 24 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
Dec 25 Javascript
JavaScript指定断点操作实例教程
Sep 18 Javascript
vue在线动态切换主题色方案
Mar 26 Javascript
微信小程序实现图片压缩
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通过COM类调用组件的实现代码
2012/01/11 PHP
带密匙的php加密解密示例分享
2014/01/29 PHP
php单态设计模式(单例模式)实例
2014/11/18 PHP
PHP设计模式之观察者模式实例
2016/02/22 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
php传值方式和ajax的验证功能
2017/03/27 PHP
基于jQuery架构javascript基础体系
2011/01/01 Javascript
jQuery EasyUI API 中文文档 - Panel面板
2011/09/30 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
获取3个数组不重复的值的具体实现
2013/12/30 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
js判断文本框输入的内容是否为数字
2015/12/23 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
原生js实现autocomplete插件
2016/04/14 Javascript
JavaScript的字符串方法汇总
2016/07/31 Javascript
Zabbix添加Node.js监控的方法
2016/10/20 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
关于微信小程序map组件z-index的层级问题分析
2019/07/09 Javascript
jquery分页优化操作实例分析
2019/08/23 jQuery
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
[41:17]VG vs Optic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
快速入手Python字符编码
2016/08/03 Python
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
python中将正则过滤的内容输出写入到文件中的实例
2018/10/21 Python
python暴力解压rar加密文件过程详解
2019/07/05 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
PyTorch中permute的用法详解
2019/12/30 Python
Django Path转换器自定义及正则代码实例
2020/05/29 Python
html5拖拽应用记录及注意点
2020/05/27 HTML / CSS
贝尔帐篷精品店:Bell Tent Boutique
2019/06/12 全球购物
积极向上的团队口号
2014/06/06 职场文书
教师民族团结演讲稿
2014/08/27 职场文书
家长意见和建议怎么写
2015/06/04 职场文书