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

原生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 = '';//放大图片urlthis.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);})();
});

图片的文件：如果想要原图可以私信找我，发给你哦~ 快去试试吧

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

仿华为手机管家“一键优化”Loading加载框
仿华为手机管家"一键优化"Loading加载框最近公司项目版本通过了没事做,闲来无聊学习下自定义view知识.偶尔看到华为手机上面的手机管家应用上面的loading图,于是想模仿 ...
android 仿华为手机悬浮窗设计
android 悬浮窗设计最近项目中有个需求就是要在android 系统桌面上写一个悬浮球,并使其具有返回,进到主页,打开设置等功能.类似于华为手机的悬浮球.这里主要用到windowManager来 ...
Android 4.4后仿华为手机实现计步的效果
在市面上浏览过众多的计步软件,可惜没有开源的代码,而github上的几个开源的计步代码,要么就是记得不准,要么就是功能不完善,不稳定,于是决心自己写一个,分享给大家使用,希望大家一起来完善. !!!: ...
《Android自定义控件》时钟、钟表AlarmClockView，仿华为手机世界时钟控件效果
转载请标明出处:https://blog.csdn.net/m0_38074457/article/details/85790550,本文出自[陈少华的博客] 一.效果图二.控件结构三.代码实现 ...
Android 高仿华为手机Tab页滑动导航效果
首先带大家看一下实现效果,用了两种实现方式: 1.基于LinearLayout实现,导航栏不可响应手指滑动 2.基于HorizontalScrollView实现,导航栏可响应手指滑动实现方式虽然不一 ...
仿淘宝商品放大展示效果制作（放大镜效果）
如果您觉得这篇文章有用,欢迎点赞收藏或有什么建议请在评论区留言,我看到后会第一时间回复的,谢谢! (分享时刻) mac上取色比较好用的小工具:啜色: 好用的截屏小工具:Snipaste (常用的一个功 ...
魔客吧php登录界面模板,10款jquery实现的仿魔客吧模板展示特效
1.HTML5实现图形挤压变形动画今天我们要来分享一款很特别的HTML5动画特效,它是一款图形挤压动画.鼠标移动小球,该小球会和周围的几个小球产生挤压效果,从而使受挤压的小球产生相应的变形,利用HT ...
华为手机线刷工具_原来华为手机自带视频剪辑工具！简单操作几步，就能添加炫酷特效...
短视频是两年很火的社交手段之一,不管是在微博还是微信朋友圈了,很多朋友都喜欢使用视频来表达自己的动态. 有些朋友为了让自己的视频更加好看,就给视频添加字幕.音乐.动画等元素,但这些操作都要使用第三方工 ...
window电脑上同步展示示华为手机内容
window电脑上同步展示示华为手机内容使用USB数据线连接华为手机后,会提示下载华为手机助手下载安装完成后,输入验证码连接设备在左侧就会展示华为手机的页面,和手机是同步的当鼠标放上去之后点 ...

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

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

最新文章

热门文章