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>——————————————————————————
