放大镜特效 html+css+js

效果：

前言：

思路是看up主xiao-high的，然后自己也弄了一个。效果有一个缺点就是图片边缘区域放大不了。

实现：

定义标签：.frame是底层盒子，img是小图片，宽设置100%，跟底层盒子一样。.circle是放大镜，.circle里的img是放在.circle里的大图片。

 <div class="frame"><img src="25.jpg" width="100%"><div class="circle"><img src="25.jpg"></div>
</div>

底层盒子样式：高就不设置了，让小图片把盒子撑开。因为宽是800px，所以放的图片本身宽像素大过800才行，最好是那种电脑壁纸，够大够清晰。

 .frame{width: 800px;min-height: 200px;position: relative;}

设置放大镜样式，设置绝对定位。

 .circle{position: absolute;top: 0;left: 0;width: 200px;height: 200px;border: 5px solid rgb(0, 0, 0);box-shadow: 0 0 5px rgb(0,0,0);border-radius: 50%;overflow: hidden;cursor:pointer;opacity: 0;}.frame:hover .circle{opacity: 1;}

border: 5px solid rgb(0, 0, 0); 黑色边框。
box-shadow: 0 0 5px rgb(0,0,0); 阴影。
border-radius: 50%; 角的弧度。
cursor:pointer; 鼠标经过样式为小手。
opacity: 0; 透明度为0，鼠标经过为1。

放大镜里的图片样式，不设置宽高了，让它原本大小就好：

 .circle img{position: absolute;top: 0;left: 0;}

js部分，注释也在里面了：

<script>/*  先获取元素，底层盒子，放大镜，放大镜里的大图 */var frame = document.querySelector('.frame');var circle = document.querySelector('.circle');var picture = document.querySelector('.circle img');/*  给底层盒子绑定一个鼠标移动的事件 */frame.addEventListener('mousemove',function(e){/*  放大镜左右移动 *//*  获取鼠标距离左边距离 */let x = e.clientX;/*  获取底层盒子距离左边距离 */let left = frame.offsetLeft;/*  放大镜左右移动距离就是 x 减 left 再减去本身宽度一半 */let moveX = x - left - circle.offsetWidth/2; /*  如果是移动距离是负数就等于零。相当于放大镜在底层盒子最左边时，不要让他跑出去 */if(moveX<=0)      moveX=0;  /* 以此类推，相当于放大镜在底层盒子最右边时，不要让他跑出去 */if(moveX>=frame.offsetWidth - circle.offsetWidth )   moveX= frame.offsetWidth - circle.offsetWidth ;/* 放大镜移动 */circle.style.left = moveX + 'px'; /* 放大镜里大图片移动距离。就是按比例算，鼠标移动距离/小图宽度=大图移动距离/大图宽度  可以想象一下这个比例。*/let moveleft = ( moveX + circle.offsetWidth/2 ) / frame.offsetWidth * picture.offsetWidth - circle.offsetWidth/2;/* 大图移动，向左移动，所以是负数 */picture.style.left = -moveleft + 'px'; /* 放大镜上下移动，跟上面左右移动是一样的原理 */let y = e.clientY;let top = frame.offsetTop;let moveY = y - top - circle.offsetHeight/2;if(moveY<=0)moveY=0;  if(moveY>=frame.offsetHeight - circle.offsetHeight )moveY= frame.offsetHeight - circle.offsetHeight ;circle.style.top = moveY + 'px'; let movetop = ( moveY + circle.offsetHeight/2 ) / frame.offsetHeight * picture.offsetHeight - circle.offsetHeight/2;picture.style.top = -movetop + 'px';})</script>

