放大镜效果的实现原理就是按照比例实现元素移动,因此,一定要搞清楚比例关系。
首先进行布局
<div class="wrap">
<div id="spic">
<img src="images/2.jpg" alt="">
<div id="sf"></div>
</div>
<div id="bf">
<img src="images/2.jpg" alt="" id="bpic">
</div>
<div id="ulist">
<a href="javascript:;" id="left"><</a>
<div id="list">
<ul>
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/6.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
<li><img src="images/5.jpg" alt=""></li>
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/6.jpg" alt=""></li>
</ul>
</div>
<a href="javascript:;" id="right">></a>
</div>
</div>
微调一下样式
* {
padding: 0px;
margin: 0px;
}
.wrap {
width: 1000px;
height: 500px;
margin: 0 auto;
position: relative;
}
#spic {
width: 400px;
height: 400px;
border: 1px solid #000;
float: left;
position: relative;
}
#spic img {
width: 400px;
height: 400px;
}
#sf {
width: 50px;
height: 50px;
background: lightblue;
opacity: 0.3;
position: absolute;
left: 0px;
top: 0px;
visibility: hidden;
}
#bf {
width: 400px;
height: 500px;
border: 1px solid #000;
float: left;
overflow: hidden;
position: relative;
left: 10px;
visibility: hidden;
}
#bf img {
position: absolute;
left: 0px;
top: 0px;
}
#ulist {
position: absolute;
left: 0px;
bottom: 15px;
width: 402px;
height: 56px;
overflow: hidden;
}
#ulist a {
float: left;
width: 10px;
height: 54px;
border: 1px solid #ccc;
text-decoration: none;
line-height: 56px;
text-align: center;
background: #fff;
}
#list {
float: left;
margin-left: 18px;
width: 372px;
position: relative;
}
ul {
list-style: none;
float: left;
position: absolute;
left: 0px;
top: 0px;
}
ul li {
float: left;
width: 56px;
height: 56px;
padding-right: 6px;
}
ul li img {
width: 52px;
height: 52px;
border: 1px solid #ccc;
}
#right {
position: absolute;
right: 0px;
top: 0px;
color: #333;
}
#left {
position: absolute;
left: 0px;
top: 0px;
z-index: 2;
color: #fff;
}
JS代码
;
!(function() {
function Fdj() {
this.wrap = document.querySelector('.wrap');
this.spic = document.querySelector('#spic');
this.bpic = document.querySelector('#bpic');
this.sf = document.querySelector('#sf');
this.lis = document.querySelectorAll('#list li');
this.bf = document.querySelector('#bf');
this.ul = document.querySelector('#list ul');
this.left = document.querySelector('#left');
this.right = document.querySelector('#right');
}
Fdj.prototype = {
init: function() {
var _this = this;
this.spic.onmouseover = function() {
_this.showfdj();
_this.sfsize();
_this.spic.onmousemove = function(e) {
var e = e || window.event;
_this.sflocation(e);
}
}
this.spic.onmouseout = function() {
_this.hidefdj();
}
for (let i = 0; i < this.lis.length; i++) {
this.lis[i].onclick = function() {
var url = this.children[0].src;
_this.spic.children[0].src = url;
_this.bpic.src = url;
}
}
this.liwidth = this.lis[0].offsetWidth;
this.ul.style.width = this.lis.length * this.liwidth + 'px';
this.num = 6;
if (this.lis.length <= 6) {
this.left.style.color = '#eee';
this.right.style.color = '#eee';
}
this.right.onclick = function() {
_this.rightclick();
}
this.left.onclick = function() {
_this.leftclick();
}
},
showfdj: function() {
this.sf.style.visibility = 'visible';
this.bf.style.visibility = 'visible';
},
hidefdj: function() {
this.sf.style.visibility = 'hidden';
this.bf.style.visibility = 'hidden';
},
sfsize: function() {
var l = this.bf.offsetWidth * this.spic.offsetWidth / this.bpic.offsetWidth;
var t = this.bf.offsetHeight * this.spic.offsetHeight / this.bpic.offsetHeight;
this.sf.style.width = l + 'px';
this.sf.style.height = t + 'px';
},
sflocation: function(e) {
var l = e.clientX - this.wrap.offsetLeft - this.sf.offsetWidth / 2;
var t = e.clientY - this.wrap.offsetTop - this.sf.offsetHeight / 2;
this.bili = this.bf.offsetWidth / this.sf.offsetWidth;
if (l <= 0) {
l = 0;
} else if (l >= this.spic.offsetWidth - this.sf.offsetWidth) {
l = this.spic.offsetWidth - this.sf.offsetWidth - 2;
}
if (t <= 0) {
t = 0;
} else if (t >= this.spic.offsetHeight - this.sf.offsetHeight) {
t = this.spic.offsetHeight - this.sf.offsetHeight - 2;
}
this.sf.style.left = l + 'px';
this.sf.style.top = t + 'px';
this.bpic.style.left = -l * this.bili + 'px';
this.bpic.style.top = -t * this.bili + 'px';
},
rightclick: function() {
if (this.num < this.lis.length) {
this.left.style.color = '#333';
this.num++;
if (this.num == this.lis.length) {
this.right.style.color = '#eee';
}
buffermove(this.ul, { left: -(this.num - 6) * this.liwidth });
}
},
leftclick: function() {
if (this.num > 6) {
this.right.style.color = '#333';
this.num--;
if (this.num <= 6) {
this.left.style.color = '#eee';
}
buffermove(this.ul, { left: -(this.num - 6) * this.liwidth });
}
}
}
var f1 = new Fdj();
f1.init();
})();
效果: