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

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

 3902  19  查看评论 (3)
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代码。

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

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

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

jQuerh H5移动端图片预览插件fly_zomm_img.js

H5图标浏览插件,支持多图识别切换,支持手势放大切换
  图片展示
 7102  23

Apple TV的海报视差效果

CSS和jQuery重现这种现象
  图片展示
 10428  93

在圆点上不断滑动鼠标看看效果

图片以圆点显示,随着鼠标的滑动,圆点的尺寸越来越小,图片越来越清晰
  图片展示
 5679  79

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

    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。

    回复
取消回复