jQuery图片放大镜(原创)

所属分类:媒体-图片展示

jQuery图片放大镜(原创) ie兼容9

2017/4/17 17:29:13更新:

修改了插件的兼容性, 新增一些属性, 内置函数的调用( 下面是新的调用方法)

var magnifierConfig = {
    magnifier: "#magnifier1", //最外层的大容器
    width: 500, //承载容器宽
    height: 500, //承载容器高
    moveWidth: null, //如果设置了移动盒子的宽度,则不计算缩放比例
    zoom: 5 //缩放比例
};
var _magnifier = magnifier(magnifierConfig);
/*magnifier的内置函数调用*/
/*
//设置magnifier函数的index属性
_magnifier.setIndex(1);//重新载入主图,根据magnifier函数的index属性
_magnifier.eqImg();
*/

2017-03-06更新:

修改bug,打开控制台,让控制台在页面的下方显示,鼠标移到大图上再移开,页面往下拉,再放鼠标到大图上, 鼠标下的移动框在鼠标下面了,将点击事件改成鼠标经过事件


2017-02-28更新:

修改了鼠标放置小图依旧触发放大效果,代码不变仅修改了mousemove的绑定容器(div)

参数均为可选参数

magnifier({
    width : 500,//主容器宽
    height : 500,//主容器高
    magnifier : "#magnifier1",//主容器
});
相关插件-图片展示

轻量级jQuery画廊插件Lighterbox

lighterbox是lighterweight和可定制的灯箱画廊。一个简单的插件支持现代移动和桌面浏览器
  图片展示
 12181  9

jQuery自适应图片排列插件flexImages

flexImages是一款轻量级的jquery插件,它可轻松的创出类似谷歌图片流效果。当然,flexImages可以实现多种模式的排列,排列的对象不限于图片,可以是文本,视频等,排列中也可以显示标题,标题可以显示在图片上,也可以显示在图片下方。更多的详情可参考实例。
  图片展示
 12974  54

Intense Images―Javascript库在全屏查看图像

Intense Images是一个独立的javascript库用于查看全屏下超出屏幕大小的图片。使用触摸/鼠标位置的平移或垂直移动。
  图片展示
 8780  23

gifplayer暂停或播放GIF图片

gifplayer暂停或播放GIF图片
  图片展示
 8686  35

讨论这个项目(15)回答他人问题或分享插件使用方法奖励jQ币

    Cynthia 0
    2017/5/26 21:35:55

    你好,我的放进去不知道是不是前边代码的影响,这个放大镜只能用一点,我想问下,是不是下载的不是最新版,要手改?

    回复
    应卫爱 0
    2017/5/5 13:36:57

    静态的有用,写成动态的就报错了,js报错Uncaught TypeError: magnifier is not a function

        一方一方0
        2017/5/8 17:25:00
        你想一个页面有多个放大镜效果是吧
        一方一方1
        2017/5/8 17:31:10

        你可以这样调用,这样就能实例化多个       

        var magnifierNew = new magnifier({
            magnifier: "#magnifier1"
        });
        var magnifierNew2 = new magnifier({
            magnifier: "#magnifier2"
        });
    回复
    yoonfeng 0
    2017/4/13 14:02:10

    一个小小的建议:鼠标移动到小图时不要滚动位置

        一方一方1
        2017/5/8 17:34:36

        下载最新的js文件,看到第217行

        _this.imgMove(magnifier.index);

        把这一行注释掉就可以了

    回复
    如意宝 | 陈赵宇 0
    2017/4/12 9:36:57

    特登录感谢楼主分享,谢谢

    回复
    樱庭初雪 0
    2017/3/31 14:20:22

    就看到楼主一个人的是免费的。。。。

    回复
    CX° 0
    2017/3/17 14:39:19

    这是面相对象写的吗?

    回复
    Sophie 0
    2017/3/3 19:28:17
    endX = (X > deviationXl) ? (X < deviationXr) ? X : deviationXr : deviationXl;
    endY = (Y > deviationYt) ? (Y < deviationYb) ? Y : deviationYb : deviationYt;

    这个是怎么计算的,大神

        一方一方1
        2017/3/3 22:54:33
        这个是计算鼠标跟随div最终的位置X,Y轴。如果事件的X轴超过图片的边缘,就取图片的边缘,Y轴同理
    回复
    未及・・・・・・ 0
    2017/2/28 0:25:41

    鼠标移到小图上面居然会促发放大效果。。大bug

        一方一方0
        2017/2/28 11:10:52

        谢谢提醒,已修改

        华企方舟--李庆0
        2017/3/2 18:12:33
        还有个bug,打开控制台,让控制台在页面的下方显示,鼠标移到大图上再移开,页面往下拉,再放鼠标到大图上, 你会发现鼠标下的移动框不在鼠标下面了
        一方一方0
        2017/3/3 14:01:02

        已修改,等审核

    回复
取消回复