特效-Javascript实现购物页面图片放大效果

时间：03-25来源：作者：点击数：
实现效果
实现代码:
<!DOCTYPE html>
<html>
<head>
    <title>购物图片放大</title>
    <meta charset="utf-8">
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            margin: 100px;
            border: 1px solid #ccc;
            position: relative;
        }
        .big{
            width: 400px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 360px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: none;
        }
        .mask{
            width: 80px;
            height: 80px;
            background-color: rgba(3,12,60,0.4);
            position: absolute;
            top: 0;
            left: 0;
            cursor: move;
            display: none;
        }
        .small{
            position: relative;
        }
        .small img{
            width: 200px;
            height: 200px;
        }
        .big img{
            height: 1000px;
            width: 1000px;
        }
        img{
            vertical-align: top;
        }
    </style>
</head>
<body>
<!-- 大图片宽度/big框宽度 = small框宽度/mask框宽度，并且小照片宽度 = small框宽度，如BigImg = 1000， SmallImg = small = 200，big=400，那么mask = 80 -->
<div class="box">
    <div class="small">
        <img src="./resident.jpg" alt="small Image">
        <div class="mask"></div>
    </div>
    <div class="big">
        <img src="./resident.jpg" alt="Big Image">
    </div>
</div>
 
<script type="text/javascript">
    window.onload = function(){
        // 鼠标放到小盒子上时，大盒子图片同等比例移动
        //技术点：onmouseenter==onmouseover 第一个不冒泡
        //技术点：onmouseleave==onmouseout  第一个不冒泡
        //步骤：
        //1.鼠标放上去显示盒子，移开隐藏盒子
        //2.mask跟随移动
        //3.右侧的大图片，等比例移动
 
        var box = document.getElementsByClassName("box")[0];
        var small = box.firstElementChild || box.firstChild;
        var big = box.children[1];
        var mask = small.children[1];
        var bigImg = big.children[0];
 
        // 1.鼠标放上去显示盒子，移开隐藏盒子（为小盒子绑定事件）
 
        // 调用封装好的方法，显示元素
        small.onmouseenter = function(){
            show(mask);
            show(big);
        }
        // 调用封装好的方法，隐藏元素
        small.onmouseleave = function(){
            hide(mask);
            hide(big);
        }
 
        // 2. mask跟随鼠标移动
        // 绑定事件是onmousemove，事件源是small，只要在小盒子上移动1px，mask也要跟随移动
        small.onmousemove = function(event){
            // 想移动mask，需要知道鼠标在small中的位置，x作为mask的left值，y作为mask的top值
            event = event || window.event;
            // 获取鼠标在整个页面的位置
            var pagex = event.pageX || scroll().left + event.clientX;
            var pagey = event.pageY || scroll().top + event.clientY;
            // 让鼠标在mask的最中间，减去mask宽高的一半，x、y为mask的坐标
            // console.log(pagex + " " + pagey);
            var x = pagex - box.offsetLeft - mask.offsetWidth/2;
            var y = pagey - box.offsetTop - mask.offsetHeight/2;
            // 限制mask的范围，left取值大于0，小于小盒子的宽减mask的宽
            if(x<0){
                x = 0;
            }
            if(x>small.offsetWidth - mask.offsetWidth){
                x = small.offsetWidth - mask.offsetWidth;
            }
            if(y<0){
                y = 0;
            }
            if(y>small.offsetHeight - mask.offsetHeight){
                y = small.offsetHeight - mask.offsetHeight;
            }
            // 移动mask
            // console.log("x:" + x + " y:" + y);
            mask.style.left = x + "px";
            mask.style.top = y + "px";
 
            //3.右侧的大图片，等比例移动
            // 大图片/大盒子 = 小图片/mask盒子
            // 大图片走的距离/mask走的距离 = （大图片-大盒子）/（小图片-mask）
            //比例var times = (bigImg.offsetWidth-big.offsetWidth)/(small.offsetWidth-mask.offsetWidth);
            //大图片走的距离/mask盒子走的距离 = 大图片/小图片
            var times = bigImg.offsetWidth/small.offsetWidth;
            var _x = x * times;
            var _y = y * times;
 
            bigImg.style.marginLeft = -_x + "px";
            bigImg.style.marginTop = -_y + "px";
        }
    }
    // 显示隐藏元素
    function show(element){
        element.style.display = "block";
    }
    function hide(element){
        element.style.display = "none";
    }
</script>
</body>
</html>
方便获取更多学习、工作、生活信息请关注本站微信公众号 城东书院微信服务号
来顶一下
返回首页
上一篇:JavaScript实现拖拽元素对齐到网格（每次移动固定距离）下一篇:vue 文件目录结构详解
高考生入学注意：这些大	【健康】纯净水、天然
14种竞赛生升学路径盘	excel后缀xls和xlsx有