大家好，欢迎来到IT知识分享网。
放大镜功能是各大电商网站的实用功能，想要实现这个效果也很简单，其实就是一个欺骗眼睛的效果，放大效果效果图如下：
当鼠标移入时有放大镜小窗与大窗显示，当鼠标移出时放大镜效果消失，放大镜大窗将overflow：hidden属性取消后，效果如下：
实际上就是在大窗里有一张大图，这张大图会随小窗的相反方向等比例运动，再在大图外包一层容器，遮挡住多余部分，这样放大镜的效果就成现在眼前，核心功能就是小窗移动，大图跟随。当然，实用面向对象的方式编程的话可以简单的加一些额外的功能，比如放大镜的大小随滚轮变化，商品切图后依然可以使用放大镜效果等，效果图如下：
代码如下供大家参考，
Css:
*{
margin: 0;
padding: 0;
}
.small {
width: 400px;
height: 400px;
position: relative;
margin-left: 200px;
margin-top: 100px;
border:4px solid #ddd;
box-shadow: 0 0 5px rgba(0,0,0,.5);
}
.small img{
width: 100%;
height: 100%;
}
.small .wrap{
width: 100%;
height: 100%;
position: absolute;
z-index: 999;
}
.small .grayBox{
display: none;
width: 100px;
height: 100px;
background-position-x: 0;
background-position-y: 0;
background-size:400px 400px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
position: absolute;
left: 0;
top: 0;
/* border-radius: 50%; */
}
.big{
width: 400px;
height: 400px;
position: absolute;
left: 700px;
top: 100px;
border:1px solid #f10;
display: none;
overflow: hidden;
/* border-radius: 50%; */
}
.big img{
position: absolute;
/* width: 1600px;
height: 1600px; */
left: 0;
top: 0
}
.img{
width: 150px;
height: 150px;
float: left;
overflow: hidden;
box-sizing: border-box;
}
.img img{
width: 150px;
height: 150px;
}
.img.active{
border: #f10 1px solid;
}
Html + js:
<body>
<div class=”small”>
<img src=”https://img14.360buyimg.com/n0/jfs/t1/101614/40/15359/168436/5e6dfba9E183cdb62/1f234761c7833710.jpg” alt=””>
<span class=”grayBox”></span>
</div>
<div class=”big”>
<img src=”https://img14.360buyimg.com/n0/jfs/t1/101614/40/15359/168436/5e6dfba9E183cdb62/1f234761c7833710.jpg” alt=”” >
</div>
<div class=”img active”><img src=”https://img14.360buyimg.com/n0/jfs/t1/101614/40/15359/168436/5e6dfba9E183cdb62/1f234761c7833710.jpg” alt=””></div>
<div class=”img “><img src=”https://img14.360buyimg.com/n0/jfs/t1/45954/33/10562/97168/5d780893Eaec0fe47/ee567a1dea515d38.jpg” alt=””></div>
<div class=”img “><img src=”https://img14.360buyimg.com/n0/jfs/t1/80220/18/9892/163090/5d78089cEda2f9674/da3b18358e68cfca.jpg” alt=””></div>
</body>
<script>
// OOA
// 1. 元素选择功能;
// 2. 事件驱动;
// 3. 元素的显示隐藏;
// 4. 小图移动，大图跟随;
// OOD :
// function Magnifier() {
// }
// Magnifier.prototype = {
// constructor : Magnifier ,
// // 初始化功能;
// init : function(){
// }
// // 事件绑定功能;
// bindEvent : function(){
// }
// // 元素显示隐藏功能;
// eleToggle : function(){
// }
// // 小图移动，大图跟随;
// eleMove : function(){
// }
// }
// OOP :
function Magnifier( options ) {
this.init( options );
}
Magnifier.prototype = {
constructor : Magnifier ,
// 初始化功能;
init : function( options ){
// 初始化元素;
/*
small_box_ele : 小盒子
cutting_box_ele : 显示一部分的盒子;
big_box_ele : 大盒子;
big_img_ele : 图片盒子;
*/
for(var attr in options){
this[attr+”_ele”] = this.$(options[attr]);
}
// 为了节省性能，所以只获取一次offsetLeft;
this.small_box_offset = {
left : this.small_box_ele.offsetLeft,
top : this.small_box_ele.offsetTop,
width : parseInt( getComputedStyle(this.small_box_ele).width ),
height : parseInt( getComputedStyle(this.small_box_ele).height )
}
// 因为初始的状态是display:none 所以offset的测量会得到0的结果;
// this.cutting_box_offset = {
// width : this.cutting_box_ele.offsetWidth,
// height : this.cutting_box_ele.offsetHeight,
// }
// 替换成 getComputedStyle ;
this.cutting_box_offset = {
width : parseInt( getComputedStyle(this.cutting_box_ele).width ),
height : parseInt( getComputedStyle(this.cutting_box_ele).height ),
}
this.big_img_offset = {
width : this.small_box_offset.width / this.cutting_box_offset.width * this.small_box_offset.width,
height : this.small_box_offset.height / this.cutting_box_offset.height * this.small_box_offset.height
}
// console.log(this);
this.bigImgScaling()
this.bindEvent();
},
// 元素选择功能;
$ : function(selector){
return document.querySelector(selector);
},
// 事件绑定功能;
bindEvent : function(){
this.small_box_ele.addEventListener( “mouseover” , function(){
// 元素显示;
this.eleToggle(“show”);
}.bind(this));
this.small_box_ele.addEventListener( “mouseout” , function(){
// 元素隐藏;
this.eleToggle(“hide”);
}.bind(this));
// 元素运动;
this.small_box_ele.addEventListener(“mousemove” , function( evt ){
var e = evt || event;
this.x = e.clientX ;
this.y = e.clientY ;
this.res = this.factoryPosition( this.x , this.y )
this.eleMove(this.res);
}.bind(this))
//滚轮缩放
this.cutting_box_ele.addEventListener(“mousewheel” , function( evt ){
var e = evt || event
console.log(e.wheelDelta)
this.cuttingBoxScaling(e.wheelDelta)
}.bind(this))
},
// 元素显示隐藏功能;
eleToggle : function( type ){
this.cutting_box_ele.style.display = type === “show” ? “block” : “none”;
this.big_box_ele.style.display = type === “show” ? “block” : “none”;
},
// 小图移动，大图跟随;
eleMove : function(res){
this.cutting_box_ele.style.left = res.x + “px”;
this.cutting_box_ele.style.top = res.y + “px”;
//小窗背景图移动
this.cutting_box_ele.style.backgroundPositionX = res.x_percent + “%”
this.cutting_box_ele.style.backgroundPositionY = res.y_percent + “%”
//大窗跟随移动
// this.big_img_ele.style.left = “-” + x_percent
// this.big_img_ele.style.top = “-” + y_percent
this.big_img_ele.style.left = “-” + res.x_percent * (this.small_box_offset.width – this.cutting_box_offset.width) / this.cutting_box_offset.width + “%”
this.big_img_ele.style.top = “-” + res.y_percent * (this.small_box_offset.height – this.cutting_box_offset.height) / this.cutting_box_offset.height + “%”
// console.log(parseInt(x_percent))
// console.log(parseFloat(x_percent))
},
//大图缩放
bigImgScaling : function(){
this.big_img_ele.style.width = this.big_img_offset.width + “px”
this.big_img_ele.style.height = this.big_img_offset.height + “px”
},
//大镜缩放
cuttingBoxScaling : function(Delta){
if(this.cutting_box_offset.width > this.small_box_offset.width – 8){
this.cutting_box_offset.width = this.small_box_offset.width – 8
this.cutting_box_offset.height = this.small_box_offset.height – 8
return false
}
if(this.cutting_box_offset.width < 20){
this.cutting_box_offset.width = 20
this.cutting_box_offset.height = 20
return false
}
if(Delta < 0){
this.cutting_box_offset.width += 8
this.cutting_box_offset.height += 8
this.cutting_box_ele.style.width = this.cutting_box_offset.width + “px”
this.cutting_box_ele.style.height = this.cutting_box_offset.height + “px”
this.res.x -= 4
this.res.y -= 4
this.cutting_box_offset = {
width : parseInt( getComputedStyle(this.cutting_box_ele).width ),
height : parseInt( getComputedStyle(this.cutting_box_ele).height ),
}
this.big_img_offset = {
width : this.small_box_offset.width / this.cutting_box_offset.width * this.small_box_offset.width,
height : this.small_box_offset.height / this.cutting_box_offset.height * this.small_box_offset.height
}
this.bigImgScaling()
}else if(Delta > 0){
this.cutting_box_offset.width -= 8
this.cutting_box_offset.height -= 8
this.cutting_box_ele.style.width = this.cutting_box_offset.width + “px”
this.cutting_box_ele.style.height = this.cutting_box_offset.height + “px”
this.res.x += 4
this.res.y += 4
this.cutting_box_offset = {
width : parseInt( getComputedStyle(this.cutting_box_ele).width ),
height : parseInt( getComputedStyle(this.cutting_box_ele).height ),
}
this.big_img_offset = {
width : this.small_box_offset.width / this.cutting_box_offset.width * this.small_box_offset.width,
height : this.small_box_offset.height / this.cutting_box_offset.height * this.small_box_offset.height
}
this.bigImgScaling()
}
this.res = this.factoryPosition( this.x , this.y )
this.eleMove(this.res)
},
// 处理x和y;
factoryPosition : function( x , y ){
var _left = x – this.small_box_offset.left – this.cutting_box_offset.width / 2;
var _top = y – this.small_box_offset.top – this.cutting_box_offset.height / 2
// 做边界监测 :
// 最小值边界监测;
_left = _left <= 0 ? 0 : _left;
_top = _top <= 0 ? 0 : _top
_left = _left >= this.small_box_offset.width – this.cutting_box_offset.width ? this.small_box_offset.width – this.cutting_box_offset.width : _left;
_top = _top >= this.small_box_offset.height – this.cutting_box_offset.height ? this.small_box_offset.height – this.cutting_box_offset.height : _top
// 高频率调用函数;
return {
x : _left,
y : _top,
x_percent:( _left / (this.small_box_offset.width – this.cutting_box_offset.width )) * 100 ,
y_percent:( _top / (this.small_box_offset.height – this.cutting_box_offset.height )) * 100
}
}
}
new Magnifier({
small_box : “.small”,
cutting_box : “.grayBox”,
big_box : “.big”,
big_img : “.big img”
});
var img_box_ele = document.getElementsByClassName(“img”)
var imgs = document.querySelectorAll(“.big img,.small img”)
for(var i = 0 ; i < img_box_ele.length ; i ++){
img_box_ele[i].addEventListener(“click” , function(){
for(var j = 0 ; j < img_box_ele.length ; j ++){
img_box_ele[j].className = img_box_ele[j].className.replace(/\sactive/,””)
}
this.className += ” active”
var src = this.children[0].getAttribute(“src”)
for(var k = 0 ; k < imgs.length ; k ++){
imgs[k].src = src
}
})
}
</script>
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/33523.html
