放大镜展示特效，仿华为手机商品~

最新推荐文章于 2022-10-03 20:34:27 发布

W Y L

最新推荐文章于 2022-10-03 20:34:27 发布

阅读量336

点赞数

分类专栏：网页特效文章标签： css js html 前端

本文链接：https://blog.csdn.net/weixin_45959525/article/details/118993652

版权

网页特效专栏收录该内容

51 篇文章 0 订阅

订阅专栏

原生js制作华为手机商品图片放大镜预览，带左右按钮和缩略图切换。通过js默认设置好缩略图和大图，悬停大图放大镜展示特效。适用于各大商城网站商品图片展示代码。
在这里插入图片描述 html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>原生js仿华为产品放大镜效果</title>
    <link type="text/css" href="css/style.css" rel="stylesheet" />
</head>
<body>
    <div class="box">
        <a href="javascript:;" class="phone-display"></a>
        <div class="bottom-nav clearfix">
            <div class="tab-btn btn-left">
                <i class="shift-icon">
                    <span></span>
                </i>
            </div>
            <div class="tab-btn btn-right">
                <i class="shift-icon">
                    <span></span>
                </i>
            </div>

            <div class="bottom-center-nav">
                <ul class="small-img-ul">
                </ul>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/script.js"></script>
</body>
</html>

css代码

@charset "utf-8";
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

a {
	text-decoration: none;
}

ul {
	list-style: none;
}

html,
body {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

body {
	font-family: Helvetica;
	font-size: 15px;
	font-weight: normal;
	padding-top: 60px;
}

.clearfix::before,
.clearfix::after {
	content: "";
	display: table;
}

.clearfix::after {
	clear: both;
}


div.box {
	width: 400px;
	height: 400px;
	margin-left: 200px;
}

div.box a.phone-display {
	display: block;
	position: relative;
	height: 100%;
}


div.bottom-nav{
	margin-top: 20px;
}

div.bottom-nav div.tab-btn{
	position: relative;
	width: 40px;
	height: 60px;
	cursor: pointer;
}

div.tab-btn:hover{
	opacity: .6;
}

div.tab-btn.btn-left{
	float: left;
}

div.tab-btn.btn-right{
	float: right;
}

i.shift-icon {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 26px;
	height: 26px;
	border: 1px solid #999;
	border-radius: 50%;
}

i.shift-icon>span {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 10px;
	height: 10px;
	border-bottom: 1.5px solid #999;
}

div.btn-left i.shift-icon>span {
	border-left: 1.5px solid #999;
	transform: translate(-30%, -50%) rotate(45deg);
}
div.btn-right i.shift-icon>span {
	border-right: 1.5px solid #999;
	transform: translate(-70%, -50%) rotate(-45deg);
}


div.bottom-nav div.bottom-center-nav{
	position: relative;
	height: 60px;
	margin: 0 50px;
	overflow: hidden;
}
div.bottom-center-nav ul.small-img-ul {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
}
ul.small-img-ul li.img{
	float: left;
	width: 60px;
	height: 100%;
	border:1px solid transparent;
	background-size: 100% 100%;
	cursor: pointer;
}
ul.small-img-ul li.img.active{
	border-color: rgb(160, 27, 27);
}

js代码

(function () {
    var Magnifier = function (ele, obj) {
        this.ele = ele;//原始图片盒子
        this.eleWidth = this.ele.offsetWidth;//原始图片盒子宽度
        this.eleHeight = this.ele.offsetHeight;//原始图片盒子高度
        this.url = '';//放大图片url
        this.maskLayerWidth = obj.maskLayerWidth || obj.maskLayerHeight || 180;//遮罩宽度
        this.maskLayerHeight = obj.maskLayerHeight || obj.maskLayerWidth || 180;//遮罩高度
        this.backgroundScaleX = this.eleWidth / this.maskLayerWidth;//放大后图片与原始图片的放大比例(X)
        this.backgroundScaleY = this.eleHeight / this.maskLayerHeight;//放大后图片与原始图片的放大比例(Y)
        this.scaleX = obj.scale ? obj.scale[0] || obj.scale[1] : this.backgroundScaleX;//放大图片盒子与遮罩的放大比例(X)
        this.scaleY = obj.scale ? obj.scale[1] || obj.scale[0] : this.backgroundScaleY;//放大图片盒子与遮罩的放大比例(Y)
        this.init();
    };

    Magnifier.prototype = {

        constructor: Magnifier,
        init: function () {
            this.ele.style.backgroundSize = '100% 100%';//设置原始图片大小为100%
        },
        createRelativeBox: function () {
            //遮罩
            this.maskLayer = document.createElement('div');
            this.maskLayer.style.cssText = 'position: absolute;border: 1px solid #ccc;background: rgba(255, 255, 255, .7);cursor: move;' +
                'width:' + this.maskLayerWidth + 'px;height:' + this.maskLayerHeight + 'px;'
            this.ele.appendChild(this.maskLayer);
            //放大图片盒子
            this.asideBox = document.createElement('div');
            this.asideBox.style.cssText = 'position:absolute;left:105%;top:50%;border:2px solid #ccc;transform:translateY(-50%);' +
                'width:' + this.maskLayerWidth * this.scaleX + 'px;height:' + this.maskLayerHeight * this.scaleY + 'px;' +
                'background-image:url(' + this.url + ');background-repeat:no-repeat;background-size:' + this.backgroundScaleX * 100 + '% ' + this.backgroundScaleY * 100 + '%';
            this.ele.appendChild(this.asideBox);
        },
        calcPosition: function (e) {
            var left = e.pageX - this.ele.offsetLeft - this.maskLayerWidth / 2,
                top = e.pageY - this.ele.offsetTop - this.maskLayerHeight / 2;
            if (left < 0) {
                left = 0;
            } else if (left > this.eleWidth - this.maskLayerWidth) {
                left = this.eleWidth - this.maskLayerWidth;
            };
            if (top < 0) {
                top = 0;
            } else if (top > this.eleHeight - this.maskLayerHeight) {
                top = this.eleHeight - this.maskLayerHeight;
            };
            this.maskLayer.style.left = left + 'px';
            this.maskLayer.style.top = top + 'px';
            this.asideBox.style.backgroundPosition = left * -this.scaleX + 'px ' + top * -this.scaleY + 'px';
        }
    };
    window.Magnifier = Magnifier;
}());

window.addEventListener('load', function () {

    (function () {

        var smallImgUl = document.querySelector('ul.small-img-ul'),
            phoneDispaly = document.querySelector('a.phone-display');
        
        var i = 0, flag = true;

        var imgArr = {
            'big': [
                'image/p1.png',
                'image/p2.png',
                'image/p3.png',
                'image/p4.png',
                'image/p5.png',
                'image/p6.png'
            ],
            'small': [
                'image/small-p1.png',
                'image/small-p2.png',
                'image/small-p3.png',
                'image/small-p4.png',
                'image/small-p5.png',
                'image/small-p6.png'
            ]
        };

        //插入小图片
        var arr = [];
        imgArr['small'].forEach(function (ele) {
            arr.push('<li class=\'img\' style=\'background-image:url(' + ele + ')\'></li>')
        });
        smallImgUl.innerHTML = arr.join('');


        var imgList = smallImgUl.children,
            smallImgWidth = imgList[0].offsetWidth;

        smallImgUl.style.width = imgList.length * smallImgWidth + 'px';

        //获取索引
        function getIndex(item) {
            return Array.prototype.indexOf.call(imgList, item);
        };

        //初始化展示的大图和小图以及相关样式
        initImg();
        function initImg() {
            Array.prototype.forEach.call(imgList, function (ele, index) {
                ele.className = 'img';
            });
            imgList[i].className += ' active';
            phoneDispaly.style.backgroundImage = 'url(' + imgArr['big'][i] + ')';
        };

        //鼠标移入事件
        smallImgUl.addEventListener('mouseover', function (e) {
            i = getIndex(e.target);
            initImg();
        });


        
        var magnifier = new Magnifier(phoneDispaly, {
            maskLayerWidth: 180,
            maskLayerHeight: 240,
            scale: [2]
        });

        function moveEffect(e) {
            if (flag) {
                magnifier.url = imgArr['big'][i];
                magnifier.createRelativeBox();
                flag = false;
            };
            magnifier.calcPosition(e);
        };

        phoneDispaly.addEventListener('mouseenter', function () {
            this.addEventListener('mousemove', moveEffect, false);
            this.addEventListener('mouseleave', function () {
                this.removeEventListener('mousemove', moveEffect);
                this.innerHTML = '';
                flag = true;
            }, false);
        }, false);

        
        //左右按钮点击
        var btnLeft = document.querySelector('.btn-left'),
            btnRight = document.querySelector('.btn-right');

        var overNum = (parseFloat(window.getComputedStyle(smallImgUl, null)['width']) - parseFloat(window.getComputedStyle(smallImgUl.parentNode, null)['width'])) / smallImgWidth;

        var record = 0;
        btnLeft.addEventListener('click', function () {
            record--;
            if (record < 0) {
                record = 0;
                return;
            };
            smallImgUl.style.left = parseFloat(window.getComputedStyle(smallImgUl, null)['left']) + smallImgWidth + 'px';
        }, false);

        btnRight.addEventListener('click', function () {
            record++;
            if (record > overNum) {
                record = overNum;
                return;
            };
            smallImgUl.style.left = parseFloat(window.getComputedStyle(smallImgUl, null)['left']) - smallImgWidth + 'px';
        }, false);

    })();
});

图片的文件：如果想要原图可以私信找我，发给你哦~ 快去试试吧
在这里插入图片描述

W Y L

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
放大镜展示特效，仿华为手机商品~

原生js制作华为手机商品图片放大镜预览，带左右按钮和缩略图切换。通过js默认设置好缩略图和大图，悬停大图放大镜展示特效。适用于各大商城网站商品图片展示代码。html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt
复制链接

扫一扫

专栏目录