JavaScript在智能手机上的应用-通过滑动修改网页字体大小
——————————————————————————————————
<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在智能手机上的应用-通过滑动修改网页字体大小的更多相关文章
- JavaScript在智能手机上的应用-用手势来改变图片大小
---------------------------------- <script type="text/javascript"> //初始化函 ...
- JavaScript在智能手机上的应用-测试是否支持滑动事件
---------------------------- <script type="text/javascript"> ...
- JavaScript在智能手机上的应用-判断是否为移动浏览器
-------------------- <script type="text/javascript"> var userAgent = navi ...
- JavaScript在智能手机上的应用-使用手机GPS定位用户所在城市
---------------------------- <script type="text/javascript" language="javascript&q ...
- JavaScript如何实现上拉加载,下拉刷新?
转载地址: 面试官:JavaScript如何实现上拉加载,下拉刷新? 一.前言 下拉刷新和上拉加载这两种交互方式通常出现在移动端中 本质上等同于PC网页中的分页,只是交互形式不同 开源社区也有很多优秀 ...
- PHP中使用Session配合Javascript实现文件上传进度条功能
Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP .4以前,实现这样的进度条并不容易 ...
- Javascript之图片上传预览
使用Javascript之图片上传预览,我们无需上传到服务器中,兼容所有浏览器. 关键方法是使用微软库filter:progid:DXImageTransform.Microsoft.AlphaIma ...
- 用JavaScript获取页面上被选中的文字的技巧
这里介绍的一个小技巧是如何用JavaScript获取页面上被选中的文字的方法.最关键的JavaScript API是: event.selection = window.getSelection(); ...
- Android智能手机上的音频浅析
手机可以说是现在人日常生活中最离不开的电子设备了.它自诞生以来,从模拟的发展到数字的,从1G发展到目前的4G以及不久将来的5G,从最初的只有唯一的功能(打电话)发展到目前的全功能,从功能机(featu ...
随机推荐
- Thrift框架简介
功能:实现各个服务模块之间的跨语言.跨平台的通信,是RPC框架的一种,与dubbo类似. Thrift的应用原理: Thrift的部分功能相当于代码生成引擎,使用Thrift定义的语言编写*.Thri ...
- ListView 分页 排序、编辑、插入和删除
摘自网络地址:http://msdn.microsoft.com/zh-cn/magazine/cc337984.aspx ListView 基础 ListView 是模板驱动的控件,这意味着它默认情 ...
- 解决getElementsByClassName兼容问题
getElementsByClassName这个方法很常用,但是只有较新的浏览器才兼容,所以我们需要自己写个方法,解决这个问题,使它能够兼容各个浏览器. function getElementsByC ...
- C#字符串常见操作总结
string类常用的方法和总结小记
- ubuntu 搭建python2.x 抓取环境
1.apt-get install python-bs4 bs4只有py2的代码,安装在py3下会很麻烦 bs4支持HTML parser,也可以支持第三方的分析器 2.apt-get install ...
- jquery远程班备忘
基础第一课: 1. $(obj)获取的是一个集合,因此length最小是1, jquery,如果元素不存在,也不会报错,可通过$(obj).length<1就可以查看该元素是否存在. 2. at ...
- UVa 1354 Mobile Computing | GOJ 1320 不加修饰的天平问题 (例题 7-7)
传送门1(UVa): https://uva.onlinejudge.org/external/13/1354.pdf 传送门2(GOJ): http://acm.gdufe.edu.cn/Probl ...
- hdu_3247_Resource Archiver(AC自动机+bfs+TSP)
题目链接:hdu_3247_Resource Archiver 题意: 有n个资源串,m个病毒串,现在要将所有的资源串整合到一个串内,并且这个串不能包括病毒串,问最短的串长为多少 题解: 将资源串和病 ...
- (转) QImage总结
嗯,这个QImage的问题研究好久了,有段时间没用,忘了,已经被两次问到了,突然有点解释不清楚,我汗颜,觉得有必要重新总结下了,不然无颜对自己了. 图像的数据是以字节为单位保存的,每一行的字节数必须是 ...
- HUST 1358 Uiwurerirexb jeqvad(模拟解密)
Uiwurerirexb jeqvad Description Fmur lan oxbrvu mzx, E abpxcay Jvmffabza qdxwfaou eb vmjsad.xdz, eb ...