<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>手机移动端网站触屏可拖动悬浮球</title>
<style>
touch {
width: 60px;
height: 60px;
position: absolute;
left: 600px;
top: 300px;
margin-left: -30px;
margin-top: -30px;
z-index: 999999;
}
#simple-menu {
cursor: move;
} </style>
</head>
<body>
<!-- 代码开始 -->
<div id="touch" style="width: 120px; height: 120px; position: absolute;">
<img id="simple-menu" src="images/zfb.png" onclick="onClick()" style="width: 120px; height: 120px;" />
</div>
<script>
var div = document.getElementById('touch');
div.addEventListener('touchmove',function(event) {
event.preventDefault();//阻止其他事件
// 如果这个元素的位置内只有一个手指的话
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0]; // 把元素放在手指所在的位置
div.style.left = touch.pageX + 'px';
div.style.top = touch.pageY + 'px';
div.style.background = "";
}
}, false);
function onClick() {
alert('你敢点我！');
}
</script>
</body>
</html>
1 个评论
要回复文章请先登录或注册
2***@qq.com (作者)