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

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

 4011  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代码。

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

纯css3放大镜

通过css3样式实现放大镜的效果
  图片展示
 13293  88

jQuery支持图片放大缩小查看效果

e-smart-zoom-jquery.js插件 页面上提供了两个按钮,可以让你的图片点击放大或者缩小 当然,对于懒人来说,真是懒得点击 那么你可以将鼠标悬停在图片上,滚动鼠标滚轮即可实现图片的放大或者缩小效果
  图片展示
 62588  154

html5极速3D立体式图片相册切换效果

html5极速3D立体式图片相册切换效果
  图片展示
 34480  251

gifplayer暂停或播放GIF图片

gifplayer暂停或播放GIF图片
  图片展示
 10875  40

讨论这个项目(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。

    回复
取消回复