jQuery图片放大镜(原创)

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

 10160  65  查看评论 (21)
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",//主容器
});
相关插件-图片展示

一款非常好用的全景生成,全景标记编辑插件!

将全景照片以三维实景展现在页面上,并可自定义一些参数以及锚点
  图片展示
 4343  56

jQuery点击图片预览并显示详情

jQuery点击图片预览并显示详情,加入购物车,适合简单的商城系统
  图片展示
 10016  201

14种炫酷堆叠卡片切换动画特效

14种炫酷堆叠卡片切换动画特效
  图片展示
 9941  128

JQUERY全屏撕裂幻灯片-FULLSCREEN-SLIT-SLIDER

fullscreen-slit-slider由 jQuery 和 css3 打造而成。为我们提供了一个全屏的撕裂效果的幻灯片,接下来我就为大家讲解以下相关的用法。
  图片展示
 18597  92

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

    ?瓜兮兮 0
    2017/11/16 15:32:12

    第一次点击右边滑动会出现问题,不动,需要点击两次,如何解决

    回复
    31211 0
    2017/11/15 13:37:21

    图片只有3-4张的时候 点击会出现bug

    回复
    原点○ 0
    2017/11/15 11:34:03

    放大图片区域右侧有几个像素的空白区域,是什么原因?

    回复
    南宫小沫 0
    2017/9/28 17:19:45

    第一次点击右会无响应

    回复
    流浪儿 0
    2017/9/22 18:40:31

    你好,我想问一下怎样子让它自动滚动切换

    回复
    威创网络-前端工程师 0
    2017/9/22 17:08:16
    第一次按右切换有问题 回复
    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

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

    回复
取消回复