jQuery图片放大镜(原创)

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

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

360度全景展示效果

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

图片点击放大并居中显示

纯js实现的一个图片点击放大并居中显示的插件,支持自定义图片详情,可作为图片浏览插件,也可自行改写
  图片展示
 23528  47

HTML5/CSS3超酷焦点图特效

焦点图插件切换效果比较简单,但是外观和功能却十分强大。该CSS3焦点图在切换图片时,图片以淡入淡出的方式缩小消失并显示下一张图片。焦点图插件还拥有一套非常大气的前后翻页按钮,是一款非常实用HTML5/CSS3焦点图应用。
  图片展示
 10761  23

移动端图片缩放插件Pinchzoom.js

此插件功能包括手机轮播,图片点击放大再次点击缩小功能
  图片展示
 29205  69

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

    ??丶hec 0
    2018/3/22 9:23:49
    mark , 不错哦。但是放大后倍数那里不够很强大~ 回复
    ╃叶落瑾年 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"
        });
    回复
取消回复