这篇文章主要为大家详细介绍了JavaScript实现京东放大镜效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

实现效果:

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

实现细节:

 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"> <!--包含详细图和缩略图的盒子-->
 <div>
 <img src="imgs/show.jpg">
 <div></div>
 </div>
 <div>
 <img src="imgs/detail.jpg">
 </div>
 </div>
</body>
</html>

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱安网。

最新资讯
小米生态链企业石头科技科创板上市 雷军:生态很成功

小米生态链企业石头科

北京石头世纪科技股份有限公司科创板正式挂牌交易,股票
石头科技今日科创板上市:打新史上最赚钱的新股来了

石头科技今日科创板上

2月21日,科创板将再迎来一只明星个股,小米生态链下的石
雷军:祝贺石头科技在科创板成功上市!

雷军:祝贺石头科技在科

这是第一家在科创板上市的小米生态链企业。石头科技也
小米生态链企业石头科技科创板上市:开盘暴涨73%

小米生态链企业石头科

今日石头科技(688169)正式登陆科创板,开盘上涨逾73%。石
美国《消费者报告》:Model 3首次跻身首选车型

美国《消费者报告》:Mo

当地时间2月20日,美国消费测评类杂志《消费者报告》公
沃达丰与意大利电信允许竞争对手使用其部分基础设施

沃达丰与意大利电信允

为缓解欧盟对铁塔合并计划的担忧,沃达丰和意大利电信提
最新文章
Vue实现图片与文字混输效果

Vue实现图片与文字混

用多了 JQuery ,习惯了使用JQuery的API操作 DOM ,几乎忘
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

Vue实现点击当前元素

这篇文章主要介绍了Vue实现点击当前元素以外的地方隐
Vue实现验证码功能

Vue实现验证码功能

这篇文章主要为大家详细介绍了Vue实现验证码功能,文中
JS实现的雪花飘落特效示例

JS实现的雪花飘落特效

这篇文章主要介绍了JS实现的雪花飘落特效,结合实例形
微信小程序实现图片压缩

微信小程序实现图片压

这篇文章主要为大家详细介绍了微信小程序实现图片压缩
JavaScript实现京东放大镜效果

JavaScript实现京东放

这篇文章主要为大家详细介绍了JavaScript实现京东放大
比特棋牌
    <samp id="cwms4"><ruby id="cwms4"></ruby></samp><wbr id="cwms4"><noscript id="cwms4"></noscript></wbr>
    <kbd id="cwms4"><noscript id="cwms4"></noscript></kbd><bdo id="cwms4"><ruby id="cwms4"></ruby></bdo>

    <ins id="cwms4"></ins>
    <code id="cwms4"></code>
    <kbd id="cwms4"></kbd>
    <ins id="cwms4"></ins>
    <table id="cwms4"></table>
  1. <samp id="cwms4"><ruby id="cwms4"></ruby></samp>

    1. <em id="cwms4"><track id="cwms4"></track></em>
    2. 比特棋牌| 棋牌平台| 网络棋牌| 多多棋牌| 99棋牌| 冠通棋牌| 游艺棋牌| 99棋牌| 天天乐棋牌| 99棋牌|