文档章节

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

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

前几天无意中发现一个分享流量的微信网页在下拉时显示"此网页由 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
984
2
域名被封(微信)后的思索

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

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

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

匿名t3a
2012/03/31
1K
11
移动端 Web 网页调试技巧

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

刘星石
2016/04/19
57
0
小伙伴们,C语言学习调查问卷来啦

亲爱的小伙伴们,大家好啊~~~ 为了给大家在我的微信公众号:C语言编程技术分享 http://weixin.qq.com/r/mkmguCDEan0VrWTb9xyI (二维码自动识别) 上提供更好的C语言编程学习的资料,希望您...

石家的鱼
2017/11/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring源码学习笔记-1-Resource

打算补下基础,学习下Spring源码,参考书籍是《Spring源码深度解析》,使用版本是Spring 3.2.x,本来想试图用脑图记录的,发现代码部分不好贴,还是作罢,这里只大略记录下想法,不写太细了 ...

zypy333
今天
10
0
RestClientUtil和ConfigRestClientUtil区别说明

RestClientUtil directly executes the DSL defined in the code. ConfigRestClientUtil gets the DSL defined in the configuration file by the DSL name and executes it. RestClientUtil......

bboss
今天
17
0

中国龙-扬科
昨天
2
0
Linux系统设置全局的默认网络代理

更改全局配置文件/etc/profile all_proxy="all_proxy=socks://rahowviahva.ml:80/"ftp_proxy="ftp_proxy=http://rahowviahva.ml:80/"http_proxy="http_proxy=http://rahowviahva.ml:80/"......

临江仙卜算子
昨天
10
0
java框架学习日志-6(bean作用域和自动装配)

本章补充bean的作用域和自动装配 bean作用域 之前提到可以用scope来设置单例模式 <bean id="type" class="cn.dota2.tpye.Type" scope="singleton"></bean> 除此之外还有几种用法 singleton:......

白话
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部