购物图片放大效果-放大镜效果

单先生
单先生 发布于 2017-01-01 21:47:42 浏览:1245 类型:原创 - 教程 分类:JavaScript - JavaScript 二维码: 作者原创 版权保护
大家好,今天给大家带来的是一个购物浏览时的放大效果。例如京东和淘宝都会有这种效果。
首先说一下放大镜原理:我们需要两张图片,一张大图和一张小图。默认大图不显示,当鼠标在小图上时,大图展示出来。然后跟随鼠标在小图上移动距离,来设定大图的移动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            height: 1000px;
        }
        .box{
            width: 400px;
            height: 400px;
            position: relative;
            margin: 100px 0 0 50px;
        }
        .small-box{
            width: 100%;
            height: 100%;
            border: 2px solid #000;
            position: relative;
        }
        .small-box>img{
            width: 400px;
            height: 400px;
        }
        .box .small-slider{
            width: 150px;
            height: 150px;
            background-color: goldenrod;
            opacity: .6;
            position: absolute;
            /*默认隐藏*/
            display: none;
            left: 0px;
            top: 0px;
        }
        .box .show-Box{
            width: 600px;
            height: 600px;
            border: 2px solid #000;
            position: absolute;
            overflow: hidden;
            /*默认隐藏*/
            display: none;
            left: 410px;
            top:0px;
        }
        .box .show-Box img{
            position: absolute;
        }

    </style>
</head>
<body>
<div id="box" class="box">
    <div id="smallBox" class="small-box">
        <img src="https://img14.360buyimg.com/n1/s450x450_jfs/t1435/291/1093842322/97500/de4725cb/55bb420fNfb17575e.jpg" alt="">
        <span class="small-slider"></span>
    </div>


    <div id="showBox" class="show-Box">
        <img src="https://img14.360buyimg.com/n0/jfs/t1435/291/1093842322/97500/de4725cb/55bb420fNfb17575e.jpg" alt="">
    </div>
</div>

<script>

    window.onload = function () {
        var fatherBox   = document.getElementById('box');
        var smallBox    = document.getElementById('smallBox');//获得小盒子
        var smallSlider = smallBox.children[1];//获得小黄块
        var showBox     = document.getElementById('showBox');//获得展示块
        var showBoxImg  = showBox.children[0];
        var smallBoxLeft = smallBox.offsetParent.offsetLeft;//获得小盒子左边间距
        var smallBoxTop  = smallBox.offsetParent.offsetTop; //获得小盒子上边间距

        //触摸小盒子
        smallBox.onmouseover = function () {
            /*1.首先要将smallSlider showBox显示出来*/
            showBox.style.display     = 'block';
            smallSlider.style.display = 'block'
            //滑块所走最大横向距离x
            var maxLeftX       = smallBox.offsetWidth-smallSlider.offsetWidth-4//4为边框;
            //滑块所走最大纵向距离y
            var maxTopY        = smallBox.offsetHeight-smallSlider.offsetHeight-4//同上;

            //大图片所走距离x
            var showImgMaxLeft = showBox.offsetWidth-showBoxImg.offsetWidth;
            //大图片所走距离y
            var showImgMaxTop  = showBox.offsetHeight-showBoxImg.offsetHeight;

            var leftRatio      = maxLeftX/showImgMaxLeft;//横向(X)距离比例
            var topRatio       = maxTopY/showImgMaxTop;//纵向(Y)距离比例

            //当鼠标在小盒子上移动的时候
            smallBox.onmousemove = function (event) {
                var event = event || window.event;

                var leftX = event.pageX-smallBoxLeft-smallSlider.offsetWidth * 0.5;
                var topY  = event.pageY-smallBoxTop-smallSlider.offsetHeight * 0.5;

                if (leftX<0){
                    leftX = 0;
                } else if (leftX >= maxLeftX ){
                    leftX = maxLeftX;
                }
                if (topY<0){
                    topY  = 0;
                }else if (topY >= maxTopY){
                    topY = maxTopY;
                }

                smallSlider.style.left = leftX + 'px';
                smallSlider.style.top  = topY + 'px';
                showBoxImg.style.left  = leftX/leftRatio+'px';
                showBoxImg.style.top   = topY/topRatio+'px';

                return false;
            }

            //摸完了后
            smallBox.onmouseout = function () {
                /*2.移出鼠标后,隐藏smallSlider showBox*/
                smallSlider.style.display = 'none';
                showBox.style.display     = 'none';

            }
            return false;
        }
    }
