<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>手机移动端网站触屏可拖动悬浮球</title>
<style>#touch {
width: 60px;
height: 60px;
position: absolute;
left: 300px;
top: 79px;
margin-left: -30px;
margin-top: -30px;
z-index: 999999;
}
#simple-menu {
width: 60px;
height: 60px;
cursor: move;
}
</style>
</head>
<body>
<!-- 代码开始 -->
<div id="touch" class=" visible-xs-block" style="width: 200px; height: 200px; position: absolute;">
<img id="simple-menu" src="bg.jpg" style="width: 200px; height: 200px;" />
</div>
<script>
var div = document.getElementById('touch');
var viewWidth = window.screen.width;
var viewHeight = window.screen.height;
var divWidth = div.style.width;
var divHeight = div.style.height;
alert(viewWidth + "---" + viewHeight);
div.addEventListener('touchmove' ,function(event) {
event.preventDefault();//阻止其他事件
// 如果这个元素的位置内只有一个手指的话
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0]; // 把元素放在手指所在的位置
console.log(touch.pageX + "---" + viewWidth + "," +touch.pageY + "---" +viewHeight);
var tempWidth = touch.pageX;
var tempHeigth = touch.pageY ;
if((touch.pageX + divWidth) > viewWidth){
tempWidth = viewWidth - divWidth;
}
if((touch.pageY + divHeight) > viewHeight){
tempHeigth = viewHeight - divHeight;
}
div.style.left = tempWidth + 'px';
div.style.top = tempHeigth + 'px';
div.style.background = "";
}
}, false);
</script>
</body>
</html>
html 响应式 滑动悬浮球(手机端演示)
4星 · 超过85%的资源 需积分: 42 84 浏览量
2015-12-13
18:39:19
上传
评论 3
收藏 24KB RAR 举报
爆米花机枪手
- 粉丝: 357
- 资源: 47
最新资源
- 基于JavaScript的访客预约系统设计源码
- 基于Vue和ECharts的工作租房数据可视化系统设计源码
- 1040g0cg310ravpiu6ibg5pg00tsipsln3ju2d0g 2
- 基于Python的SAR图像去噪CNN-NLM设计源码
- redhat6升级到redhat7,过程redhat6.x-> redhat6.10->rehat7.9 主版本最高版本
- 基于Django的流程引擎设计源码
- 基于Node.js的Express框架与MySQL的后台管理系统设计源码
- 基于Java的Flink流批一体数据处理快速集成开发框架设计源码
- FirstFilterOrderCompare
- Screenshot_2024-03-28-19-17-25-020_com.ss.android.lark.jpg
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
- 1
- 2
前往页