jquery移动端评论弹窗图片浏览特效代码

jquery移动端评论弹窗图片浏览特效代码

一款jquery移动端评论弹窗图片浏览特效,适用移动端评论模块,支持图片放大轮播预览!

使用方法
需要用到的JS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
$('.discuss-print ul li').height($('.discuss-print ul li').width());
$('.evaluate .b-banner').height($('.evaluate .b-banner').width());
/*弹框大图*/
$('.gb-btn').click(function () {
    $('.Picture').hide();
    $('body').css('overflow','');
});
var imgNum = $(".discuss-print ul li").length;
var index =0;
function selectimg(index) {
    $('.discuss-print ul li').removeClass('on');
    $(".discuss-print ul li").eq(index).addClass("on");
    $('.theme').height($('.theme img').height());
    $('.theme img').attr('src',$('.discuss-print .on').find('img').attr('src'));
}
/*点击列表图*/
$('.discuss-print ul li').click(function () {
    $('body').css('overflow','hidden');
    index = $(".discuss-print ul li").index(this);
    $('.discuss-print ul li').removeClass('on');
    $(this).addClass("on");
    $('.discuss-print ul li img').css('display','block');
    $('.Picture').show();
    $('.theme img').attr('src',$('.discuss-print .on').find('img').attr('src'));
    $('.theme').height($('.theme img').height());
});
$(".mine").click(function(){
    index --;
    if(index < 0){
        index = imgNum-1;
        selectimg(index);
    }
    selectimg(index);
});
$(".Next").click(function(){
    index ++;
    if( index > imgNum-1){
        index = 0;
        selectimg(index);
    }
    selectimg(index);
});

CSS样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
*{padding: 0; margin: 0;}
a{text-decoration: none;}
body{ margin: 0 auto;}
/*evaluate*/
.evaluate{overflow: hidden; margin: 0 auto;}
.evaluate-box{overflow: hidden; margin: 0 auto; }
.evaluate-bt{overflow: hidden; margin: 0 auto 0; padding: 0 15px; background: #fff; border-bottom: 1px solid #ddd;}
.evaluate-bt p{overflow: hidden; margin: 0 auto; height: 44xp; line-height: 44px; float: left; font-size: 15px; color: #333333;}
.evaluate-bt p span{overflow: hidden; margin: 0 auto;}
.evaluate-bt a{overflow: hidden; margin: 0 auto; height: 44px; line-height: 44px; font-size: 15px; color: #fc3f70; float: right;}
.evaluate-bt a.more-btn{color: #333333; position: relative; padding-right: 15px;}
.evaluate-bt a.more-btn:after{ content: ""; width: 8px; height: 8px; display: block; border-top: 1px solid #333; border-right: 1px solid #333; position: absolute; top:16px; right:2px;transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);}
.evaluate-list{overflow: hidden; margin: 0 auto; padding: 0 15px; background: #fff;}
.evaluate-list .evaluate-px{overflow: hidden; margin: 0 auto; padding: 10px 0; border-bottom: 1px solid #ddd;}
.evaluate-list .evaluate-px:last-child{ border: none;}
.evaluate-list .datum-rw{ overflow: hidden; margin: 0 auto; width: 100%; background: #fff; }
.evaluate-list .datum-name{ overflow: hidden; margin: 0 auto;}
.evaluate-list .datum-name i{ overflow: hidden; margin: 0 auto;display: block; float: left; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #ddd;}
.evaluate-list .datum-name i img{ margin: 0 auto;display: block; width: 100%; height: 100%; object-fit: cover; }
.evaluate-list .datum-name p{ overflow: hidden; margin: 0 auto; height: 44px; line-height: 44px; font-size: 16px;color: #333333; padding: 0 10px; }
.evaluate-list .datum-name p a{ overflow: hidden; margin: 0 auto; height: 44px; line-height: 44px; font-size: 16px;color: #333333;}
.evaluate-list .datum-time{ overflow: hidden; margin: 0.5rem auto; width: 100%; }
.evaluate-list .datum-time p{ overflow: hidden; margin: 0 auto; font-size: 12px; color: #cccccc; }
.evaluate-list .datum-time p span{ overflow: hidden; margin: 0 auto;margin-right: 10px; }
.evaluate-list .discuss{ overflow: hidden; margin: 0 auto;}
.evaluate-list .discuss p{ overflow: hidden; margin: 0 auto; font-size: 16px; color: #333333;}
.evaluate-list .discuss-print{ overflow: hidden; margin: 10px auto 0;}
.evaluate-list .discuss-print ul{ overflow: hidden; margin: 0 auto;}
.evaluate-list .discuss-print ul li{ overflow: hidden; margin: 0 auto 0.5rem; float: left; margin-right: 0.5rem; width: calc((100% - 1rem) / 3);}
.evaluate-list .discuss-print ul li:nth-of-type(3n){ margin-right: 0;}
.evaluate-list .discuss-print ul li a{ overflow: hidden; margin: 0 auto; display: block;}
.evaluate-list .discuss-print ul li a img{ overflow: hidden; margin: 0 auto; display: block; width: 100%; height: 100%; object-fit: cover;}

/*图片预览*/
.Picture{overflow: hidden; display: none; margin: 0 auto; position: fixed; top:0; left:0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.7); z-index: 889;}
.Picture-box{ overflow: hidden; width: 100%; height: 100%; position: relative;}
.Picture-box .theme{ overflow: hidden; width: auto; position: absolute; top:0; left:0;  bottom: 0; right:0; margin: auto;}
.Picture-box .open  { overflow: hidden; width: 43px; height: 58px;font-size: 16px; color: #666; text-align: center; background: rgba(0, 0, 0, 0.4); position: absolute; top:0;bottom: 0; margin: auto; z-index: 2;}
.Picture-box .mine  { left:0; }
.Picture-box .Next{ right:0;}
.Picture-box .theme img{ overflow: hidden; width: 100%; margin: 0 auto; display: block;  object-fit: cover;}
.Picture-box .gb-btn{ overflow: hidden; width: 30px; height: 30px; line-height: 30px; display: block; position: absolute; top:10px; right:10px; font-size: 32px; color: #fff; text-align: center; }

/*兼容样式*/
@media (min-width:1080px) and (max-width:2400px){
    .Picture-box .theme{ width: 100%; height: 90%;}
    .Picture-box .theme img{ width: auto; height: 100%;}
    }
当前内容只有登录了才能查看,如果您已经注册,请登录
1

发表评论