放大镜效果

放大镜效果_第1张图片
放大镜效果_第2张图片
放大镜效果_第3张图片
放大镜效果_第4张图片

要注意的是:鼠标从左往右,放大镜中为从右往左,所以需要添加负号

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #BOX{
            margin: 100px;
        }
        #orPicture{
            width: 400px;
            height:400px;
            float: left;
        }
        /* .orPicture img{
            width: 166px;
            height: 166px;
        } */
        #shape{
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: rgb(205, 187, 157);
            opacity: 0.4;
            left: 0;
            top: 0;
            display: none;
        }
        #bigPicture{
            width: 400px;
            height: 400px;
            overflow: hidden;
            float: left;
            margin-left: 3px;
            display: none;
            position: relative;
        }
        #bigPicture img{
            width: 960px;
            height: 960px;
            position: absolute;
            top: 0;
            left: 0;
        }
    style>
head>
<body>
    <div id="BOX">

        
        <div id="orPicture">
            <img src="./灰色音乐.jpeg">
            <span id="shape">span>
        div>

        
        <div id="bigPicture">
            <img src="./灰色音乐.jpeg" id="datu">
        div>
    div>
    <script>
        var orPicture = document.getElementById('orPicture')//小图的盒子
        var bigPicture = document.getElementById('bigPicture')//方块
        var shape = document.getElementById('shape')//大图的盒子
        var datu = document.getElementById('datu')//大图        var BOX = document.getElementById('BOX')//大盒子
        //鼠标放到orPicture的时候,透明方块的放大的图片都显示,用onmouseover
        orPicture.onmouseover = function(){
            shape.style.display='block'
            bigPicture.style.display='block'
        }

        orPicture.onmousemove = function(n){
             //获取当前鼠标位置减去盒子离浏览器左侧偏移量减去阴影的宽度的一半
             var x = n.clientX - BOX.offsetLeft-shape.offsetWidth/2
            var y = n.clientY - BOX.offsetTop-shape.offsetHeight/2


            shape.style.left = x+'px'
            shape.style.top = y+'px'

            //大图的移动
            //小图从左往右移动,大图是从右往左移动
            //小图从左往右为加,大图从左往右为减,即一"+",一"-"
            //因为大图是小图的2.4倍,所以小图移动1,大图移动1*2.4
            datu.style.left = -x*2.4+'px';
            datu.style.top = -y*2.4+'px';
        }
        //鼠标移开的失手再次隐藏
        orPicture.onmouseout = function(){
            shape.style.display='none'
            bigPicture.style.display='none'
        }
    script>
body>
html>

你可能感兴趣的:(css,前端)