web前端实现局部左右滑动

网页实现全屏滑动效果
最新推荐文章于 2024-11-23 15:32:37 发布
原创最新推荐文章于 2024-11-23 15:32:37 发布 · 6.8k 阅读
6 ·
CC 4.0 BY-SA版权
css 专栏收录该内容
13 篇文章
订阅专栏
这个示例展示了如何在web前端实现一个全屏的、支持局部左右滑动的效果。代码包括HTML、CSS和JavaScript，主要调整了页面的字体大小以适配不同设备，并实现了在不同设备上自动调整布局的功能。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Title</title>
    <!--<link rel="stylesheet" type="text/css" href="../css/caishunqiall.css">-->
    <!--
    <script>
        //通过window.screen.width获取屏幕的宽度
        var offWidth = window.screen.width / 30; //这里用宽度/30表示1rem取得的px
        document.getElementsByTagName("html")[0].style.fontSize = offWidth + 'px'; //把rem的值复制给顶级标签html的font-size
    </script>
 -->
    <script type="text/javascript">
        (function(doc, win) {
            var docEl = doc.documentElement,
                    isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
                    dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,
                    dpr = window.top === window.self ? dpr : 1, //被iframe引用时，禁止缩放
                    dpr = 1,
                    scale = 1 / dpr,
                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
            docEl.dataset.dpr = dpr;
            var metaEl = doc.createElement('meta');
            metaEl.name = 'viewport';
            metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale;
            docEl.firstElementChild.appendChild(metaEl);
            var recalc = function() {
                var width = docEl.clientWidth;
                if (width / dpr > 750) {
                    width = 750 * dpr;
                }
                // 乘以100，px : rem = 100 : 1
                docEl.style.fontSize = 100 * (width / 750) + 'px';
            };
            recalc()
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
        })(document, window);
    </script>
    <style>
        *,
        ::after,
        ::before{
            margin: 0;
            padding: 0;
            /*清除高亮显示*/
            -webkit-tap-highlight-color: transparent;
            /*设置内容从边框计算*/
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
        body{
            /*font-size: 14px;*/
            /*font-family: "Microsoft Himalaya",sans-serif;*/
        }
        a{
            color: #333;
        }
        a:hover{
            color: #333;
        }
        input{
            border: none;
            outline: none;
            /*清除移动端默认的表单样式*/
            -webkit-appearance: none;
        }
        .f_left{
            float: left;
        }
        .f_right{
            float: right;
        }
        .clearfix::before,
        .clearfix::after{
            content: "";
            height: 0;
            /*line-height: 0;*/
            display: block;
            visibility: hidden;
            clear: both;
        }
        body{
            background: rgba(0, 0, 0, 1);
        }
         .aal{
             height: 100%;
             width: 100%;
             background: rgba(0, 0, 0, 1);
         }
        .mune_a{
            width: 100%;
            height: 0.88rem;
            text-align: center;
            line-height: 0.88rem;

        }
        .mune_a span{
            font-size:0.34rem;
            color:rgba(255,255,255,1);
            position: relative;
            top:-0.24rem;
        }
        .all_centent_a{
            width: 100%;
            /*使用overflow-y:auto剪裁，详情请见w3cschool
                http://www.w3school.com.cn/cssref/pr_overflow-y.asp
            */
            overflow-y: auto;
        }
        .all_centent_a table{
            width: 120%;
            border-collapse:collapse;
        }
        .all_centent_a table tr{
            border-bottom: 0.01rem solid #B2B2B2;
        }
        .all_centent_td{
            height: 1.1rem;
            font-size: 0.28rem;
            color:rgba(248,248,248,1);
            line-height: 1.1rem;
            text-align: center;
        }
        .all_centent_a table tr td span{
            width: 1.32rem;
            height: 0.18rem;
            display: run-in;
            background-color: red;

        }
        .all_centent_a tr:nth-child(2) td:nth-child(3){
            color: #FF0000;
        }
        .all_centent_a tr:nth-child(3) td:nth-child(3){
             color: #FF0000;
        }
        .all_centent_a tr:nth-child(4) td:nth-child(3){
            color: #FF0000;
        }
        .all_centent_a tr:nth-child(5) td:nth-child(3){
            color: #FF0000;
        }
        .allsss{
            width: 100%;
            position: absolute;

        }
        .allsss tr td{
            color: #818181;
            font-size: 0.3rem;
            /*text-align: center;*/
        }
        .allsss tr:nth-child(1) td:nth-child(1){
            color: #FF0000;
            font-size: 0.64rem;
            padding-left: 0.5rem;
        }
        .allsss tr:nth-child(1) td:nth-child(3){
            color: #FF0000;
            font-size: 0.26rem;
            text-align: center;
        }
        .allsss tr:nth-child(2) td:nth-child(2){
            color: #FF0000;
            font-size: 0.26rem;
            text-align: center;
        }
        .allsss tr:nth-child(3) td:nth-child(1){
            color: #FF0000;
            font-size: 0.3rem;
            padding-left: 0.5rem;
        }
        .allsss tr:nth-child(3) td:nth-child(3){
            color: #FF0000;
            font-size: 0.26rem;
        }
        .allsss tr:nth-child(3) td:nth-child(5){
            color: #FF0000;
            font-size: 0.26rem;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="aal clearfloat">
    <div class="mune_a">
        <span>详情</span>
    </div>
    <div class="all_centent_a">
        <table>
            <tr>
                <td class="all_centent_td">名称</td>
                <td class="all_centent_td">现价</td>
                <td class="all_centent_td">24H量</td>
                <td class="all_centent_td">最低</td>
                <td class="all_centent_td">最高</td>
                <td class="all_centent_td">涨幅</td>
            </tr>
            <tr>
                <td class="all_centent_td">BTC/USDT</td>
                <td class="all_centent_td"><span>6333.33</span></td>
                <td class="all_centent_td">0.90678</td>
                <td class="all_centent_td">6333.33</td>
                <td class="all_centent_td">6333.33</td>
                <td class="all_centent_td">0.90678</td>
            </tr>
            <tr>
                <td class="all_centent_td">BTC/USDT</td>
                <td class="all_centent_td"><span>6333.33</span></td>
                <td class="all_centent_td">0.90678</td>
                <td class="all_centent_td">6333.33</td>
                <td class="all_centent_td">6333.33</td>
                <td class="all_centent_td">0.90678</td>
            </tr>
            <tr>
                <td class="all_centent_td">BTC/USDT</td>
                <td class="all_centent_td"><span>6333.33</span></td>
                <td class="all_centent_td">0.90678</td>
                <td class="all_centent_td">6333.33</td>
                <td class="all_centent_td">6333.33</td>
                <td class="all_centent_td">0.90678</td>
            </tr>
            <tr>
                <td class="all_centent_td" colspan="5">EOS/USDT</td>
                <td  class="all_centent_td"></td>
            </tr>
        </table>
    </div>
    <div>
        <table class="allsss">
            <tr>
                <td colspan="3" rowspan="2">6333.3306</td>
                <td>最高</td>
                <td>6877.9876</td>
            </tr>
            <tr>
                <td>最低</td>
                <td>6877.9876</td>
            </tr>
            <tr>
                <td>≈46660.8892CNY</td>
                <td>涨幅</td>
                <td>-3.2%</td>
                <td>24H</td>
                <td>6877.9876</td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>