JavaScript原生放大镜

效果

上代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>/* 默认样式 *//* *{margin: 0;padding: 0%;} *//* 商品图片框 */.shop{/* 改一下 *//* float:right; */display: flex;position: relative;/* relative影响浮动 */width: 300px;height: 300px;border: 1px solid yellow;background-image: url(../图片1/1.webp);background-size: 100% 100%;/* x,y占比；不满图片重复平铺 */margin-right: 200px;}/* 滑块 */.slider{position: absolute;width: 150px;height: 150px;background-color: red;opacity: .5;/* opacity,元素不透明度，即透明度设置  */display: none;}.mirror{float: left;position: relative;overflow: hidden;width: 400px;height: 400px;border: 1px solid red;/* 隐藏 */display: none;}img{width: 800px;height: 800px;/*  */position: relative;}</style>
<body><div class="shop"><div class="slider"></div></div><div class="mirror"><img src="../图片1/1.webp" alt=""></div>
</body>
<script>// 故意不加;let dShop=document.querySelector(".shop")let dSlider=document.querySelector(".slider")let dMirror=document.querySelector(".mirror")// 用this写法呢 let img=this..// 不知道let img=document.querySelector("img");// 方法1，当鼠标移入dshop触发事件，dslider和dmirror为true// dSlider.style.display="false";//     dMirror.style.display="false";// 没这么写这回事dShop.onmouseenter=function(){dSlider.style.display="block";dMirror.style.display="block";// .style.display="block"显示}// 2.function 鼠标移出dshop时，dslider和dmirror隐藏dShop.onmouseleave=function(){dSlider.style.display="none";dMirror.style.display="none";}//3. dslider要随鼠标移动 dSlider与img等比例移动dShop.onmousemove=function(e){// 用到了thislet x=e.clientX - this.offsetLeft - 75;let y=e.clientY -this.offsetLeft -75;//取75是 slider的一半，为了是鼠标在slider居中// let y=e.clienty - e.offsetTop -75;// 那这里的thi指的是什么呢// 边界处理,150根据sliderx=(x<0)?0:x;x=(x>150)?150:x;y=(y<0)?0:y;y=(y>150)?150:y;dSlider.style.left=x+'px';dSlider.style.top=y+'px';let l1=dSlider.offsetLeft;//到这茫茫然let t1=dSlider.offsetTop;let w1=300;let w2=800;// 想起来了，这些数据是slider在shop里的移动let l2=l1*w2/w1*-1;let t2=t1*w2/w1*-1;img.style.left=l2+'px';img.style.top=t2+'px';//  那么关于放大比例呢}</script>
</html>

JavaScript原生放大镜相关推荐

十六、Javascript实现放大镜效果
@Author:Runsen @Date:2020/6/1 作者介绍:Runsen目前大三下学期,专业化学工程与工艺,大学沉迷日语,Python, Java和一系列数据分析软件.导致翘课严重,专业排名 ...
javascript 原生得到document.Element的方法
今天这里写这个博客的主要目的是记录一下javascript原生的选择dom的集中方法. 1.document.getElementById.这个方法接收1个参数,就是DOM元素的id(区分大小写),这 ...
javascript原生事件句柄、BOM、DOM对象属性方法总结
javascript原生事件句柄.BOM.DOM对象属性方法总结 JS事件句柄事件句柄类型说明 onabort 事件句柄图像加载被中断 onblur 事件句柄元素失去焦点 onfocus 事 ...
JavaScript原生添加移除class的方法
转载自 JavaScript原生添加移除class的方法 1.JavaScript原生移除class方法 window.onload = function () {var stamp = docum ...
基于JavaScript实现放大镜效果
基于JavaScript实现放大镜效果描述:右侧图片必须是左侧图片的倍数大,主要是获取鼠标相对与被触发元素的坐标位置,再通过位置定位实现效果 <!DOCTYPE html> <ht ...
JavaScript原生实现《贪吃蛇》
概述 JavaScript原生实现<贪吃蛇>,每吃掉一个食物,蛇的身体会变长,食物会重新换位置. 详细代码下载:http://www.demodashi.com/demo/10728.h ...
javascript原生事件总结
javascript原生的事件,总结了一下,包括事件流.处理函数.事件对象这几样东西.而在兼容性方面,主要是老牌ie8以及以下和现代浏览器的差异,也就是ie和DOM事件标准的差异. 事件流这个事件流 ...
javascript原生初级到非凡-姜威-专题视频课程
javascript原生初级到非凡-248人已学习课程介绍本套课程是<初级的前端工程师系列课程>中重要的一部课程,课程需要有HTML5+CSS3基础来学习,课程从初级入 ...
javascript 原生类 DOMParser 把字符串格式的HTML文档源码转换成 document DOM对象
文章目录 Intro QA DOMParser 在 console 的使用 cheerio 在 node 项目中的使用 Reference 测试 sum Intro 有一天我在写爬虫. 其实也说不上是 ...

JavaScript原生放大镜

效果

上代码

JavaScript原生放大镜相关推荐

最新文章

热门文章