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 相关文章推荐
JS控制日期显示的小例子
Nov 23 Javascript
setTimeout()与setInterval()方法区别介绍
Dec 24 Javascript
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
jQuery插件开发的五种形态小结
Mar 04 Javascript
js实现每日自动换一张图片的方法
May 04 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
详解JS异步加载的三种方式
Mar 07 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
Mar 30 Javascript
extjs简介_动力节点Java学院整理
Jul 17 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
Oct 09 Javascript
微信小程序实现折叠面板
Jan 31 Javascript
vue移动端实现红包雨效果
Jun 23 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下pdo的mysql事务处理用法实例
2014/12/27 PHP
php实现TCP端口检测的方法
2015/04/01 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
为Plesk PHP7启用Oracle OCI8扩展方法总结
2019/03/29 PHP
php快速导入大量数据的实例方法
2019/09/23 PHP
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
2011/10/22 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
JQuery中$(document)是什么意思有什么作用
2014/07/21 Javascript
javascript中解析四则运算表达式的算法和示例
2014/08/11 Javascript
使用AngularJS实现可伸缩的页面切换的方法
2015/06/19 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
React通过redux-persist持久化数据存储的方法示例
2019/02/14 Javascript
Vue2.x通用编辑组件的封装及应用详解
2019/05/28 Javascript
[02:32]【DOTA2亚洲邀请赛】iceice,梦开始的地方
2017/03/13 DOTA
使用python检测手机QQ在线状态的脚本代码
2013/02/10 Python
Python中列表和元组的相关语句和方法讲解
2015/08/20 Python
python3中dict(字典)的使用方法示例
2017/03/22 Python
Python基于回溯法解决01背包问题实例
2017/12/06 Python
Python语言描述KNN算法与Kd树
2017/12/13 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
Python解析命令行读取参数之argparse模块
2019/07/26 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
opencv3/C++图像像素操作详解
2019/12/10 Python
Pytorch 神经网络—自定义数据集上实现教程
2020/01/07 Python
基于python实现数组格式参数加密计算
2020/04/21 Python
python爬虫中抓取指数的实例讲解
2020/12/01 Python
前后端结合实现amazeUI分页效果
2020/08/21 HTML / CSS
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
秋季开学典礼主持词
2014/03/19 职场文书
党员干部公开承诺书
2014/03/26 职场文书
商务助理求职信范文
2014/04/20 职场文书
爱祖国演讲稿
2014/05/04 职场文书
反四风问题学习心得体会
2016/01/22 职场文书