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",//主容器
});
相关插件-图片展示

HTML5-CSS3图片过滤归类应用

通过点击不同类型图片按钮,可以选择展示不同类型的图片,共有三种展现方式,可以对不同图片进行归类
  图片展示
 9442  38

好看的3D圆形明信片-3D FLIPPING CIRCLE

说实话,第一眼看到这款插件给我一种浪漫的感觉,因为这很像是送给某某女生的一张明信片,而且结合css和jquery真实地模拟出了3D的打开和关闭效果。相信这款插件一定会给你带来某些回忆。
  图片展示
 10314  29

jQuery缩略图插件jQThumb

这个插件帮助您按比例从图像中创建缩略图,同时jQThumb 兼容所有浏览器,包括 IE6
  图片展示
 2068  22

3D框阴影着色

有关的盒阴影技术,使用简单的对象创建一个逼真的阴影效果的教程。
  图片展示
 9509  26

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

    流浪儿 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

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

    回复
    樱庭初雪 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

        已修改,等审核

    回复
取消回复