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

<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. 树莓派+Android Things

    在开始之前 谷歌前不久发布了Android Things面向物联网的系统,用意是想让android开发者用原来开发app的方式开发硬件相关的应用,扩展了android开发的方向和前景,而谷歌的Andr ...

  2. Java 笔试面试 基础篇 一

    1. Java 基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法, 线程的语法,集合的语法,io 的语法,虚拟机方面的语法. 1.一个".java& ...

  3. CocoaPods 报错 [!] The dependency `JSONModel (~> 1.2.0)` is not used in any concrete target.

    当用CocoaPods  pod install 时出现了下面的错误时: p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; col ...

  4. win7远程连接ubuntu14.04.1桌面

    sudo apt-get install xdrp sudo apt-get install vnc4server tightserver sudo apt-get install xfce4 ech ...

  5. Windows上安装MongoDB步骤

    事前准备: 1.在mongoDB官网下载.msi文件,我下的是社区版,下载地址:https://www.mongodb.com/download-center#community 2.点击msi文件安 ...

  6. Struts2-2.了解struts.xml>package>action>result的name属性

    result决定跳转到哪个视图(jsp),可以预设值有多个. <?xml version="1.0" encoding="UTF-8" ?> < ...

  7. 2016年团体程序设计天梯赛-决赛 L1-3. 出租（20）

    下面是新浪微博上曾经很火的一张图: 一时间网上一片求救声,急问这个怎么破.其实这段代码很简单,index数组就是arr数组的下标,index[0]=2 对应 arr[2]=1,index[1]=0 对 ...

  8. thinkphp 的两种建构模式 第一种一个单入口里面定义两个模块，前台和后台，函数控制模块必须function.php前台加载前台模块的汉书配置文件，后台加载后台模块的汉书配置文件，公共文件共用。第二种架构模式两个单入口文件，分别生成两个应用定义define。。。函数可以定义配置文件。。。。

    thinkphp 的两种建构模式  第一种一个单入口里面定义两个模块,前台和后台,函数控制模块必须function.php前台加载前台模块的汉书配置文件,后台加载后台模块的汉书配置文件,公共文件共用. ...

  9. jQuery第三章

    一.jQuery中的DOM操作 一般来说,DOM操作分为3个方面,即DOM Core核心.HTML-DOM和CSS-DOM 1.DOM Core JavaScript中的getElementById( ...

  10. C#数组和元组

    声明数组 int[] myArray; 初始化数组 myArray = new int[4]; 数组是引用类型当初始化完毕后,将在托管堆上分配内存空间,其结构图如下