</script>

</body>
</html>

下面我们开始进入正题。

第一步,先布局好几本html和css代码,
购物图片放大效果-放大镜效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            height: 1000px;
        }
        .box{
            width: 400px;
            height: 400px;
            position: relative;
            margin: 100px 0 0 50px;
        }
        .small-box{
            width: 100%;
            height: 100%;
            border: 2px solid #000;
            position: relative;
        }
        .small-box>img{
            width: 400px;
            height: 400px;
        }
        .box .small-slider{
            width: 150px;
            height: 150px;
            background-color: goldenrod;
            opacity: .6;
            position: absolute;
            /*默认隐藏*/
            display: none;
            left: 0px;
            top: 0px;
        }
        .box .show-Box{
            width: 600px;
            height: 600px;
            border: 2px solid #000;
            position: absolute;
            overflow: hidden;
            /*默认隐藏*/
            display: none;
            left: 410px;
            top:0px;
        }
        .box .show-Box img{
            position: absolute;
        }

    </style>
</head>
<body>
<div id="box" class="box">
    <div id="smallBox" class="small-box">
        <img src="../images/ipod1x.jpg" alt="">
        <span class="small-slider"></span>
    </div>


    <div id="showBox" class="show-Box">
        <img src="../images/ipod2x.jpg" alt="">
    </div>
</div>
</body>



第二步,设置鼠标事件,当小图触摸到小图上时候,大图展示出来。

购物图片放大效果-放大镜效果

window.onload = function () {
        var fatherBox   = document.getElementById('box');
        var smallBox    = document.getElementById('smallBox');//获得小盒子
        var smallSlider = smallBox.children[1];//获得小黄块
        var showBox     = document.getElementById('showBox');//获得展示块
        var showBoxImg  = showBox.children[0];
        var smallBoxLeft = smallBox.offsetParent.offsetLeft;//获得小盒子左边间距
        var smallBoxTop  = smallBox.offsetParent.offsetTop; //获得小盒子上边间距

        //触摸小盒子
        smallBox.onmouseover = function () {
            /*1.首先要将smallSlider showBox显示出来*/
            showBox.style.display     = 'block';
            smallSlider.style.display = 'block'
        
            //摸完了后
            smallBox.onmouseout = function () {
                /*2.移出鼠标后,隐藏smallSlider showBox*/
                smallSlider.style.display = 'none';
                showBox.style.display     = 'none';

            }
            return false;
        }
    }


3.小盒上的操作(smallBox),鼠标移动到smallBox上后,小黄块跟随鼠标移动。下图仔细讲解了,这个操作
购物图片放大效果-放大镜效果
3.1小盒子上的坐标,是要减掉他距离左边的距离和上边的距离的。因为页面滑动会影响offsetTop或者offsetLeft的距离,所以要用pageX和pageY的坐标。
购物图片放大效果-放大镜效果

4.联动效果实现。这个就是要下面的推导公式计算

购物图片放大效果-放大镜效果

购物图片放大效果-放大镜效果
购物图片放大效果-放大镜效果
购物图片放大效果-放大镜效果
z
给个赞 13 人点赞
收藏 37 人收藏
评论 已有 3 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最热评论
老姚
老姚2017-01-05 11:11:452F
“假装有图片”,莫名的击中我的笑点emoticon
举报 支持 (1) 回复 (1)
最新评论
单先生
单先生2017-01-05 13:03:223F
emoticon为笑点而生 //@老姚:“假装有图片”,莫名的击中我的笑点emoticon
举报 支持 (0) 回复 (0)
老姚
老姚2017-01-05 11:11:452F
“假装有图片”,莫名的击中我的笑点emoticon
举报 支持 (1) 回复 (1)
ddvbbk
ddvbbk2017-01-05 10:21:411F
马克
举报 支持 (0) 回复 (0)
单先生 单先生 作者

行有不得,反求诸己。

作者最新