13518219792
(function($){//定义作用域
创新互联建站 - 西部信息服务器托管，四川服务器租用，成都服务器租用，四川网通托管,绵阳服务器托管，德阳服务器托管，遂宁服务器托管，绵阳服务器托管，四川云主机，成都云主机，西南云主机，西部信息服务器托管，西南服务器托管，四川/成都大带宽，服务器机柜，四川老牌ＩＤＣ服务商
$.fn.imagezoom=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($("div.zoomDiv").get().length==0){
$(document.body).append("div class='zoomDiv'img class='bigimg' src='"+bigimage+"'//div"+
"div class='zoomMask' /div");
}
if(settings.position=="right"){
if(boxLeft+boxWidth+settings.offset+settings.xzoomscreen.width){
leftpos=boxLeft-settings.offset-settings.xzoom;
}else{
leftpos=boxLeft+boxWidth+settings.offset;
}
}else{
leftpos=imageLeft-settings.xzoom-settings.offset;
if(leftpos0){
leftpos=imageLeft+imageWidth+settings.offset;
}
}
$("div.zoomDiv").css({top:boxTop,left:leftpos});
$("div.zoomDiv").width(settings.xzoom);
$("div.zoomDiv").height(settings.yzoom);
$("div.zoomDiv").show();
$(this).css('cursor','crosshair');/*光标呈现十字线*/
$(document.body).mousemove(function(e){/*当移动鼠标时*/
mouse=new MouseEvent(e);
if(mouse.ximageLeft||mouse.ximageLeft+imageWidth||mouse.yimageTop||mouse.yimageTop+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);
$("div.zoomMask").width((settings.xzoom)/scalex);
$("div.zoomMask").height((settings.yzoom)/scaley);
$("div.zoomMask").css('visibility','visible');/*规定元素可见*/
}
xpos=mouse.x-$("div.zoomMask").width()/2;
ypos=mouse.y-$("div.zoomMask").height()/2;
xposs=mouse.x-$("div.zoomMask").width()/2-imageLeft;
yposs=mouse.y-$("div.zoomMask").height()/2-imageTop;
xpos=(mouse.x-$("div.zoomMask").width()/2imageLeft)
? imageLeft:(mouse.x+$(".zoomMask").width()/2imageWidth+imageLeft)
? (imageWidth+imageLeft-$("div.zoomMask").width()):xpos;
ypos=(mouse.y-$("div.zoomMask").height()/2imageTop)
? imageTop:(mouse.y+$("div.zoomMask").height()/2imageHeight+imageTop)
? (imageHeight+imageTop-$("div.zoomMask").height()):ypos;
$("div.zoomMask").css({top:ypos,left:xpos});
$("div.zoomDiv").get(0).scrollLeft=xposs*scalex;
$("div.zoomDiv").get(0).scrollTop=yposs*scaley;
});
});
function mouseOutImage(){/*定义鼠标离开图片方法*/
$(self).attr("alt",noalt);
$(document.body).unbind("mousemove");/*移除在页面中鼠标指针事件*/
$("div.zoomMask").remove();/*移除所有的div.zoomMask*/
$("div.zoomDiv").remove();/*移除所有的div.zoomDiv*/
}
count=0;
if(settings.preload){
/*在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;
}
我说一下思路吧。做放大效果的原理就是JQ获取元素并修改它的CSS。
你可以通过改变元素的width,height实现放大。也可以使用css3的transform中的2D缩放:scale()
如果是移动端或者IE9以上，推荐使用css3实现。性能效果更好。
var div = $("div");
div.css("lfet",value);
div.css("top",value)
....同理
div.width(200) // 同样也可以用上述css方式来实现。 div.css("width",value); height跟width一样。
今天要出个鼠标滚动放大缩小图片的功能，看似很简单，从网上一搜，出现的都是onmousewheel的例子，全部只支持IE浏览器，结果查出火狐有对应的DOMMouseScroll来处理这个功能，代码如下,并加上注意的注释项：
复制代码
代码如下:
$(function(){
$(".body
img").each(function(){
if($.browser.msie){
$(this).bind("mousewheel",function(e){
var
e=e||event,v=e.wheelDelta||e.detail;
if(v0)
resizeImg(this,false);//放大图片呗
else
resizeImg(this,true);//缩小图片喽
window.event.returnValue
=
false;//去掉浏览器默认滚动事件
//e.stopPropagation();
return
false;
})
}else{
$(this).bind("DOMMouseScroll",function(event){
if(event.detail0)
resizeImg(this,false);
else
resizeImg(this,true);
event.preventDefault()//去掉浏览器默认滚动事件
//event.stopPropagation();
})
}
});
function
resizeImg(node,isSmall){
if(!isSmall){
$(node).height($(node).height()*1.2);
}else
{
$(node).height($(node).height()*0.8);
}
}
});
本文的demo请点击这里：滚动鼠标放大缩小图片效果
head
title/title
script src="js/jquery-1.4.2.min.js" type="text/javascript"/script
script type="text/javascript"
$(function(){
$("span").click(function () {
var thisEle = $("#para").css("font-size");
var txtfontsize = parseInt(thisEle, 10);
var unit = thisEle.slice(-2);
var cName = $(this).attr("class");
if (cName == "bigger") {
txtfontsize += 2;
} else {
txtfontsize -= 2;
}
$("#para").css("font-size", txtfontsize + unit);
});
});
/script
/head
body
div class="msg"
div
span class="bigger"放大/span span class="smaller"缩小/span
/div
div
p id="para"
哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇 哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇 哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇 哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇
哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇 哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇
/p
/div
/div
/body
/html
第一使用方法：
1、调用lanrenzhijia.css样式
2、将你需要放大的图片，按照图中代码的格式书写
3、调用三个js，并指定你需要放大的图片a标签的id即可
第二使用方法：
