文档章节

微信浏览器模拟"此网页由 weixin.qq.com 提供"

开源中国精彩人物
 开源中国精彩人物
发布于 2017/09/07 13:19
字数 397
阅读 164
收藏 0

码上生花,ECharts 作品展示赛正式启动!>>>

前几天无意中发现一个分享流量的微信网页在下拉时显示"此网页由 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
作品 0
青岛
程序员
私信 提问
加载中
请先登录后再评论。
微信扫描二维码登录网页的原理

1.微信扫描二维码登录网页过程 [电脑] 打开 http://wx.qq.com,得到二维码; [手机] 手机登录微信,点开扫一扫,扫描PC端二维码,并且扫描成功; [电脑] 手机扫描成功后,提示“登录网页版微...

w-rain
2016/02/17
1.8K
2
域名被封(微信)后的思索

作者:汪娇娇 时间:2017年11月23日 一、先说下微信屏蔽域名的分类吧,大致分为以下3种: 1、域名被微信封杀,显示的是链接无法访问; 2、域名被微信拦截,是跟淘宝一样,如需浏览,请长按网...

娇娇jojojo
2017/12/26
1.3K
0
神奇的微信 这个是怎么实现的

http://weixin.qq.com/cgi-bin/regrank?fun=showpage&t=wx_100million 用手机扫描这个二维码 网页上会显示你的微信信息 这是怎么实现的...

匿名t3a
2012/03/31
1.7K
11
群发技术-使用python3给微信好友群发消息

本文介绍如何给个人微信好友群发消息。 微信个人号中的群发助手可以一次给30个发送消息,如果要给所有所有群发,则需要自己手动发送多次,或者借助程序实现了。本文即是程序实现教程 一、原理...

osc_nta49u19
2019/02/18
8
0
移动端 Web 网页调试技巧

原文出处: 盛瀚钦 本文主要列举了调试本地网页、查看测试环境网页的各种方法,涵盖了PC、iPad、移动端的调试技巧。 本文的不足之处在于,小溪里暂时还没有找到调试位于微信中和安卓各国产浏...

刘星石
2016/04/19
82
0

没有更多内容

加载失败,请刷新页面

加载更多

自媒体文章原创度检测,可以试一下蚁小二工具

自媒体文章原创度检测,可以试一下蚁小二工具,现在的自媒体人对文章原创度检测这一块还是挺看重的,因为文章的原创度不仅仅和推荐量有关还和质量分值有关,这个时候就可以用到蚁小二工具。 ...

一键分发工具-蚁小二
6分钟前
7
0
Cannot import Sklearn from sklearn.externals.joblib

使用: from sklearn.externals import joblib 报错:Cannot import Sklearn from sklearn.externals.joblib 解决方法: python -m pip install sklearn --upgrade python -m pip install jobli......

hc321
6分钟前
8
0
编程语言那么多,为何建议学习python呢?

  随着互联网技术的发展,大家对于编程的认识越来越系统化了,现在学习编程的年龄越来越小,而编程也成为了我们学习的重要知识。   当然,学习编程知识不分早晚的,也有很多26岁左右才转...

osc_ix000whh
7分钟前
5
0
kubectl的使用

https://kubernetes.io/docs/reference/kubectl/overview/

osc_n1fa9m3z
8分钟前
5
0
2020上海锁博会

上海锁博会将于2020年12月22日至24日在上海新国际博览中心举办“第六届上海国际锁博会”,上海锁博会本来就致力于展现中国作为亚洲最活跃、最具发展潜力的锁具市场之一的独特魅力。 锁博会坚...

osc_uvparld2
9分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部