演示示例
- 1.图片和放大使用不同的图片(大小图片要比例相同)
也可以指定放大倍数(相对于小图片计算) new imageZoom("img1",{
//mul:6,//指定放大的倍数
onShow:function() {
document.title="show,you are moving on the image.";
},
onHide:function() {
document.title="you mouse move out the image";
},
bigImg:"../images/tong.jpg"//指定放大图片路径
});
- 2.使用同一图片
给小图片设定宽或高,这里指定了:style="height:300px;" ,(偷懒模式,^o^,后面几个也是这样) new imageZoom("dd2",{//第一个参数指定一个图片或者其id(也可以为图片的容器或者id,容器中第一个子元素要为图片)
//mul:3
});
-
- 3.放大图片显示到指定的容器中
new imageZoom("img3",{
viewer:"imgshow"//指定要显示的div或者其id
})
- 图片预览:
- 4.显示大图的div以指定倍数
new imageZoom("img4",{
mul:5,//放大5倍
viewerCla:"cla",//指定显示层的样式
viewerMul:1.2//展示层以小图片的1.2倍大小
});
点击下载js源码 PS:为了避免ff下的出问题(在ff下如果网页加载实在太慢,可能无法获取图片大小)最好将代码放在onload中执行
update: 2009-11-15 21:40,感谢danica7773,按其建议加上 自定义显示层的样式,显示和隐藏的事件