jquery图片放大-基于jquery的滚动鼠标放大缩小图片效果

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

$.=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($("").get().length==0){

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

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

}

if(=="right"){

if(boxLeft+boxWidth++>){

leftpos=;

}else{

leftpos=boxLeft+boxWidth+;

}

}else{

leftpos=;

if(leftpos<0){

leftpos=imageLeft+imageWidth+;

}

}

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

$("").width();

$("").height();

$("").show();

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

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

mouse=new MouseEvent(e);

if(mouse.x<imageLeft||mouse.x>imageLeft+imageWidth||mouse.y<imageTop||mouse.y>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);

$("").width(()/scalex);

$("").height(()/scaley);

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

}

xpos=mouse.x-$("").width()/2;

ypos=mouse.y-$("").height()/2;

xposs=mouse.x-$("").width()/2-imageLeft;

yposs=mouse.y-$("").height()/2-imageTop;

xpos=(mouse.x-$("").width()/2<imageLeft)

? imageLeft:(mouse.x+$(".zoomMask").width()/2>imageWidth+imageLeft)

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

ypos=(mouse.y-$("").height()/2<imageTop)

? imageTop:(mouse.y+$("").height()/2>imageHeight+imageTop)

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

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

$("").get(0).scrollLeft=xposs*scalex;

$("").get(0).scrollTop=yposs*scaley;

});

});

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

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

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

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

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

}

count=0;

if(){

/*在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坐标*/

this.x=e.pageX;/*鼠标指针位置*/

this.y=e.pageY;

}

今天要出个鼠标滚动放大缩小图片的功能,看似很简单,从网上一搜,出现的都是onmousewheel的例子,全部只支持IE浏览器,结果查出火狐有对应的DOMMouseScroll来处理这个功能,代码如下,并加上注意的注释项:

复制代码

代码如下:

$(function(){

$(".body

img").each(function(){

if($.){

$(this).bind("mousewheel",function(e){

var

e=e||event,v=e.wheelDelta||e.detail;

if(v>0)

resizeImg(this,false);//放大图片呗

else

resizeImg(this,true);//缩小图片喽

=

false;//去掉浏览器默认滚动事件

//e.stopPropagation();

return

false;

})

}else{

$(this).bind("DOMMouseScroll",function(event){

if(<0)

resizeImg(this,false);

else

resizeImg(this,true);

()//去掉浏览器默认滚动事件

//();

})

}

});

function

resizeImg(node,isSmall){

if(!isSmall){

$(node).height($(node).height()*1.2);

}else

{

$(node).height($(node).height()*0.8);

}

}

});

本文的demo请点击这里:滚动鼠标放大缩小图片效果

这个现在可以用css3来完成来;

transform: rotate(90deg) 旋转90度

transform: scale(1.2); 放大1.2倍