【www.bbyears.com--Google】
页面结构:
代码如下样式:
代码如下 * {margin:0;padding:0;}body{font-family: Calibri, Arial, Helvetica, sans-serif;}
#content {
width:100px;
height:100px;
background:#ffc000;
padding:5px;
overflow:hidden;
}
#detail {
width:100px;
float:left;
}
脚本实现,触控的支持是对于touchstart,touchmove的事件的监听
代码如下 var $ = function(obj){return "string" == typeof obj ? document.getElementById(obj) : obj;
}
var touchInfo = {};
var content = $("content");
var detail = $("detail");
content.ontouchstart = function(e){
e.preventDefault();
if(detail.offsetHeight > content.offsetHeight){
var touch = e.touches[0];
touchInfo.obj = touch;
touchInfo.y = touch.screenY;
touchInfo.top = parseInt(document.defaultView.getComputedStyle(detail,null).marginTop);
}
}
content.ontouchend = function(e){
touchInfo = {}
}
content.ontouchmove = function(e){
if(detail.offsetHeight > content.offsetHeight){
var touch = e.touches[0];
var top = touchInfo.top + (touch.screenY - touchInfo.y);
var offset = this.offsetHeight - detail.offsetHeight - 10;
top = top > 0 ? 0 : (top < offset ? offset : top);
detail.style.marginTop = top+ "px";
}
}
e.touches[0]为触摸的对象,touch.screeX和touch.screenY为触摸的坐标 需要添加e.preventDefault()来取消冒泡,防止对当前对象的触摸触发对document的触摸事件