JS第一节笔记（14）————JS 放大镜功能的实现_js放大镜是哪一章节的内容-CSDN博客

本文链接：https://blog.csdn.net/negel_xu/article/details/108370560

在这里插入图片描述
在一些淘宝界面里我们经常看到一些商品详情界面里会出现鼠标悬浮出现放大图的问题，在这里我们需要记住一个放大比列的计算公式：
（大图的宽度-大图盒子宽度）/（盒子的宽度-阴影的宽度）
注意点：在js中，如：background-color类似中间的—
可以表达为 backgroundColor 驼峰写法

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .boxs{
        top: 0px;
        left: 450px;
    }
</style>
<body>
    <div class='tu' style='width: 313px;height: 418px;position: relative;justify-content: space-between;'>
        <div class='box' style='background-color: rgba(0, 0, 0, 0.5);position: absolute;'></div>
        <img class='tutu' style='width: 400px;height: 400px;' src='./img/sofa.jpg' alt=''>
        <div class='boxs' style='width: 400px;height: 400px; overflow: hidden;position: absolute;'>
            <img class='boxt' style='width: 1600px;height: 1600px;position: absolute;' src='./img/sofa.jpg' alt=''>
        </div>
    </div>
</body>
</html>

var boxx=document.getElementsByClassName('tu')[0]
    var tutu=document.getElementsByClassName('tutu')[0]
    var box=document.getElementsByClassName('box')[0]
    var boxs=document.getElementsByClassName('boxs')[0]
    var boxt=document.getElementsByClassName('boxt')[0]
    boxx.onmousemove=function(event){
    var e=event||window.event
    if(e.clientX+'px'<=400+'px'&&e.clientX+'px'>=0+'px'){
        if(e.clientY+'px'<=400+'px'&&e.clientY+'px'>=0+'px'){
            boxs.style.display='inline-block'
            box.style.width=100+'px'
            box.style.height=100+'px'
            box.style.left=e.clientX-50+'px'
            box.style.top=e.clientY-50+'px'
            boxt.style.left=-e.clientX*3+'px'
            boxt.style.top=-e.clientY*3+'px'
            }
        else{
            boxx.onmouseleave=function(){
                box.style.width=0+'px'
                box.style.height=0+'px'
                boxs.style.display='none'
            }
        }
        }
    }