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

<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. ndk搭建与运行

    1)打开Android开发者的官网http://developer.android.com/找到Develop点击.如果页面打不开,通过代理来访问. 2)进入后再点击Tools 3)进入后在左侧找到N ...

  2. datatables.js 里面遇到的问题

    1. 假如需要A行的data 和 B行的data 合并 在B行 data:name 在A行的 render:function(){ return data+full.name   此时返回的就是A+B ...

  3. [Rails] 设计模式 MVC

    使用 MVC 的Web开发框架有很多,比如 PHP 的 Zend,Python 的 Django 和 Golang 的 Beego.这篇文章主要介绍一下 MVC 的基本概念. 何为MVC 为了明确一个 ...

  4. js字符串函数 [http://www.cnblogs.com/qfb620/archive/2011/07/28/2119799.html]

    JS自带函数concat将两个或多个字符的文本组合起来,返回一个新的字符串.var a = "hello";var b = ",world";var c = a ...

  5. windows 7 & protobuf 3.0 & python 3.5

    置顶: 在Python中使用protocol buffers参考指南 http://blog.csdn.net/losophy/article/details/17006573 其实看这篇文章就可以把 ...

  6. hdu1008

    //c++// #includeusing namespace std;int main(){int n,j,t,start;while (cin >> n,n){start =0;t = ...

  7. CSS3秘笈复习：第九章&第十章

    第九章 1.和链接有关的伪类: (1):link,未访问过的链接 (2):visited,已访问过的链接 (3):hover,鼠标悬停链接 (4):active,单击链接时 这四种方式一定要严格按上面 ...

  8. JavaScript面向对象基础语法总结

    1.Javascript的 对象(Object): //例子:var car = { , , }; 2.使用构造函数来创建对象. //例子: var Car = function() { ; ; ; ...

  9. hdu 5469 Antonidas(树的分治+字符串hashOR搜索+剪枝)

    题目链接:hdu 5469 Antonidas 题意: 给你一颗树,每个节点有一个字符,现在给你一个字符串S,问你是否能在树上找到两个节点u,v,使得u到v的最短路径构成的字符串恰好为S. 题解: 这 ...

  10. hdu 5664 Lady CA and the graph(树的点分治+容斥)

    题意: 给你一个有n个点的树,给定根,叫你找第k大的特殊链 .特殊的链的定义:u,v之间的路径,经过题给的根节点. 题解:(来自BC官方题解) 对于求第k大的问题,我们可以通过在外层套一个二分,将其转 ...