html+css3实现放大镜效果 （2021-08-25）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html+css3实现放大镜效果 （2021-08-25）相关的知识，希望对你有一定的参考价值。
参考技术A 1、给body添加背景图，在body中添加一个父盒子（父盒子开启绝对定位），父盒子中再添加一个子盒子。2、给window添加鼠标移动事件，根据鼠标在浏览器中的坐标（clientX和clientY）修改父盒子的top和left，以达到移动镜面的效果。
3、给子盒子添加背景图（和body背景图一致），在window的鼠标移动事件中修改子盒子的样式——background-position，改变子盒子中的背景图在盒子中的显示位置，使背景图的显示与body一致。
4、再给子盒子添加缩放（transform:scale(2)），即可实现放大功能。
1、由于背景图无法设置透明度，所以使用body的伪元素，给伪元素添加背景图和opacity属性。
2、这时虽然给背景设置上了透明的，但却是发白的那种透明，要想变成暗沉的透明，只需要给body添加背景颜色就行。
3、background-position的使用，由于是要将背景的选中位置移动到盒子的中心，所以使用的是负值。
<!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>
<style>
body
padding: 0;
background-color: #000;
margin: 0;
body::after
display: block;
position: absolute;
top: 0;
left: 0;
content: '';
width: 100%;
height: 100%;
background-image: url('伊芙琳.jpg');
background-position: 0px 0px;
background-size: 100% auto;
opacity: 0.1;
.magnifier
width: 300px;
height: 300px;
background-image: url('伊芙琳.jpg');
background-size: 1730px auto;
background-position: 0px 0px;
transform: scale(2);
margin: 0;
position: relative;
z-index: 100;
.main
width: 300px;
height: 300px;
border-radius: 50%;
overflow: hidden;
position: absolute;
</style>
</head>
<body>
<div class="main">
<div class="magnifier"></div>
</div>
<script>
let flag = true
let magnifier = document.getElementsByClassName('magnifier')[0]
let main = document.getElementsByClassName('main')[0]
let boxLeft = 0
let boxTop = 0
window.onmousemove = (event) =>
if(!flag) return
setTimeout( ()=>
flag = true
,50)
console.log(event.clientX, event.clientY);
if(event.clientX > 1590)
event.clientX = 1590
boxLeft = event.clientX > 1590 ? '1440px' : event.clientX > 150 ? event.clientX - 150 + 'px':'0px'
boxTop = event.clientY > 720 ? '575px' : event.clientY > 150 ? event.clientY - 150 + 'px':'0px'
main.style.left = boxLeft
main.style.top = boxTop
// magnifier.style.backgroundPosition = '830px 570px'
magnifier.style.backgroundPosition = '-' + boxLeft + ' ' + '-' + boxTop
flag = false
</script>
</body>
</html>
图片放大镜效果
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>图片放大镜效果</title> 6 <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" media="all"/> 7 <link rel="stylesheet" type="text/css" href="../css/bootstrap-theme.min.css" media="all"/> 8 <link rel="stylesheet" type="text/css" href="../css/reset.css" media="all"/> 9 <style type="text/css"> 10 .demo{ width:350px;margin:30px auto; text-align:left; padding:0; } 11 #div{border:1px solid #ccc; position:relative; } 12 #div .small_pic{ width:350px; height:350px; background:#eee; position:relative; } 13 #div .float_layer{ width:100px; height:100px; border:1px solid #000; background:#fff; filter:alpha(opacity:30); opacity:0.3; position:absolute; top:0; left:0; display:none; } 14 #div .mark{ width:100%; height:100%; position:absolute; z-index:2; left:0px; top:0px; background:red; filter:alpha(opacity:0); opacity:0; } 15 #div .big_pic{ position:absolute; top:-1px; left:360px; width:250px; height:250px; overflow:hidden; border:2px solid #CCC; display:none; } 16 #div .big_pic img{ position:absolute; top:-30px; left:-80px; } 17 </style> 18 </head> 19 <body> 20 <div id="div" class="demo"> 21 <div class="small_pic"> 22 <span class="mark"></span> 23 <span class="float_layer"></span> 24 <img src="images/small.jpg" alt="放大镜图片一"/> 25 </div> 26 27 <div class="big_pic"> 28 <img src="images/big.jpg" alt="放大镜图片二"/> 29 </div> 30 </div> 31 <script> 32 (function(){ 33 var div = document.getElementById(\'div\'); 34 var small = getByCls(div, \'small_pic\')[0]; 35 var big = getByCls(div, \'big_pic\')[0]; 36 var img = big.getElementsByTagName(\'img\')[0]; 37 var mark = small.getElementsByTagName(\'span\')[0]; 38 var layer = small.getElementsByTagName(\'span\')[1]; 39 small.onmousemove = function(e){ 40 e = e || event; 41 this.style.cursor = \'move\'; 42 layer.style.display = big.style.display = \'block\'; 43 var t = e.clientY - div.offsetTop - layer.clientHeight/2; 44 var l = e.clientX - div.offsetLeft - layer.clientWidth/2; 45 if(t < 0){ 46 t = 0; 47 } else if(t > div.clientHeight - layer.clientHeight){ 48 t = div.clientHeight - layer.clientHeight; 49 } 50 if(l < 0){ 51 l = 0; 52 } else if(l > div.clientWidth - layer.clientWidth){ 53 l = div.clientWidth - layer.clientWidth; 54 } 55 var scaleX = l / (div.clientHeight - layer.clientHeight); 56 var scaleY = t / (div.clientWidth - layer.clientWidth); 57 layer.style.top = t + \'px\'; 58 layer.style.left = l + \'px\'; 59 img.style.left = -scaleX * (img.clientWidth - big.clientWidth) + \'px\'; 60 img.style.top = -scaleY * (img.clientHeight - big.clientHeight) + \'px\'; 61 } 62 small.onmouseout = function(e){ 63 layer.style.display = big.style.display = \'none\'; 64 } 65 function getByCls(obj, cls){ 66 if(obj.getElementsByClassName){ 67 return obj.getElementsByClassName(cls); 68 } else { 69 var res = [], 70 reg = new RegExp(\'^|\\\\s+\' + cls + \'\\\\s+|$\'), 71 all = obj.all; 72 for(var i = 0; i < all.length; i++){ 73 if(reg.test(all[i].className)){ 74 res.push(all[i]); 75 } 76 } 77 return res; 78 } 79 } 80 }()); 81 </script> 82 </body> 83 </html>
以上是关于html+css3实现放大镜效果 （2021-08-25）的主要内容，如果未能解决你的问题，请参考以下文章