——————————————————————————————————

<script type="text/javascript">
            //变量x,y记录触摸开始位置            
            var x = 0, y = 0;
            //初始化函数，绑定触屏事件
            function init() {
                //绑定触屏开始事件
                document.addEventListener('touchstart', function(e){
                    var touch = e.touches[0]; //获取第一个触点
                    //记录触点初始位置
                    x = Number(touch.pageX); //页面触点X坐标
                    y = Number(touch.pageY); //页面触点Y坐标
                }, false);
                document.addEventListener('touchmove', function(e){
                    var touch = e.touches[0]; //获取第一个触点
                    var x2 = Number(touch.pageX); //页面触点X坐标
                    var y2 = Number(touch.pageY); //页面触点Y坐标
                    //得到文本的dom
                    var t = document.getElementById('mytext');
                    var font = t.style.fontSize;//原本的字体大小
                    //判断滑动方向，如果是向右滑动则加大字体
                    if (x2 > x) {
                        font = parseInt(font) + 1;//字体加大一像素
                        t.style.fontSize = font+'px';
                    }
                    if (x2 < x) {
                        font = parseInt(font) - 1;//字体减小一像素
                        t.style.fontSize = font+'px';
                    }
                }, false);
                //绑定滑动结束事件
                document.addEventListener('touchend', function(){
                    //什么也不做
                }, false);
            }
        </script>

————————————————————————————————

<style>
            div{
                border:2px solid red;
                color:red;
            }
</style>————————————————————————————————

<body onload="init()">
        <h2>测试是否支持滑动事件</h2>
        <div id="result">未触发事件！</div>
        <ul id="mytext" style="font-size:12px;">
            <li>条目xxx</li>
            <li>条目xxx</li>
            <li>条目xxx</li>
            <li>条目xxx</li>
            <li>条目xxx</li>
            <li>条目xxx</li>
            <li>条目xxx</li>
            <li>条目xxx</li>
            <li>条目xxx</li>
            <li>条目xxx</li>
            <li>条目xxx</li>
            <li>条目xxx</li>
            <li>条目xxx</li>
            <li>条目xxx</li>
        </ul>
    </body>——————————————————————————

JavaScript在智能手机上的应用-通过滑动修改网页字体大小的更多相关文章

  1. JavaScript在智能手机上的应用-用手势来改变图片大小

    ---------------------------------- <script type="text/javascript">            //初始化函 ...

  2. JavaScript在智能手机上的应用-测试是否支持滑动事件

    ---------------------------- <script type="text/javascript">                        ...

  3. JavaScript在智能手机上的应用-判断是否为移动浏览器

    -------------------- <script type="text/javascript">            var userAgent = navi ...

  4. JavaScript在智能手机上的应用-使用手机GPS定位用户所在城市

    ---------------------------- <script type="text/javascript" language="javascript&q ...

  5. JavaScript如何实现上拉加载，下拉刷新？

    转载地址: 面试官:JavaScript如何实现上拉加载,下拉刷新? 一.前言 下拉刷新和上拉加载这两种交互方式通常出现在移动端中 本质上等同于PC网页中的分页,只是交互形式不同 开源社区也有很多优秀 ...

  6. PHP中使用Session配合Javascript实现文件上传进度条功能

    Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP .4以前,实现这样的进度条并不容易 ...

  7. Javascript之图片上传预览

    使用Javascript之图片上传预览,我们无需上传到服务器中,兼容所有浏览器. 关键方法是使用微软库filter:progid:DXImageTransform.Microsoft.AlphaIma ...

  8. 用JavaScript获取页面上被选中的文字的技巧

    这里介绍的一个小技巧是如何用JavaScript获取页面上被选中的文字的方法.最关键的JavaScript API是: event.selection = window.getSelection(); ...

  9. Android智能手机上的音频浅析

    手机可以说是现在人日常生活中最离不开的电子设备了.它自诞生以来,从模拟的发展到数字的,从1G发展到目前的4G以及不久将来的5G,从最初的只有唯一的功能(打电话)发展到目前的全功能,从功能机(featu ...

随机推荐

  1. MySQL的保留关键字，使用时尽量避免

    今天用phpmyadmin时,注意到一个提示: 列名 'update' 是一个MySQL 保留关键字. 突然意识到还是应该尽量避免这些保留关键字,也百度了一下.找到了这些关键字,列出来下 使用mysq ...

  2. 配置Windows为NTP服务器

    建议使用 ntpd for windows,这是一个ntp的windows版,操作和linux相似 下载:https://www.meinbergglobal.com/english/sw/ntp.h ...

  3. slf4j 之logback日志之sl4j架构【二】

    一.整体介绍 介绍: The Simple Logging Facade for Java (SLF4J) serves as a simple facade or abstraction for v ...

  4. js 处理数据里面的空格

    str为要去除空格的字符串: 去除所有空格: str = str.replace(/\s+/g,""); 去除两头空格: str = str.replace(/^\s+|\s+$/ ...

  5. cocos2d-lua ARPG手机游戏《烈焰遮天》（客户端+服务端+数据库）发布说明

    服务器发布流程及其规范1,环境准备        a, mvn命令行:从\\10.21.210.161\share\tools\apache-maven-3.1.1-bin.tar.gz取出安装包,  ...

  6. SublimeLinter 3中使用jshint

    这货得知已久,在sublime2时期对着教程按部就班的凑合用着...不明所以. 今天无意发现SublimeLinter终于出3了,果断装之,鼓捣1个多小时,磕磕绊绊终于成功工作了.期间看了无数英文文档 ...

  7. Sass与Compress实战：第四章

    概要:这一章将深挖Compass的工具箱,看看Compass的混合器如何帮助你省去编写重复样式表的辛苦工作. 本章内容: ● 使用Compass重置浏览器默认样式表 ● 改进样式表排版的Compass ...

  8. CSS3秘笈复习：第十一章

    1.text-align与vertical-align: text-align控制水平方向的定位,关键字是left.right.center和justify. vertical-align控制垂直方向 ...

  9. HDU_1245_Saving James Bond_最短路

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=1245 题意:给一个已知直径的圆形岛,然后岛的附近是湖,湖里有一些点,以坐标的形式给出,最外层是矩形的终 ...

  10. MongoDB聚合管道（Aggregation Pipeline）

    参考聚合管道简介 聚合管道 聚合管道是基于数据处理管道模型的数据聚合框架.文档进入一个拥有多阶段(multi-stage)的管道,并被管道转换成一个聚合结果.最基本的管道阶段提供了跟查询操作类似的过滤 ...