微信浏览器模拟"此网页由 weixin.qq.com 提供"
微信浏览器模拟"此网页由 weixin.qq.com 提供"
开源中国精彩人物 发表于3个月前
微信浏览器模拟"此网页由 weixin.qq.com 提供"
  • 发表于 3个月前
  • 阅读 6
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

前几天无意中发现一个分享流量的微信网页在下拉时显示"此网页由 weixin.qq.com 提供",点击分享按钮时显示的地址是另外一个,原来是网页下来显示xxx提供的位置造假了,觉得挺有意思,然后自己实现了一个简易版本的。 下面的html在微信浏览器中访问将有类似的效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <style>
        body {

            /* position: fixed; */
            top: 0;
            bottom: 0;
            overflow-y: hidden;
            padding: 0 !important;
            margin: 0 !important;

            /*为了兼容普通PC的浏览器*/
            /* height: 100%;
            
             */
        }


        .container {
            height: 100vh;
            overflow: scroll;
            background-color: #333333;
            transition: 0s all;
            position: 'relative';
        }

        .content {
            background: #fff;
            height: 100vh;
            width: 100vw;
            z-index: 100;
            position: absolute;
            top: 0;
        }

        .come_from {
            z-index: 1;
            position: absolute;
            top: 3px;
            left: 0;
            right: 0;
        }

        .come_from p {
            font-size: 12px;
            color: #dddddd;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="come_from">
            <p>此网页由 weixin.qq.com 提供</p>
        </div>
        <div class="content">
        </div>
    </div>
    <script type="text/javascript">
        var lastY = 0;//手势触摸中最后一次clipentY
        var lastTop = 0; //显示 from div的高度 通过content的top值实现
        //禁用body的手势事件 
        $('body').on('touchmove touchstart', function (event) {
            event.preventDefault();
        });
        //内容窗口增加手势事件
        $('.content').on('touchstart', function (event) {
            lastY = 0;
            lastTop = 0;
        });
        $('.content').on('touchmove', function (event) {
            var touch = event.touches[event.touches.length - 1];
            var content = $('.content');
            if (lastTop == 0) {
                lastTop = parseFloat(content.css('top').replace('px', ''));
            }
            if (lastY) {
                var offset = touch.clientY - lastY;
                lastY = touch.clientY;
                if (lastTop + offset < 80 && lastTop + offset > -80) {
                    lastTop = lastTop + offset;
                    content.css({ 'transition': '0s all', 'top': lastTop });
                }
            } else {
                lastY = touch.clientY;
            }
        });
        $('.content').on('touchend', function (e) {
            //松手时将top置0
            $('.content').css({ 'transition': '1s all', 'top': 0 });
        })
    </script>
</body>

</html>
共有 人打赏支持
粉丝 3
博文 4
码字总数 987
×
开源中国精彩人物
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: