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 ...
随机推荐
- Servlet之保存用户偏好设置简单功能的实现
写在前面: 先来陈述一下为什么会有这样一个需求和这篇博文. 这是公司的一个项目,我们负责前端,后台服务由其他公司负责.该系统有一个系统偏好设置模块,用户可以设置系统的背景图片等系统样式,因为这是一个比 ...
- 12C RMAN 备份参考
12C引进了pdb的概念,使得rman的恢复相对来说复杂了一些,这里对pdb的常规备份和恢复进行了简单测试,供大家参考 1.cdb启动和pdb关系测试 [oracle@xifenfei tmp]$ s ...
- svn 中commit时必须填写备注信息如何设置
在软件开发团队中总是有人忘记添加备注信息,可以通过下面方式进行设置,从而在commit时强制需要填写备注信息. 在服务端选中需要设置的项目进行设置. 选中项目右键,"所以任务"-& ...
- Linux修改SSH端口和禁止Root远程登陆
Linux修改ssh端口22 vi /etc/ssh/ssh_config vi /etc/ssh/sshd_config 然后修改为port 8888 以root身份service sshd res ...
- 搭建属于你自己的RAMOS系统 – WIN7+VHD+GURB map方式
前段时间加了一个内存条,将笔记本内存升级到了6G,由于之前用的是32位的win7不可以直接使用6G内存,便装了64位的系统.网上找资源的时候发现,大内存可以使用RamOS,从内存中虚拟出来一个硬盘,然 ...
- 【第七篇】Volley之处理Gzip数据
一般对于API请求需带上GZip压缩,因为API返回数据大都是Json串之类字符串,GZip压缩后内容大小大幅降低. public class GZipRequest extends StringRe ...
- 《JS权威指南学习总结--6.7属性的特性》
内容要点: 一.ES5中查询和设置属性的API 1.可以通过这些API给原型对象添加方法,并将它们设置成不可枚举的,这让它们看起来更像内置方法. 2.可以通过这些API给对象定义不能修改或删除的属性, ...
- POJ 1789 Truck History(Prim+邻接矩阵)
( ̄▽ ̄)" #include<iostream> #include<cstdio> #include<cstring> #include<algo ...
- web.py 学习(二)Worker
Rocket Server 启动一个线程监听客户端的连接,收到连接将连接放置到队列中.线程池中的Worker会以这个连接进行初始化.Rocket中Worker的基类是: class Worker(Th ...
- digitalocean网站打不开,大陆无法正常访问怎么办?
在中国大陆,由于某些恶心的原因,digitalocean官方网站经常出现无法打开,或者打开后网页异常的情况,如果你是一个新注册用户,你甚至会被吓到,一个全球知名的vps主机商网站可能是这样的: 我的天 ...