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 相关文章推荐
『jQuery』取指定url格式及分割函数应用
Apr 22 Javascript
三种取消选中单选框radio的方法
Sep 09 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
Jul 05 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
Nov 23 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
jQuery元素选择器实例代码
Feb 06 Javascript
bootstrap suggest下拉框使用详解
Apr 10 Javascript
Jquery-data的三种用法
Apr 18 jQuery
利用Vue v-model实现一个自定义的表单组件
Apr 27 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
vue实现密码显示隐藏切换功能
Feb 23 Javascript
详解js中Array的方法及技巧
Sep 12 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
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
PHP MemCached高级缓存配置图文教程
2010/08/05 PHP
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
详解PHP序列化反序列化的方法
2015/10/27 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
如何判断图片地址是否失效
2007/02/02 Javascript
Use Word to Search for Files
2007/06/15 Javascript
封装了一个js图片轮换效果的函数
2011/09/28 Javascript
JS中prototype关键字的功能介绍及使用示例
2013/07/21 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
2013/12/04 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
jQuery UI设置固定日期选择特效代码分享
2015/08/27 Javascript
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
2019/02/20 Javascript
ES6数组与对象的解构赋值详解
2019/06/14 Javascript
koa2 从入门到精通(小结)
2019/07/23 Javascript
小程序最新获取用户昵称和头像的方法总结
2019/09/23 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
2020/03/17 Javascript
python中实现php的var_dump函数功能
2015/01/21 Python
今天 平安夜 Python 送你一顶圣诞帽 @微信官方
2017/12/25 Python
python实现事件驱动
2018/11/21 Python
Django如何开发简单的查询接口详解
2019/05/17 Python
python fuzzywuzzy模块模糊字符串匹配详细用法
2019/08/29 Python
Python scrapy增量爬取实例及实现过程解析
2019/12/24 Python
python实现人像动漫化的示例代码
2020/05/17 Python
django 数据库返回queryset实现封装为字典
2020/05/19 Python
Python如何实现定时器功能
2020/05/28 Python
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
母亲七十大寿答谢词
2014/01/18 职场文书
团党委领导干部党的群众路线教育实践活动个人对照检查材料思想汇
2014/10/05 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python