JS第一节笔记（14）————JS 放大镜功能的实现

最新推荐文章于 2022-11-17 15:49:21 发布

猿徐

最新推荐文章于 2022-11-17 15:49:21 发布

阅读量155

点赞数

分类专栏： JS 文章标签： js javascript 前端

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

版权

JS 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

在这里插入图片描述
在一些淘宝界面里我们经常看到一些商品详情界面里会出现鼠标悬浮出现放大图的问题，在这里我们需要记住一个放大比列的计算公式：
（大图的宽度-大图盒子宽度）/（盒子的宽度-阴影的宽度）
注意点：在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'
            }
        }
        }
    }