javascript图片放大效果

本文转自：http://www.cnblogs.com/sohighthesky/archive/2009/11/15/imagezoom.html

 

类似京东的商品展示效果，先查看演示示例

1.图片和放大使用不同的图片，并指定显示的方位（大小图片要比例相同）
也可以指定放大倍数（相对于小图片计算）

new imageZoom("img1",{

//mul:6,//指定放大的倍数

viewerPos:{h:-10},//显示到指定位置(默认值为：{h:10,v:0})，h:-10表示左边偏移10像素

onShow:function() {

document.title="show,you are moving on the image.";

},

onHide:function() {

document.title="you mouse move out the image";

},

bigImg:"http://images.cnblogs.com/cnblogs_com/sohighthesky/218523/r_tong.jpg"//指定放大图片路径

});

new imageZoom("img1",{ //mul:6,//指定放大的倍数 viewerPos:{h:-10},//显示到指定位置(默认值为：{h:10,v:0})，h:-10表示左边偏移10像素 onShow:function() { document.title="show,you are moving on the image."; }, onHide:function() { document.title="you mouse move out the image"; }, bigImg:"http://images.cnblogs.com/cnblogs_com/sohighthesky/218523/r_tong.jpg"//指定放大图片路径 });

2.使用同一图片
给小图片设定宽或高，这里指定了:style="height:300px;" ，(偷懒模式，^o^,后面几个也是这样）

new imageZoom("dd2",{//第一个参数指定一个图片或者其id（也可以为图片的容器或者id,容器中第一个子元素要为图片）

//mul:3

});

new imageZoom("dd2",{//第一个参数指定一个图片或者其id（也可以为图片的容器或者id,容器中第一个子元素要为图片） //mul:3 });

3.放大图片显示到指定的容器中

new imageZoom("img3",{

viewer:"imgshow"//指定要显示的div或者其id

});

new imageZoom("img3",{ viewer:"imgshow"//指定要显示的div或者其id });

图片预览：

4.显示大图的div以指定倍数

new imageZoom("img4",{

mul:5,//放大5倍

viewerCla:"cla",

viewerPos:{h:2,v:-1},

viewerMul:1.2//展示层以小图片的1.2倍大小

});

new imageZoom("img4",{ mul:5,//放大5倍 viewerCla:"cla", viewerPos:{h:2,v:-1}, viewerMul:1.2//展示层以小图片的1.2倍大小 });

点击下载js源码
PS:为了避免ff下的出问题（在ff下如果网页加载实在太慢，可能无法获取图片大小）最好将代码放在onload中执行
update: 感谢danica7773，按其建议2009-11-15 21:40,加上 自定义显示层的样式，显示和隐藏的事件， 2009-11-16 11:00， 添加参数自定义位置 默认viewerPos:{h:10,v:0}，h,v为负数时分别表示左边和上边