搜索:
首页 >> 下载中心 >> JavaScript源码 >> javascript图片放大效果源码

javascript图片放大效果源码

2010-6-21 来源:sohighthesky 投递文章

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

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"//指定放大图片路径
});

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",
    viewerPos:{h:2,v:-1},
    viewerMul:1.2//展示层以小图片的1.2倍大小
});

远程下载:点击下载js源码  或本地下载 imageZoom.js (4.67 KB)

PS:为了避免ff下的出问题(在ff下如果网页加载实在太慢,可能无法获取图片大小)最好将代码放在onload中执行

update: 感谢danica7773,按其建议2009-11-15 21:40,加上 自定义显示层的样式,显示和隐藏的事件, 2009-11-16 11:00, 添加参数自定义位置 默认viewerPos:{h:10,v:0},h,v为负数时分别表示左边和上边

相关文章
手机版 JavaScript源码 Asp之家 Aspxhome.com
闽ICP备06017341号