完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;box-sizing:border-box;}body{height: 100vh;display: flex;justify-content: center;align-items: center;}.frame{width: 800px;min-height: 200px;position: relative;}.frame:hover .circle{opacity: 1;}.circle{position: absolute;top: 0;left: 0;width: 200px;height: 200px;border: 5px solid rgb(0, 0, 0);box-shadow: 0 0 5px rgb(0,0,0);border-radius: 50%;overflow: hidden;cursor:pointer;opacity: 0;}.circle img{position: absolute;top: 0;left: 0;}</style>
</head>
<body><div class="frame"><img src="25.jpg" width="100%"><div class="circle"><img src="25.jpg"></div>
</div>   <script>var frame = document.querySelector('.frame');var circle = document.querySelector('.circle');var picture = document.querySelector('.circle img');frame.addEventListener('mousemove',function(e){/*  左右 */let x = e.clientX;let left = frame.offsetLeft;let moveX = x - left - circle.offsetWidth/2; if(moveX<=0)      moveX=0;  if(moveX>=frame.offsetWidth - circle.offsetWidth )   moveX= frame.offsetWidth - circle.offsetWidth ;circle.style.left = moveX + 'px'; let moveleft = ( moveX + circle.offsetWidth/2 ) / frame.offsetWidth * picture.offsetWidth - circle.offsetWidth/2;picture.style.left = -moveleft + 'px'; /* 上下 */let y = e.clientY;let top = frame.offsetTop;let moveY = y - top - circle.offsetHeight/2;if(moveY<=0)moveY=0;  if(moveY>=frame.offsetHeight - circle.offsetHeight )moveY= frame.offsetHeight - circle.offsetHeight ;circle.style.top = moveY + 'px'; let movetop = ( moveY + circle.offsetHeight/2 ) / frame.offsetHeight * picture.offsetHeight - circle.offsetHeight/2;picture.style.top = -movetop + 'px';})</script>
</body>
</html>

最后：

其它文章~：
简约时钟特效 html+css+js
赛博朋克风格按钮 html+css
响应式卡片悬停效果 html+css
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
炫彩流光按钮 html+css
记一些css属性总结（一）
Sass总结笔记
…等等

最后：

Bye~

放大镜特效 html+css+js相关推荐

小方块上升组成背景特效 html+css+js
一.先看效果: 1024程序员节发篇文章拿个个徽章,嘿嘿 (^▽ ^ ) . 二.详细实现(后面有完整代码): 1.先定义html标签,.container就是底层大盒子,.item就是一个小方块,后 ...
HTML5七夕情人节表白网页(情人节满屏爱心HTML5特效) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码
HTML5七夕情人节表白网页❤情人节满屏爱心HTML5特效❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱 ...
X特效 html+css+js
效果(源码在后面): X特效[html+css+js]源码实现: 1. 定义标签,main是底层盒子,video是背景视频,.cover是X: <main><video src=& ...
轮播图特效 html+css+js
先看效果: 轮播图做法有很多,效果也有很多.下面是一种简单的两边图片模糊,中间图片放大的轮播图效果.鼠标点击左边或右边的图片后,它们会移动到中间并变大,其它图片移动到到两边并模糊. 点击最右边图片: ...
简约时钟特效 html+css+js
一. 先看效果(实时显示当前时间): 二. 实现(最后面有完整代码): 1. 定义盒子,.clock是整个钟,.hour是时针,min是分针,sec是秒针. <div class="c ...
网页随处点击出现小火花简约特效 html+css+js
先看效果,效果是比较简约的: 原理: 效果就是在网页的任何地方鼠标点击后都出现一个小火花~原理并不复杂,就是鼠标点击后生成一个盒子,盒子里放字体图标或文字,然后操控它们的属性变化,最后再让它们消失就好 ...
有趣的HTML实例（十五）注册登录界面（css+js）
我并不是每次吃完饭就看电视,有时我边吃边看电视,生活中有些改变会增加乐趣. --<加菲猫> 目录一.前言二.往期作品回顾三.作品介绍四.本期代码介绍五.效果显示六.编码实现 i ...
文字折叠特效 html+css
效果: 实现: 1. 定义标签: <h1>aurora</h1> 2. 设置文字基本样式: h1{text-transform: uppercase;letter-spacin ...
SVG绘制文字特效 html+css
效果(源码在最后): 实现: 定义基本标签,main是底层盒子,text是文本,SVG标签用法看这里: <main><svg width="500" height ...

放大镜特效 html+css+js

效果：

前言：

实现：

完整代码：

最后：

放大镜特效 html+css+js相关推荐

最新文章

热门文章