C# 视角
ASP.Net 视角
JS中图片放大效果的实现
- 摘要：这里介绍各种图片放大镜的实现，希望对各位有所帮助
演示示例
- 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倍大小
}); 
PS:为了避免ff下的出问题（在ff下如果网页加载实在太慢，可能无法获取图片大小）最好将代码放在onload中执行
update: 感谢danica7773，按其建议2009-11-15 21:40,加上 自定义显示层的样式，显示和隐藏的事件， 2009-11-16 11:00， 添加参数自定义位置 默认viewerPos:{h:10,v:0}，h,v为负数时分别表示左边和上边
打印页面
收藏文章
关闭
该文章已有条评论
我要发表评论
