使用纯javascript实现放大镜效果
jd或者淘宝的具体商品有个放大镜的效果。虽然网上类似插件琳琅满目，应用到项目上有诸多不便，自己抽点时间自己写了个类似插件，积累下代码，何乐而不为呢!!let‘go:
打算把此特效封装成个插件，先把最基本的算法实现，然后再一步步封装吧：
最终实现效果：
html代码：
<divid="Magnifier"></div>
css代码：
<style>
*{
margin:0;
padding:0;
}
</style>
貌似什么都没有，开始咱们强大的js之旅吧：
javascript代码：
functioncreateElement(MagnifierId,sImg,bImg){
varMagnifier=$(MagnifierId);
Magnifier.style.position='relative';
//小图div
varsmallDiv=$Create("div");
smallDiv.setAttribute("id","small");
smallDiv.style.position="absolute";
//遮罩层
varmask=$Create("div");
mask.setAttribute("id","mask");
mask.style.position="absolute";
//镜片
varmirror=$Create("div");
mirror.setAttribute("id","mirror");
mirror.style.opacity=0.3;
mirror.style.position="absolute";
mirror.style.display="none";
//小图
varsmallImg=$Create("img");
smallImg.setAttribute("src",sImg);
smallImg.setAttribute("id","smallImg");
smallImg.onload=function(){
//如果没设置放大镜的height或者width根据小图大小设置放大镜大小
if(!Magnifier.offsetHeight){
Magnifier.style.width=this.offsetWidth+"px";
Magnifier.style.height=this.offsetHeight+"px";
}
//遮罩层大小和小图一样
mask.style.opacity="0";
mask.style.width=this.width+'px';
mask.style.height=this.height+"px";
mask.style.zIndex=2;
bigDiv.style.left=this.width+5+"px";
bigDiv.style.top="-5px";
}
smallDiv.appendChild(mask);
smallDiv.appendChild(mirror);
smallDiv.appendChild(smallImg);
//视窗
varbigDiv=$Create("div");
bigDiv.setAttribute("id","big");
bigDiv.style.position="absolute";
bigDiv.style.overflow="hidden";
bigDiv.style.display="none";
varbigImg=$Create("img");
bigImg.setAttribute("src",bImg);
bigImg.setAttribute("id","bigImg");
bigImg.style.position="absolute";
bigDiv.appendChild(bigImg);
Magnifier.appendChild(smallDiv);
Magnifier.appendChild(bigDiv);
}
functionsetMagnifierStyle(mirrorStyle,shichuangStyle){
//mirror
for(variteminmirrorStyle){
mirror.style[item]=mirrorStyle[item];
}
for(variteminshichuangStyle){
$("big").style[item]=shichuangStyle[item];
}
}
functionregisterEvent(){
$("mask").onmouseover=function(){
$("big").style.display="block";
mirror.style.display="block";
}
$("mask").onmouseout=function(){
$("big").style.display="none";
mirror.style.display="none";
}
$("mask").onmousemove=function(evt){
varoEvent=evt||event;
vardisX=oEvent.offsetX;
vardisY=oEvent.offsetY;
varmirrorLeft=disX-mirror.offsetWidth/2;
varmirrorTop=disY-mirror.offsetHeight/2;
if(mirrorLeft<0){
mirrorLeft=0;
}
elseif(mirrorLeft>mask.offsetWidth-mirror.offsetWidth){
mirrorLeft=mask.offsetWidth-mirror.offsetWidth;
}
if(mirrorTop<0){
mirrorTop=0;
}
elseif(mirrorTop>mask.offsetHeight-mirror.offsetHeight){
mirrorTop=mask.offsetHeight-mirror.offsetHeight;
}
mirror.style.top=mirrorTop+"px";
mirror.style.left=mirrorLeft+"px";
varpaX=mirrorTop/(mask.offsetHeight-mirror.offsetHeight);
varpaY=mirrorLeft/(mask.offsetWidth-mirror.offsetWidth);
$("bigImg").style.top=-paX*($("bigImg").offsetHeight-$("big").offsetHeight)+"px";
$("bigImg").style.left=-paY*($("bigImg").offsetWidth-$("big").offsetWidth)+"px";
}
}
function$(id){
returndocument.getElementById(id);
}
function$Create(type){
returndocument.createElement(type);
}
最后再onload小小的调用一下：
window.onload=function(){
createElement("Magnifier","images/Magnifier/small.jpg","images/Magnifier/big.jpg");
setMagnifierStyle({"width":"30px","height":"30px","backgroundColor":"#fff"},{"width":"250px","height":"250px"});
registerEvent();
}
效果总算出来了耶，
2.接下来咱们封装吧：
Magnifer类代码：
functionMagnifier(
MagnifierId, //放大镜容器ID
sImg, //小图片src
bImg, //大图片src
mirrorStyle, //小图片里镜片样式，json格式数据
ViewStyle //预览视窗样式，json格式数据
){
var_this=this;
this.MagnifierContainer=null; //容器
this.smallDiv=null; //小图容器
this.mask=null; //小图遮罩层
this.mirror=null; //小图镜片
this.smallImg=null; //小图
this.bigDiv=null; //预览视图
this.bigImg=null; //大图
varinit=function(){
_this.MagnifierContainer=_this.$(MagnifierId);
_this.createElement(sImg,bImg);
_this.setMagnifierStyle(mirrorStyle,ViewStyle);
_this.MainEvent();
}
init();
}
Magnifier.prototype.createElement=function(sImg,bImg){
var_this=this;
var$Create=this.$Create;
this.MagnifierContainer.style.position='relative'; //脱离文档流，视情况修改
this.smallDiv=$Create("div");
this.smallDiv.setAttribute("id","small");
this.smallDiv.style.position="absolute";
this.mask=$Create("div");
this.mask.setAttribute("id","mask");
this.mask.style.position="absolute";
this.mirror=$Create("div");
this.mirror.setAttribute("id","mirror");
this.mirror.style.opacity=0.3;
this.mirror.style.position="absolute";
this.mirror.style.display="none";
this.smallImg=$Create("img");
this.smallImg.setAttribute("src",sImg);
this.smallImg.setAttribute("id","smallImg");
this.smallImg.onload=function(){
//如果没设置放大镜的height或者width根据小图大小设置放大镜大小
if(!_this.MagnifierContainer.offsetHeight){
_this.MagnifierContainer.style.width=this.offsetWidth+"px";
_this.MagnifierContainer.style.height=this.offsetHeight+"px";
}
//遮罩层大小和小图一样
_this.mask.style.opacity="0";
_this.mask.style.width=this.offsetWidth+'px';
_this.mask.style.height=this.offsetHeight+"px";
_this.mask.style.zIndex=2;
_this.bigDiv.style.left=this.offsetWidth+5+"px";
_this.bigDiv.style.top="-5px";
}
this.smallDiv.appendChild(this.mask);
this.smallDiv.appendChild(this.mirror);
this.smallDiv.appendChild(this.smallImg);
this.bigDiv=$Create("div");
this.bigDiv.setAttribute("id","big");
this.bigDiv.style.position="absolute";
this.bigDiv.style.overflow="hidden";
this.bigDiv.style.display="none";
this.bigImg=$Create("img");
this.bigImg.setAttribute("src",bImg);
this.bigImg.setAttribute("id","bigImg");
this.bigImg.style.position="absolute";
this.bigDiv.appendChild(this.bigImg);
this.MagnifierContainer.appendChild(this.smallDiv);
this.MagnifierContainer.appendChild(this.bigDiv);
}
Magnifier.prototype.setMagnifierStyle=function(mirrorStyle,ViewStyle){
for(variteminmirrorStyle){
this.mirror.style[item]=mirrorStyle[item];
}
deleteitem;
for(variteminViewStyle){
this.bigDiv.style[item]=ViewStyle[item];
}
}
Magnifier.prototype.MainEvent=function(){
var_this=this;
this.mask.onmouseover=function(){
_this.bigDiv.style.display="block";
_this.mirror.style.display="block";
}
this.mask.onmouseout=function(){
_this.bigDiv.style.display="none";
_this.mirror.style.display="none";
}
this.mask.onmousemove=function(evt){
varoEvent=evt||event;
vardisX=oEvent.offsetX||oEvent.layerX; //兼容ff
vardisY=oEvent.offsetY||oEvent.layerY;
varmirrorLeft=disX-_this.mirror.offsetWidth/2;
varmirrorTop=disY-_this.mirror.offsetHeight/2;
if(mirrorLeft<0){
mirrorLeft=0;
}
elseif(mirrorLeft>this.offsetWidth-_this.mirror.offsetWidth){
mirrorLeft=this.offsetWidth-mirror.offsetWidth;
}
if(mirrorTop<0){
mirrorTop=0;
}
elseif(mirrorTop>this.offsetHeight-_this.mirror.offsetHeight){
mirrorTop=this.offsetHeight-_this.mirror.offsetHeight;
}
_this.mirror.style.top=mirrorTop+"px";
_this.mirror.style.left=mirrorLeft+"px";
varpaX=mirrorTop/(this.offsetHeight-_this.mirror.offsetHeight);
varpaY=mirrorLeft/(this.offsetWidth-_this.mirror.offsetWidth);
_this.bigImg.style.top=-paX*(_this.bigImg.offsetHeight-_this.bigDiv.offsetHeight)+"px";
_this.bigImg.style.left=-paY*(_this.bigImg.offsetWidth-_this.bigDiv.offsetWidth)+"px";
}
}
Magnifier.prototype.$=function(id){
returndocument.getElementById(id);
}
Magnifier.prototype.$Create=function(type){
returndocument.createElement(type);
}
最后在onload调用下：
window.onload=function(){
newMagnifier(
"Magnifier",
"images/Magnifier/small.jpg",
"images/Magnifier/big.jpg",
{"width":"30px","height":"30px","backgroundColor":"#fff"},
{"width":"250px","height":"250px"}
);
}
以上就是本文所述的全部内容了，希望大家能够喜欢。