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

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

 8786  33  查看评论 (6)
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仿京东商品放大镜

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

JQ插件 放大镜 对比图 倍数可选

放大镜进行两张图片对比功能,可选放大倍数
  图片展示
 4545  39

移动端仿淘宝造物节3d

html5场景淘宝造物节3D酷炫空间专题页面模板
  图片展示
 5213  70

图片点击放大并居中显示

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

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

    ?_? 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
    回复
    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。

    回复
取消回复