有点迷惘|技术blog本文章是利用了jquery图片放大镜效果插件来实例图片放大，下面我们收藏了三款关于图片放大镜效果的实例，看看那款适合你哦。
<!doctype html public “-//w3c//dtd xhtml 1.0 transitional//en” “http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=gb2312″ />
<title>三款jquery图片放大镜效果代码</title>
<script type=”text/网页特效”>$(function() {
var options3 =
{
zoomwidth: 200,
zoomheight: 200,
xoffset: 20,
title: false,
lens:false}
$(“.jqzoom”).jqzoom(options3);
});
</script></head>
<body>
<script src=”../js/jquery-1.3.2.min.js” type=”text/javascript”></script>
<script src=”../js/jqzoom.pack.1.0.1.js” type=”text/javascript”></script>然后再引入一个css教程
<link rel=”stylesheet” href=”../css/jqzoom.css” type=”text/css”>
接着是两张大图和小图
<a href=”kawasakigreen.jpg” class=”jqzoom” style=”” title=”kawasaki”>
<img src=”kawasakigreen_small.jpg” border=”0″ style=”border: 1px solid #666;” title=”kawasakigreen”></a>
这里注意的是一张大图,一张小图,并且”kawasakigreen_small.jpg”这个小图中,那个title是要出现在放大镜里的文字标题
</body>
</html>
实例二
<!doctype html public “-//w3c//dtd html 4.01//en” “http://www.w3.org/tr/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″>
<title>magnifier</title>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
<script type=”text/javascript”>
var magnifier = {imgurl:null,
imgcontainer:null,
imgscale:null,init:function(url,imagecontainer,scale)
{
this.imgurl = url;
this.imgscale = scale;
this.imgcontainer = imagecontainer;var browserdiv = document.createelement(‘div’);
jquery(browserdiv)
.attr( ‘id’,’imagebrowser’ )
.css(
{
position :’absolute’,
border :’1px #000 solid’,
zindex :20
}
).hide();
imagecontainer.append(browserdiv);var bigimagediv = document.createelement(‘div’);
jquery(bigimagediv)
.attr( ‘id’,’bigimagediv’ )
.css(
{
overflow :’hidden’,
position :’absolute’,
border :’1px #000 solid’,
zindex :100
}
).hide();
jquery(‘body’).append(bigimagediv);var bigimage = document.createelement(‘img’);
jquery(bigimage)
.attr(
{
id :’bigimage’,
src :url
}
)
.css(
{
position :’absolute’
}
);
jquery(‘#bigimagediv’).append(bigimage);imagecontainer.mousemove(magnifier.start);
imagecontainer.mouseo教程ut(magnifier.end);
},start:function(e)
{
e = magnifier.fixe(e);
var scale = magnifier.imgscale;
var x = magnifier.getmouse(e).x;
var y = magnifier.getmouse(e).y;
var browserdivw = jquery(‘#magnifier img’).width()/scale;
var browserdivh = jquery(‘#magnifier img’).height()/scale;
var positionimage = magnifier.imgcontainer.offset();
var browserdivt = y – browserdivh/2 – positionimage.top;
var browserdivl = x – browserdivw/2 – positionimage.left;
if( browserdivt <= 0 ) browserdivt = 0;
if( browserdivl <= 0 ) browserdivl = 0;
if( browserdivt >= magnifier.imgcontainer.height() – browserdivh – 2 ){
browserdivt = magnifier.imgcontainer.height() – browserdivh – 2;
};
if( browserdivl >= magnifier.imgcontainer.width() – browserdivw – 2 ){
browserdivl = magnifier.imgcontainer.width() – browserdivw – 2;
};
jquery(‘#imagebrowser’)
.css(
{
width :browserdivw + ‘px’,
height :browserdivh + ‘px’,
top :browserdivt + ‘px’,
left :browserdivl + ‘px’
}
);
jquery(‘#imagebrowser:hidden’).show();jquery(‘#bigimagediv’)
.css(
{
width :magnifier.imgcontainer.innerwidth() + ‘px’,
height :magnifier.imgcontainer.innerheight() + ‘px’,
top:positionimage.top + ‘px’,
left:positionimage.left + magnifier.imgcontainer.width() + 10 + ‘px’
}
);
jquery(‘#bigimagediv:hidden’).show();jquery(‘#bigimage’)
.css(
{
width :magnifier.imgcontainer.innerwidth()*scale + ‘px’,
height :magnifier.imgcontainer.innerheight()*scale + ‘px’,
top : -(jquery(‘#imagebrowser’).offset().top – positionimage.top) * scale + ‘px’,
left : -(jquery(‘#imagebrowser’).offset().left – positionimage.left) * scale + ‘px’
}
);
},end:function(e)
{
e = magnifier.fixe(e);
var toobj = e? e.relatedtarget:event.toelement;
if (toobj.tagname == “div” || toobj == this)
{
return;
};
jquery(‘#imagebrowser’).hide();
jquery(‘#bigimagediv’).hide();
},fixe:function(e)
{
if(typeof e == ‘undefined’)
{
e = window.event;
e.target = e.srcelement;
e.layerx = e.offsetx;
e.layery = e.offsety;
}
return e;
},getmouse:function(e)
{
e=e||window.event;
return pointer = {
x:e.pagex || (e.clientx + (document.documentelement.scrollleft || document.body.scrollleft)),
y:e.pagey || (e.clienty + (document.documentelement.scrolltop || document.body.scrolltop ))
};
}
}jquery(document).ready(function(){
magnifier.init(“catch/2008/2/20/1203479158450.jpg”, jquery(‘#magnifier’), 5);
});
</script>
<style>
#magnifier {
width: 300px;
height: 400px;
position:absolute;
top:100px;
left:100px;
}
#magnifierimg {
width: 300px;
height: 400px;
}
</style>
</head>
<body>
<div id=”magnifier”>
<img src=”http:/20/1203479158450.jpg” id=”magnifierimg” />
</div>
</body>
</html>
jquery图片放大效果三
image power zoomer是一款效果很棒的基于jquery图片放大镜特效，鼠标在图片移动时即显示一个放大的图片局部，还可以根据需要用鼠标滚轮调整放大倍数。代码调用简单，只需要二个js文件，图片只需加上一个class类即可。
1.在<head>区的代码
<script type=”text/javascript” src=”http://ajax.lug.ustc.edu.cn/ajax/libs/jquery/1.4.2/jquery.min.js”></script>
<script type=”text/javascript” src=”ddpowerzoomer.js”></script>
<script type=”text/javascript”>
jquery(document).ready(function($){ //fire on dom ready $(‘img#gallerya’).addpowerzoom({magnifiersize:[100,100]}) $(‘img.gallery’).addpowerzoom({powerrange:[2,5]})})</script>
2.在<body>区图片代码示例
<img class=”gallery” border=”0″ src=”budapest.jpg” style=”width:339px;height:225px”>图片只需要加入class=”gallery
“类即可。
个人推荐使用第一种和第三种，如果你只是放大一张图片，那么用第三种比较好，如果你要放大多张图片推荐使用第一种方式，第二种方式的话 代码有点繁琐。。