jquery弹出模态框图片缩放、旋转、切换(原创)

所属分类:媒体,UI-图片展示,弹出层

 42064  374  查看评论 (9)
分享到微信朋友圈
X
jquery弹出模态框图片缩放、旋转、切换(原创) ie兼容9

更新时间:2018/1/18 下午3:40:57

更新说明:对于非兄弟元素的点击时,弹出的图片显示不正确问题,进行了更改。


更新时间:2018年1月17日 11:56:09

更新说明:修改IE9时,放大和缩小有些BUG问题。


使用方法

发布时间:2018-1-16 23:22

基础步骤:

引入弹出框的css样式文件

<link rel="stylesheet" type="text/css" href="css/boxImg.css">

移入jq和弹出框的js文件

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/boxImg.js" type="text/javascript" ></script>

方法:

<img modal="zoomImg" src="img/bz6.jpg" height="150px" alt="">

给需要的img标签加上 modal="zoomImg" 的属性。

扩展说明:

自定义属性名可以更改,还需再JS文件中改下。根据自己需求更改css样式和js代码。

相关插件-图片展示,弹出层

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

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

jQuery全屏图片轮播插件fullpage.js

jQuery全屏图片轮播插件fullpage.js
  图片展示
 61764  396

CSS3三角形图片展示

CSS3三角形图片展示
  图片展示
 39530  396

仿微信朋友圈图片展示效果

仿微信朋友圈图片展示效果
  图片展示
 65375  459

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

    ningjingzhiyuan3881 0
    2019/1/11 15:11:19
    为什么我的引入之后我的jquery不能用了
    回复
    呆呢嗖。 0
    2018/10/4 19:42:40
    ?_? 0
    2018/3/6 17:11:45
    在safari上有bug啊,求指导
        StruggleThunder1
        2018/3/7 10:32:39

        ?什么bug?  我测了Safiri浏览器看起没什么问题,我想是不是浏览器的版本太低了?
        我又看了遍写的js代码 发现一个小bug
        在最后的有两处:  

        $(".mask-layer-imgbox p img").remove();

           将这两处换成→    

        $(".mask-layer-imgbox p").remove();
        ?_?0
        2018/3/12 11:10:02
        在safiri上如果是动态改变的图片,会有图片没加载好js已经走完的情况,导致放大图片没适配,所以要等图片加载完之后在调用showImg(),目前已处理,不过你写的这个还是很好用,老铁,6666
        ygt0
        2018/8/29 12:50:59
        没毛病
    回复
    StruggleThunder 0
    2018/1/18 0:18:30

    IE9时的bug已经修改了

    回复
    石灰粉 0
    2018/1/17 10:49:32

    有BUG呀,先点击缩小,然后点击放大就没效果

        StruggleThunder0
        2018/1/17 11:09:39

        嗯,我看了下,在IE9的时候,放大和缩小有些bug。

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