京东放大镜效果：鼠标移动查看图片放大细节

要求：鼠标放上去之后，能够在旁边出现一个放大的大图片

1，先写两个盒子，都设置为隐藏

在大盒子里添加一个小盒子，并设置半透明

.mask{position: absolute;left: 0;top: 0;height: 200px;width: 200px;background-color: #FEDE4F;/* 半透明 */opacity: 0.5;/* 鼠标经过箭头变成十字形状 */cursor: move;
}

在旁边建一个大盒子用于显示放大的效果，并且设置显示在最上层

.big{position: absolute;left: 410px;top: 0;width: 500px;height: 500px;background-color: pink;overflow: hidden;/* 设置显示最上层 */z-index: 999;}

两个盒子先都设置为隐藏，等鼠标经过触发了事件再显示出来

.mask和.big里面都设置

display: none;

2.写js代码，鼠标经过两个盒子都显示出来

// 先把页面加载完再加载js。window.addEventListenerwindow.addEventListener('load',function(){var preview = document.querySelector('.preview');var mask = document.querySelector('.mask');var big = document.querySelector('.big');//鼠标经过两个盒子都显示出来preview.addEventListener('mouseover',function(){mask.style.display='block';big.style.display='block';})//鼠标离开两个盒子都消失preview.addEventListener('mouseout',function(){mask.style.display='none';big.style.display='none';})
//这里填写鼠标移动的效果代码})

3.让黄色的小盒子跟着鼠标移动

把鼠标在图内的坐标给小盒子e.pageX是鼠标在整个浏览器的横坐标this.offsetLeft是装图片盒子距离浏览器左边的位置e.pageX - this.offsetLeft结果为鼠标在盒子内的位置透明盒子移动的范围控制在图片盒子中间

 // 鼠标移动的效果preview.addEventListener('mousemove',function(e){// 鼠标在盒子内的位置,var x=e.pageX-this.offsetLeft;var y=e.pageY-this.offsetTop;// console.log(x,y)// 把坐标赋值个透明遮挡盒子,mask.offsetWidth是遮挡盒子的宽度// 并且把鼠标移到遮挡盒子中间,复制给小盒子坐标var maskX=x - mask.offsetWidth / 2;var maskY=y - mask.offsetHeight / 2;// preview.offsetWidth-mask.offsetWidth是最大移动的范围var maskMax = preview.offsetWidth-mask.offsetWidth;// 进行判断，不让透明盒子超出图片盒子的边界if(maskX<=0){maskX=0;// ，不能超过右边界}else if(maskX>maskMax){maskX=maskMax;}if(maskY<=0){maskY=0;// preview.offsetWidth-mask.offsetWidth是移动的范围，不能超过右边界}else if(maskY>maskMax){maskY=maskMax;}mask.style.left =maskX  + 'px';mask.style.top = maskY + 'px';//大图片移动的距离代码位置})

4.让大盒子显示的图片跟着透明盒子一块移动

    小盒子向右移，大盒子要向左移移动的距离成比例

大图片移动距离=透明层最大移动距离*大图片最大移动距离/透明层移动距离

//大图片移动的距离代码var big_img=document.querySelector('.big_img');// 大图片最大移动距离=大盒子－图片,款和高相同的var big_imgMax=big.offsetWidth-big_img.offsetWidth;//大图片移动距离=透明层移动距离*大图片最大移动距离/  透明层最大移动距离  var bigX=maskX*big_imgMax/maskMax;var bigY=maskY*big_imgMax/maskMax;// 需要先给大盒子加个定位big_img.style.left= -bigX + 'px';big_img.style.top= -bigY + 'px';

欢迎关注公众号：oldCode
期待和你一起进步
公众号后台回复：放大镜效果 获得整个项目文件

京东放大镜效果：鼠标移动查看图片放大细节相关推荐

JavaScript - 京东放大镜效果：鼠标移动查看图片放大细节
效果 JS代码 window.addEventListener('load', function () {//获取元素var small = document.querySelector('.prev ...
JavaScript仿淘宝京东放大镜效果（鼠标事件）------JavaScript学习之路10
JavaScript仿淘宝京东放大镜效果注意一定计算好放大比例,本程序放大5倍,具体放大倍数,自定效果完整源码 <!DOCTYPE html> <html lang=&quo ...
JS案例-仿京东放大镜效果
需要实现的效果图如下: ①布局:布局采用一个大盒子里面首先分为上下两个部分,然后下部分又分为左右两个部分.左边的盒子里面放了一个img和一个遮罩层cover,右边盒子里面放的是800*800的大图片, ...
php 鼠标点击图片放大,css3如何实现鼠标放上图片放大？（附代码）
在css3的学习中,我们会经常做一些小的动画效果,这感觉非常有趣,所以今天的这篇文章将给大家来介绍关于css3实现图片放大的一个效果,有兴趣的小伙伴可以看一下. 我们都知道css3中增加了一个tran ...
php鼠标移过图片放大代码,鼠标移上去，图片会自动原地放大CSS写法
今天在制作一个zblog模板的时候,用上了这个图片放大特效,想到以前也没写过,就分享出来吧! 在我第一次接触这个特效的时候,以为会很复杂,至少会有几行代码才能去实现,但学习后真的精到了! CSS3的t ...
php 鼠标点击图片放大,鼠标移入放大图片预览效果实现
商城项目中,有鼠标移入图片放大的功能,研究一下实现 Image zoom body { display: flex; justify-content: center; align-items: cen ...
css动画实现鼠标经过，图片放大效果
浏览器实现效果: 自己在浏览器实现时当鼠标移上图片有放大效果代码实现: <!DOCTYPE html> <html lang="en"> <head ...
html鼠标移动时图片放大缩小,JS与CSS3实现图片响应鼠标移动放大效果示例
本文实例讲述了JS与CSS3实现图片响应鼠标移动放大效果.分享给大家供大家参考,具体如下: 今天看网易的网站上,当我把鼠标放上去的时候发现图片放大,移开图片缩小,于是自行尝试,结果如下. 方法一:使用 ...
html鼠标滑过图片放大效果
html部分: ###图片src需要自己定义 <!DOCTYPE html> <html><head><meta charset="utf-8&qu ...

京东放大镜效果：鼠标移动查看图片放大细节

京东放大镜效果：鼠标移动查看图片放大细节相关推荐

最新文章

热门文章