css - 怎么用H5实现这样一个悬浮的图片浏览器呢？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

css - 怎么用H5实现这样一个悬浮的图片浏览器呢？

PHP中文网 2017-04-17 13:30:50

[HTML讨论组]

632

如图，这样的图片浏览器怎么做啊，我前端很菜，玩不动，求大牛帮帮忙！！

PHP中文网

认证0级讲师

全部回复(2)

阿神2017-04-17 13:32:50 2楼

因为我是在MUI中使用这个功能，然后我就直接将MUI的popover和slider结合了一下来实现了功能
效果如下：

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello MUI</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <!--标准mui.css-->
        <link rel="stylesheet" href="css/mui.min.css">
        <script src="js/jquery.min.js"></script>
        <style type="text/css">
            .mui-popover-arrow {
                display: none;
            }
            
            #PopoverPicContainer {
                top: calc(50% - 125px) !important;
            }
            .mui-slider-indicator .mui-icon {
    border: 0;
}
        </style>
    </head>
    <body>
        <a id="poppicContainer" href="#PopoverPicContainer" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">弹出图片预览幻灯片</a>
        <p id="PopoverPicContainer" class="mui-popover" style="height: 250px;">
            <p class="mui-slider" style="margin-top: calc(50% - 105px);">
                <p class="mui-slider-group mui-slider-loop" style="text-align: center;">
                    <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一个图文表格) -->
                    <p class="mui-slider-item mui-slider-item-duplicate">
                        <ul class="mui-table-view mui-grid-view">
                            <li class="mui-table-view-cell mui-media mui-col-xs-6">
                                <a href="#"><img class="mui-media-object" src="images/cbd.jpg">
                                    <p class="mui-media-body">Color of SIP CBD</p>
                                </a>
                            </li>
                        </ul>
                    </p>
                    <p class="mui-slider-item">
                        <ul class="mui-table-view mui-grid-view">
                            <li class="mui-table-view-cell mui-media mui-col-xs-6">
                                <a href="#"><img class="mui-media-object" src="images/shuijiao.jpg">
                                    <p class="mui-media-body">幸福就是可以一起睡觉</p>
                                </a>
                            </li>
                        </ul>
                    </p>
                    <p class="mui-slider-item">
                        <ul class="mui-table-view mui-grid-view">
                            <li class="mui-table-view-cell mui-media mui-col-xs-6">
                                <a href="#"><img class="mui-media-object" src="images/cbd.jpg">
                                    <p class="mui-media-body">Color of SIP CBD</p>
                                </a>
                            </li>
                        </ul>
                    </p>
                    <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一个图文表格) -->
                    <p class="mui-slider-item mui-slider-item-duplicate">
                        <ul class="mui-table-view mui-grid-view">
                            <li class="mui-table-view-cell mui-media mui-col-xs-6">
                                <a href="#"><img class="mui-media-object" src="images/shuijiao.jpg">
                                    <p class="mui-media-body">幸福就是可以一起睡觉</p>
                                </a>
                            </li>
                        </ul>
                    </p>
                </p>
                <p class="mui-slider-indicator" style="position: static;background-color: #fff;">
                    <span class="mui-action mui-action-previous mui-icon mui-icon-back" style="float: left ;"></span>
                    <p class="mui-number">
                        <span>1</span> / 2
                    </p>
                    <span class="mui-action mui-action-next mui-icon mui-icon-forward" style="float: right;"></span>
                </p>
            </p>
        </p>
    </body>
    <script src="js/mui.min.js"></script>
    <script>
        mui.init();
        mui("body").on("tap","#poppicContainer",function(){
            $("#PopoverPicContainer").css("top","calc(50% - 125px) !important");
        });
    </script>
</html>

赞 +0

添加回复

天蓬老师2017-04-17 13:32:50 1楼

Swiperjs，你这个就是图片轮播

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>