放大镜展示特效，仿华为手机商品~
生活随笔
收集整理的這篇文章主要介紹了
放大镜展示特效，仿华为手机商品~
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
原生js制作華為手機商品圖片放大鏡預覽，帶左右按鈕和縮略圖切換。通過js默認設置好縮略圖和大圖，懸停大圖放大鏡展示特效。適用于各大商城網站商品圖片展示代碼。
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);})(); });圖片的文件：如果想要原圖可以私信找我，發給你哦~ 快去試試吧
總結
以上是生活随笔為你收集整理的放大镜展示特效，仿华为手机商品~的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 基于ASP.NET大学生校园招聘网站的设
- 下一篇： 随笔日记本C