实现淘宝放大镜的两种方式

今天总结了一下,关于淘宝放大镜实现的两种方式,一种是用JS,用逻辑实现,另一种是用JQ插件( zoom插件)实现的:

一:JS实现的淘宝放大镜

JS淘宝放大镜主要用的知识点其实就是

1.clientX(clientY),鼠标点击的点距离”窗口"上部和左边的距离.

2.offsetLeft:该元素的左边框的外边缘到offsetParent元素左边框的内边缘的距离(是到设置的父级的距离).

3.  offsetWidth = content.width + padding.left + padding.right + border.left + border.right;

4. clientWidth = content.width + padding.left + psdding.right;

下面是我的代代码的实现,语言比较随意,但是我感觉挺好理解的,希望可以帮助到不会的你们,如果看到此文档的,用到这些代码的小伙伴,要记的更换图片的路径哦,否者不会有效果哦,这是第一次发表这类文章,希望大家多多关照

<! DOCTYPE html>
< html >
< head >
< meta charset = "UTF-8" >
< title >放大镜效果</ title >
< style type = "text/css" >
* {
margin : 0 ;
padding : 0 ;
}
#small {
width : 300 px ;
height : 300 px ;
/*border: 2px solid yellow;*/
}
#small > img {
width : 300 px ;
height : 300 px ;
}
#slider {
width : 140 px ;
height : 140 px ;
background : rgba ( 135 , 135 , 135 , 0.4 ) ;
position : absolute ;
top : 0 ;
display : none ;
}
#big {
width : 300 px ;
height : 300 px ;
position : absolute ;
top : 0 ;
left : 350 px ;
/*border: 2px solid red;*/
overflow : hidden ;
display : none ;
}
</ style >
</ head >
< body >
<!--原图-->
< div id = "small" >
< img src = "img/min.jpg" />
<!--放大镜,在原图不上的小块-->
< div id = "slider" ></ div >
</ div >
<!--放大镜区域-->
< div id = "big" >
< img src = "img/max.jpg" />
</ div >
< script type = "text/javascript" >
var small = document .getElementById( "small" );
var slider = document .getElementById( "slider" );
var big = document .getElementById( "big" );
var bigImg = document .getElementsByTagName( "img" )[ 1 ];
//让slider跟随鼠标移动.给小的方块绑定事件
small. onmousemove = function ( e ) {
var even = e || event ;  //兼容火狐浏览器
var x = even.clientX - small.offsetLeft - slider.offsetWidth / 2 ;
var y = even.clientY - small.offsetTop - slider.offsetHeight / 2 ;
//水平方向的最大值
var maxX = small.clientWidth - slider.clientWidth;
//竖直方向的最大值
var maxY = small.clientHeight - slider.clientHeight;
if (x < 0 ){
//相当于超出左侧,超出左侧时,拉回
x = 0 ; 
}
//超出右侧时拉回
if (x > maxX){
x = maxX;
}
//顶部超出
if (y < 0 ){
y = 0 ;
}
//底部超出
if (y > maxY){
y = maxY;
}
slider. style .top = y + "px" ;
slider. style .left = x + "px" ;
//放大的图片的主要实现代码:一个比例计算
big.scrollLeft = x / maxX * (bigImg.clientWidth - big.clientWidth) ;
big.scrollTop = y / maxY * (bigImg.clientHeight - big.clientHeight) ;
}
//鼠标移入事件
small. onmouseenter = function (){
//鼠标移入到原图时候实现,上面出现的小的方块
slider. style .display = "block" ;
//右侧的大图区域显示出来图片
big. style .display = "block" ;
}
//添加鼠标移出事件,鼠标移出原图的时候,
small. onmouseleave = function (){
slider. style .display = "none" ;
}
</ script >

</ body >

</ html >

二:JQ实现的放大镜

JQ插件实现主要是利用zoom插件实现的,在这我只是实现了基本的放大镜的效果,zoom插件中的更多属性,如果你们要用的话,记得问度娘哈,用zoom插件,有很多的局限性,首先说的命名的要求: 小的图片叫1.jpg的时候,大的图片就叫1big.jpg,虽然有这个要求,但是实现淘宝放大镜的效果,还是很容易的,比着写JS逻辑,这种方法真的是非常简洁,方便,小伙伴们在用这个插件的时候,要注意图片要放到一个文件夹中,并且图片的命名有要求哦

<! DOCTYPE html>

< html >
< head >
< meta charset = "UTF-8" >
< title >JQ放大镜</ title >
< style type = "text/css" >
* {
margin : 0 ;
padding : 0 ;
}
#zoom {
width : 300 px ;
height : 300 px ;
/*border: 5px solid gold;*/
/*一个放在div里面的时候,下面会有一些空隙,下面是解决办法*/
/*vertical-align: top;*/
}
/*必须选泽这个选择器*/
#zoom > img {
width : 100 % ;
}
</ style >
</ head >
< body >
<!--首先用插件需要注意的是:
1.起名:小的叫1.jpg的时候,大的就叫1big.jpg.
2.导入两个插件:jq/jquery-2.2.4.min.js和jq/jzoom.min.js.
-->
< div id = "zoom" >
< img src = "img/1.jpg" />
</ div >
< script src = "jq/jquery-2.2.4.min.js" type = "text/javascript" charset = "utf-8" ></ script >
< script src = "jq/jzoom.min.js" type = "text/javascript" charset = "utf-8" ></ script >
< script type = "text/javascript" >
/*
 JQ插件的使用:
 1.因为插件是在jq的基础上开发的,所有必须事先导入jq框架.
 2.调用插件里的方法,参考对应插件提供商的API(application programing interface).
 * */
$( "#zoom" ).jzoom({
width : 400 ,    //生成的放大的宽高
height : 400 ,
position : "right" , //想要改变放大的图片的位置的属性
offsetX : 100 ,  // 原图与生成的图片的之间的距离
offsetY : 300 ,
suffixName : "big"

});

</ script >
</ body >

</ html >

第一次写,希望可以帮助到你们,谢谢你们的浏览.天天好心情