文档章节

点击图片弹出放大预览

a
 acclea
发布于 2017/04/21 15:13
字数 271
阅读 7
收藏 0

在需要使用点击预览大图的位置调用 view ();

<style>
   .testView{position: fixed;width: 100%;height: 100%;background-color: rgba(0,0,0,.8);top: 0;left:0;z-index: 999;}
   .testView .close{position: absolute;top: 0;right: 0;width: 50px;height: 50px;display: inline-block;background-color: rgba(255,255,255,0.5);color: #fff;text-align: center;font-style: normal;line-height: 50px;font-size: 30px;cursor: pointer;}
   .viewWrap{height: 600px;width: 100%;text-align: center;line-height: 600px;position: absolute;top: 50%;margin-top: -200px;}

   .testView .v_btn{display: block;width: 50px;height: 300px;color: #fff;text-align: center;line-height: 300px;position: absolute;left:0;top: 50%;margin-top: -150px;font-size: 30px;background-color: rgba(255,255,255,0.2);transition: all 0.3s ease;}
   .testView .next{left: auto;right: 0 !important;}
   .testView>a:hover{background-color: rgba(255,255,255,0.5);}
</style>
<div id="test" class="testView hide">
   <i id="close" class="close">X</i>
   <div class="viewWrap"><img class="reImg" height="400" width="600"></div>
   <a href="javascript:void(0);" class="v_btn pre"><</a>
   <a href="javascript:void(0);" class="v_btn next">></a>
</div>

<script >
   function view() {
        var paint = new Array();
        $.post('url',function (data) {
            $.each(JSON.parse(data),function(paintkey,paintval){
                paint.push(paintval.img);
            });
            preview(paint);
        });
   }

    var testView   = $('.testView');

   function preview(img) {
        var reImg     = testView.find('.reImg');
        var itemNum    = 0;

        if(Array.isArray(img) && img.length > 0){
            if(itemNum == 0){
                itemNum    = 0;
            }else{
                itemNum     = $(this).index();
            }

            reImg.attr('src',img[itemNum]);
            testView.fadeIn(300);
        }

      testView.on('click','a', function () {
         var self = $(this);

         if(self.hasClass('next')){
            itemNum == img.length - 1 ? itemNum = 0 : itemNum++;
            reImg.attr('src',img[itemNum]);
         }else{
            itemNum <= 0 ? itemNum = img.length - 1:itemNum--;
            reImg.attr('src',img[itemNum]);
         }

      });

   }

    testView.on('click','.close', function () {
        $(this).parent().fadeOut(300);
    });
</script>

© 著作权归作者所有

共有 人打赏支持
a
粉丝 3
博文 85
码字总数 29418
作品 0
静安
程序员
私信 提问
如何免费下载谷歌地球瓦片拼接成大图

首先打开WOLFMAP地图下载器,切换地图为谷歌地球。 [img][/img] 切换成功了,不过连接不上谷歌的服务器,所以无法显示影像。现在很多地方都会出现这种情况,解决方法如下,选择工具->谷歌IP检...

umi-1
2016/05/19
338
1
PDF、PPT、Excel、Word、视频等格式文件在线预览

最近项目中用到了文件在线预览功能,文件类型大概有图片、视频、PDF、PPT、Excel、Word 等等,总结梳理了一下,分享给大家。 PDF 文件类型 jquery.media.js 在线文档:http://jquery.malsup....

angkee
2017/11/26
0
0
uiscrollview单图缩放偏移漂浮问题

1.功能:uiscrollview单图预览,支持双指缩放,双击缩放(图片点击处放大或者居中缩小) 问题:双指缩放时,如何让图片不会产生漂浮和偏移问题,可以缩放双指之间的那部分图片? 双击时,如何...

treebug
2015/06/11
281
0
好玩儿 的 javascript

非常平滑的JS图片滚动特效代码,无缝循环 http://www.codefans.net/jscss/code/255.shtml 强烈推荐的一款CSS导航菜单 http://www.codefans.net/jscss/code/768.shtml 纯CSS下拉菜单代码http:...

曦羽
2017/10/05
0
0
图片处理工具

Android7.0 完美适配——FileProvider 拍照裁剪全解析 适配 android7.0 中的拍照相册裁剪功能 使用 photoView 实现可点击放大到全屏显示的控件,效果类似于微信朋友圈点开看大图 使用 photoV...

掘金官方
2017/12/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

linux 扩展lv

相关概念 逻辑卷可以实现硬盘空间的动态划分和管理。 1】 物理卷 LV 处于最低层,可以是物理硬盘上的分区,也可以是整个物理硬盘 2】 卷组 VG 卷组建立在物理卷之上,一个卷组至少要包括一个...

hnairdb
3分钟前
0
0
如何快速定位Ruby函数源码

如何快速定位Ruby函数源码 1、gem gem which sidekiq 2、bundle bundle show redis 3、CTags Sublime extend ActiveSupport::Concernrescue_fromcurrent_company.cc_ad_tasks.creat......

mingle
4分钟前
0
0
基于 DataLakeAnalytics 的数据湖实践

随着软硬件各方面条件的成熟,数据湖(Data Lake)已经越来越受到各大企业的青睐, 与传统的数仓实践不一样的是,数据湖不需要专门的“入仓”的过程,数据在哪里,我们就从哪里读取数据进行分析...

阿里云云栖社区
6分钟前
0
0
word文档处理成富文本生成sql语句导入mysql

问题:需要将大量的已存在的word文档导入到web项目里在网站展示,不可能通过编辑录入的方式处理,通过程序实现。 解决思路:通过读取word文档处理成html,再获取html富文本内容,拼接成sql,...

S三少S
13分钟前
29
0
WAF开放规则定义权:专家策略+用户自定义策略=Web安全

在第一期“漫说安全”栏目中,我们用四格漫画的形式介绍了基于深度学习的阿里云WAF到底智能在哪里,能帮客户解决什么问题。 在今天的这期栏目里,我们依然通过漫画这种通俗易懂的方式,与大家...

迷你芊宝宝
17分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部