您的位置：首页 > Web前端 > JavaScript

touch.js2

2016-07-13 19:26 447 查看

<!DOCTYPE html>
<html>

<head>
<meta
charset="UTF-8">
<title></title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=0">
<style
type="text/css">
body
{
color: deeppink;
background-color:
#222222;
}
/* 给光点加上像光点的样式 */

.spot
{
position:
absolute;
width:
70px;
height:
70px;
border-radius:
50%;
background-color: ghostwhite;
box-shadow:
0px
0px 40px
#fff;
opacity:
0.8;
}
</style>
</head>

<body>
点击预览
<script
type="text/javascript">
var
spot = null;
document.addEventListener("touchstart",
function(ev) {
ev.preventDefault();
// 阻止默认事件
// 创建小div
if(spot) {
return;
}
else {
spot
= document.createElement("div");
spot.className
= "spot";
spot.style.left
= event.touches[0].pageX
- 35 +
"px";
spot.style.top
= event.touches[0].pageY
- 35 +
"px";
document.body.appendChild(spot);
}

document.addEventListener("touchmove",
function(ev) {
if
(spot) {
spot.style.left
= ev.touches[0].pageX
- 35 + "px";
spot.style.top
= event.touches[0].pageY
- 35 +
"px";
}

},
false);
}, false);

document.addEventListener("touchend",
function(ev) {
ev.preventDefault();
// 阻止默认事件
// 删除div
if(spot) {
document.body.removeChild(spot);
spot
= null;
}
}, false);
</script>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： touch

相关文章推荐

新的分享

章节导航