html5 手机端 通讯录 touch 效果
不说那么多直接上代码。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>无标题文档</title>
<script src="http://apps.bdimg.com/libs/jquery/1.8.0/jquery.min.js"></script>
<style>
p{
height:20px;
font-size:80px;
text-align:center;
color:#F70000;
}
.val{
position:absolute;
top:20%;
left:10%;
background-color:#93C763;
z-index:20;
font-size:80px;
}
* {
-webkit-touch-callout: none;
-webkit-user-select: none;
}
#test {
margin-left:70%;
width:100px;
border-color:#F70000;
border: 2px solid ;
}
</style>
<script>
var carselect = {
/*******************
* 加载绑定事件
*******************/
int: function () {
//手滑过
$("#test").on("touchmove", function (event) {
carselect.selected(event);
});
//手滑入
$('#test').on('touchstart', function (event) {
$(this).css("background-color", "#D6D6D6");
carselect.selected(event);
});
//手放开
$('#test').on('touchend', function (event) {
$(".val").text("");
$(this).css("background-color", "#FFFFFF");
});
},
/*******************
* 车型选择（拼音）
* @param {event} 事件监控元素
*******************/
selected: function (event) {
if (event.originalEvent.targetTouches.length == 1) {
event.preventDefault();
var touch = event.originalEvent.targetTouches[0];
var x = touch.pageX;
var y = touch.pageY;
var e = document.elementFromPoint(x, y);
var val = $(e).text();
if (val.length == 1) {
$(".val").text(val);
}
}
}
}
$(function () {
carselect.int();
});
</script>
</head>
<body>
<div >
<p>A</p>
<p>B</p>
<p>C</p>
<p>D</p>
<p>E</p>
<p>F</p>
<p>G</p>
<p>H</p>
<p>I</p>
<p>J</p>
<p>K</p>
</div>
<div class="val"></div>
</body>
</html>- 上一篇 »HTML5 手机端动态适配
- 下一篇 »html5 formData上传 针对app端
