jquery图片放大镜代码解析注释

(function($){//定义作用域

$fnimagezoom=function(options){/自定义插件imageszoom，options代表形参（属性自定义）/

var settings={

xzoom: 350, /放大图的宽度(默认是 350)/

yzoom: 350, /放大图的高度(默认是 350)/

offset: 10, /离原图的距离(默认是 10)/

position: "right", /放大图的定位(默认是 "right")/

preload:1

};

if(options){

$extend(settings,options);

}

var noalt='';

var self=this;

$(this)bind("mouseenter",function(ev){/鼠标经过时添加一个事件处理程序/

var imageLeft=$(this)offset()left;

var imageTop=$(this)offset()top;

var imageWidth=$(this)get(0)offsetWidth;

var imageHeight=$(this)get(0)offsetHeight;

var boxLeft=$(this)parent()offset()left;

var boxTop=$(this)parent()offset()top;

var boxWidth=$(this)parent()width();

var boxHeight=$(this)parent()height();

noalt=$(this)attr("alt");

var bigimage=$(this)attr("rel");

$(this)attr("alt",'');

if($("divzoomDiv")get()length==0){

$(documentbody)append("<div class='zoomDiv'><img class='bigimg' src='"+bigimage+"'/></div>"+

"<div class='zoomMask'> </div>");

}

if(settingsposition=="right"){

if(boxLeft+boxWidth+settingsoffset+settingsxzoom>screenwidth){

leftpos=boxLeft-settingsoffset-settingsxzoom;

}else{

leftpos=boxLeft+boxWidth+settingsoffset;

}

}else{

leftpos=imageLeft-settingsxzoom-settingsoffset;

if(leftpos<0){

leftpos=imageLeft+imageWidth+settingsoffset;

}

}

$("divzoomDiv")css({top:boxTop,left:leftpos});

$("divzoomDiv")width(settingsxzoom);

$("divzoomDiv")height(settingsyzoom);

$("divzoomDiv")show();

$(this)css('cursor','crosshair');/光标呈现十字线/

$(documentbody)mousemove(function(e){/当移动鼠标时/

mouse=new MouseEvent(e);

if(mousex<imageLeft||mousex>imageLeft+imageWidth||mousey<imageTop||mousey>imageTop+imageHeight){

mouseOutImage();/判断鼠标是否超出范围/

return;

}

var bigwidth=$("bigimg")get(0)offsetWidth;/最大宽度/

var bigheight=$("bigimg")get(0)offsetHeight;/最大高度/

var scaley='x';/x轴比例 /

var scalex='y';/y轴比例 /

/随鼠标移动显示大图/

if(isNaN(scalex)|isNaN(scaley)){/x、y轴比例不是数字时/

var scalex=(bigwidth/imageWidth);

var scaley=(bigheight/imageHeight);

$("divzoomMask")width((settingsxzoom)/scalex);

$("divzoomMask")height((settingsyzoom)/scaley);

$("divzoomMask")css('visibility','visible');/规定元素可见/

}

xpos=mousex-$("divzoomMask")width()/2;

ypos=mousey-$("divzoomMask")height()/2;

xposs=mousex-$("divzoomMask")width()/2-imageLeft;

yposs=mousey-$("divzoomMask")height()/2-imageTop;

xpos=(mousex-$("divzoomMask")width()/2<imageLeft)

imageLeft:(mousex+$("zoomMask")width()/2>imageWidth+imageLeft)

(imageWidth+imageLeft-$("divzoomMask")width()):xpos;

ypos=(mousey-$("divzoomMask")height()/2<imageTop)

imageTop:(mousey+$("divzoomMask")height()/2>imageHeight+imageTop)

(imageHeight+imageTop-$("divzoomMask")height()):ypos;

$("divzoomMask")css({top:ypos,left:xpos});

$("divzoomDiv")get(0)scrollLeft=xpossscalex;

$("divzoomDiv")get(0)scrollTop=ypossscaley;

});

});

function mouseOutImage(){/定义鼠标离开方法/

$(self)attr("alt",noalt);

$(documentbody)unbind("mousemove");/移除在页面中鼠标指针事件/

$("divzoomMask")remove();/移除所有的divzoomMask/

$("divzoomDiv")remove();/移除所有的divzoomDiv/

}

count=0;

if(settingspreload){

/在boby元素的结尾（仍然在内部）插入指定内容/

$('body')append("<div style='display:none;' class='jqPreload"+count+"'></div>");

$(this)each(function(){/规定为每个匹配元素规定运行的函数/

var imagetopreload=$(this)attr("rel");/预加载/

var content=jQuery('jqPreload'+count+'')html();

jQuery('jqPreload'+count+'')html(content+'<img src=\"'+imagetopreload+'\">');

});

}

}

})(jQuery);

function MouseEvent(e){/记录鼠标x，y坐标/

thisx=epageX;/鼠标指针位置/

thisy=epageY;

}

$('div')width();

$width 没有这么写的吧

如果div 没有设置宽度 且没有内容 那么宽度应该是0

如果你是利用jquery 后加入内容到div中去 计算宽度时也有可能是0；

$("#msg")css("background"); //返回元素的背景颜色

$("#msg")css("background","#ccc") //设定元素背景为灰色

$("#msg")height(300); $("#msg")width("200"); //设定宽高

$("#msg")css({ color: "red", background: "blue" });//以名值对的形式设定样式

$("#msg")addClass("select"); //为元素增加名称为select的class

$("#msg")removeClass("select"); //删除元素名称为select的class

$("#msg")toggleClass("select"); //如果存在（不存在）就删除（添加）名称为select的class

在页面加载结束后，浏览器会通过js为dom元素添加事件。原生的js中使用 windowonload 方法;在JQ中使用$(document)ready()。这个方法在dom载入就绪时对其进行 *** 纵并调用执行它所绑定的函数。

那么它和windowonload有何不同呢？

windowonload是在网页中所有元素 加上所有资源 ++完全加++载到浏览器后才执行。

而$(document)ready()中绑定的事件是在 dom完全就绪 时就可以被调用，此时对于jQuery来说都是可以被访问的（关联的资源可能并没有被加载完毕）。

举个例子来说，在$(document)ready()中定义了的宽高，但由于此时还没有被加载完毕，此时的宽高不会生效。要解决这个问题可以使用jQuery中的 load ()方法。

load()方法会在元素的onload事件中绑定一个处理函数，如果该处理函数绑定给window对象，则会在所有资源加载完毕后触发，如果load绑定在元素上则会在该元素加载完毕后触发。

既然windowonload比较完备为什么还要用jQuery中的$(document)ready()呢？

windowonload事件 每次只能保存对一个函数的引用 ，他会覆盖掉之前的函数，所以不能再现有行为上添加新的行为。如果引用了多个js文件，每个都需要windowonload方法就导致编码复杂。

使用$(document)ready()方法能够很好地解决这种问题，每次调用$documentready()方法都会在现有行为上追加新的行为，这些行为会根据注册顺序依次执行。

<body>

<div style="border: 1px solid red;height:200px;width: 200px;"></div>

<script>

$(function(){

alert($("div")[0]offsetWidth)

})

 

</script>

</body>

这是我刚写的一个例子，你可以看一下，可能不太好。

下面这两个是我在网上搜到直接复制的

标签元素的宽高值获取

//绝对宽度

ObjoffsetWidth

//绝对高度

ObjoffsetHeight

以上就是关于jquery图片放大镜代码解析注释全部的内容，包括:jquery图片放大镜代码解析注释、为什么jQuery中的$width获得的值为0、jq怎样获取元素样式的数值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！