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 canvas炫酷图片爆炸飞散特效

这是一款基于html5 canvas的炫酷图片爆炸飞散特效js插件。该js插件当用鼠标点击图片时,图片会有玻璃窗被子弹击碎时的爆炸飞散效果,非常炫酷。
  图片展示
 10300  81

jQuery CSS3实现的方向感知悬停网页特效

jQuery CSS3实现的方向感知悬停网页特效
  图片展示
 10062  107

轮播图

轮播图,12种图片切换效果
  图片展示
 15587  70

jQuery自适应图片排列插件flexImages

flexImages是一款轻量级的jquery插件,它可轻松的创出类似谷歌图片流效果。当然,flexImages可以实现多种模式的排列,排列的对象不限于图片,可以是文本,视频等,排列中也可以显示标题,标题可以显示在图片上,也可以显示在图片下方。更多的详情可参考实例。
  图片展示
 11872  51

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

    yoonfeng 0
    2017/4/13 14:02:10

    一个小小的建议:鼠标移动到小图时不要滚动位置

    回复
    如意宝 | 陈赵宇 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;

    这个是怎么计算的,大神

        一方一方0
        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

        已修改,等审核

    回复
取消回复