jQuery图片放大镜(原创)

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

 12550  80  查看评论 (22)
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画廊-least.js

jQuery画廊-least.js 类似于google图片搜索结果中的展示效果,least.js 随机和响应的JQUERY,HTML 5和CSS3画廊
  图片展示
 13286  34

jQuery放大镜插件cloudzoom.js

jQuery放大镜插件cloudzoom.js,可以实现切换图片,支持滚轮控制放大比例
  图片展示
 7710  79

移动端仿淘宝造物节3d

html5场景淘宝造物节3D酷炫空间专题页面模板
  图片展示
 2922  47

360度全景展示效果

按下鼠标左键拖拽360度全景展示效果
  图片展示
 10489  118

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

    ╃叶落瑾年 1
    2017/12/22 17:35:29

    恩我是当图片小于或者等于6张的时候就出bug了,是右侧按钮在明明小图已经显示全了的情况下还可以一直点。。。恩后来看了下是右侧按钮没有加disabled,然后宝宝就只好在页面加载完后加了这句

    if($("#imageMenu li").length <= 6){
        $('.smallImgDown').addClass('disabled');
    }

    判断是简单粗暴了些。。。不知还有别的招:)

    回复
    ?瓜兮兮 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);

        把这一行注释掉就可以了

    回复
取消回复