放大镜特效 html+css+js
【摘要】 效果：
前言：
思路是看up主xiao-high的，然后自己也弄了一个。效果有一个缺点就是图片边缘区域放大不了。
实现：
定义标签：.frame是底层盒子，img是小图片，宽设置100%，跟底层盒子一样。.circle是放大镜，.circle里的img是放在.circle里的大图片。
<div class="frame"> <img src="25.jp...
效果：
前言：
思路是看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>
- 1
- 2
- 3
- 4
- 5
- 6
- 底层盒子样式：高就不设置了，让小图片把盒子撑开。因为宽是800px，所以放的图片本身宽像素大过800才行，最好是那种电脑壁纸，够大够清晰。
.frame{ width: 800px; min-height: 200px; position: relative; }
- 1
- 2
- 3
- 4
- 5
- 设置放大镜样式，设置绝对定位。
.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; }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
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; }
- 1
- 2
- 3
- 4
- 5
- 6
- 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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
完整代码：
<!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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
最后：
其它文章~：
简约时钟特效 html+css+js
赛博朋克风格按钮 html+css
响应式卡片悬停效果 html+css
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
炫彩流光按钮 html+css
记一些css属性总结（一）
Sass总结笔记
…等等
最后：
Bye~
文章来源: blog.csdn.net，作者：北极光之夜。，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/luo1831251387/article/details/113603911
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）