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

来源：互联网发布：淘宝客服怎么应聘编辑：程序博客网时间：2024/05/21 09:06

今天总结了一下,关于淘宝放大镜实现的两种方式,一种是用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;

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

<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>放大镜效果</title>
<styletype="text/css">
*{
margin:0;
padding:0;
}
#small{
width:300px;
height:300px;
/*border: 2px solid yellow;*/
}
#small>img{
width:300px;
height:300px;
}
#slider{
width:140px;
height:140px;
background:rgba(135,135,135,0.4);
position:absolute;
top:0;
display:none;
}
#big{
width:300px;
height:300px;
position:absolute;
top:0;
left:350px;
/*border: 2px solid red;*/
overflow:hidden;
display:none;
}
</style>
</head>
<body>

<divid="small">
<imgsrc="img/min.jpg"/>

<divid="slider"></div>
</div>

<divid="big">
<imgsrc="img/max.jpg"/>
</div>
<scripttype="text/javascript">
varsmall=document.getElementById("small");
varslider=document.getElementById("slider");
varbig=document.getElementById("big");
varbigImg=document.getElementsByTagName("img")[1];
//让slider跟随鼠标移动.给小的方块绑定事件
small.onmousemove=function(e) {
vareven=e||event; //兼容火狐浏览器
varx=even.clientX-small.offsetLeft-slider.offsetWidth/2;
vary=even.clientY-small.offsetTop-slider.offsetHeight/2;
//水平方向的最大值
varmaxX=small.clientWidth-slider.clientWidth;
//竖直方向的最大值
varmaxY=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逻辑,这种方法真的是非常简洁,方便,小伙伴们在用这个插件的时候,要注意图片要放到一个文件夹中,并且图片的命名有要求哦

<!DOCTYPEhtml>

<html>
<head>
<metacharset="UTF-8">
<title>JQ放大镜</title>
<styletype="text/css">
*{
margin:0;
padding:0;
}
#zoom{
width:300px;
height:300px;
/*border: 5px solid gold;*/
/*一个放在div里面的时候,下面会有一些空隙,下面是解决办法*/
/*vertical-align: top;*/
}
/*必须选泽这个选择器*/
#zoom>img{
width:100%;
}
</style>
</head>
<body>

<divid="zoom">
<imgsrc="img/1.jpg"/>
</div>
<scriptsrc="jq/jquery-2.2.4.min.js"type="text/javascript"charset="utf-8"></script>
<scriptsrc="jq/jzoom.min.js"type="text/javascript"charset="utf-8"></script>
<scripttype="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>

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

1 0