jQuery图片放大镜(原创)

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

 52086  396  查看评论 (30)
分享到微信朋友圈
X
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",//主容器
});
相关插件-图片展示

CSS3三角形图片展示

CSS3三角形图片展示
  图片展示
 40520  398

jQuery仿京东商品放大镜

jQuery重写仿京东商品放大镜,使用更简单
  图片展示
 46723  540

jquery3D旋转相册

jquery3D旋转相册
  图片展示
 59687  504

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

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

讨论这个项目(30)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    *** 0
    2021/4/24 15:59:51
    上一个问题打错了,,,,放置小图的位置可以水平状态和垂直状态切换? 回复
    *** 0
    2021/4/24 15:58:15
    放置小图的位置可以水平切换?
    回复
    订丁顶 0
    2018/10/24 13:29:14
    非常棒 简单 没那么复杂一看就明白 初级程序员都会使用 回复
    Yenny 0
    2018/8/15 12:53:20

    你好,我想在一页里面 弄多两个jQuery图片放大镜,我把id 换成"#magnifier1, #magnifier2, #magnifier3" 。第一个图片放大镜 没问题,可是第二,第三 图片放大镜不能自由移动,怎么办?

    $(function() {
        var magnifierConfig = {
            magnifier: "#magnifier1, #magnifier2, #magnifier3",
            width: 500,
            height: 500,
            moveWidth: null,
            zoom: 5
        };
        var _magnifier = magnifier(magnifierConfig);
    });
    回复
    青春散场 0
    2018/8/6 14:59:15
    这个动态加载怎么弄啊,我在$(function() 里调用magnifier()没问题,但是在ajax里调用就提示方法未定义,能给个提示不 回复
    freshboom 0
    2018/5/6 14:06:14
    能问下实现原理吗 看到不是很明白 回复
    ??丶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

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复