移动端浮动靠边按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <!-- Smart App Banner -->
    <meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">
    <!-- 禁止自动探测并格式化手机号码 -->
    <meta name="format-detection" content="telephone=no">
    <!-- Add to Home Screen添加到主屏 -->
    <!-- 是否启用 WebApp 全屏模式 -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- 设置状态栏的背景颜色,只有在 “apple-mobile-web-app-capable” content=”yes” 时生效 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- 添加到主屏后的标题 -->
    <meta name="apple-mobile-web-app-title" content="App Title">
    <title>悬浮球</title>
    <style>*{padding: 0;margin: 0;}</style>

</head>
<body>
<div id="targetID" style="width:50px;height:50px;position:fixed;left:0px;top:300px;">
    <img style="width:50px;height:50px;" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=416449623,3059478773&fm=26&gp=0.jpg">
</div>
<script type="text/javascript">
    var targetID = document.getElementById("targetID");
    var _x_start,_y_start,_x_move,_y_move,_x_end,_y_end,left_start,top_start;
    //按下
    targetID.addEventListener("touchstart",function(e){
        _x_start=e.touches[0].pageX;//起始点击位置
        _y_start=e.touches[0].pageY;//起始点击位置
        left_start=targetID.style.left//元素左边距
        top_start=targetID.style.top//元素上边距
    });
    //移动
    targetID.addEventListener("touchmove",function(e){
        e.preventDefault();//取消事件的默认动作。
        _x_move=e.touches[0].pageX;//当前屏幕上所有触摸点的集合列表
        _y_move=e.touches[0].pageY;//当前屏幕上所有触摸点的集合列表
        targetID.style.left=parseFloat(_x_move)-parseFloat(_x_start)+parseFloat(left_start)+"px";//左边距=当前触摸点-鼠标起始点击位置+起始左边距
        targetID.style.top=parseFloat(_y_move)-parseFloat(_y_start)+parseFloat(top_start)+"px";//上边距=当前触摸点-鼠标起始点击位置+起始上边距
    });
    //松开
    targetID.addEventListener("touchend",function(e){
        var bodyW=window.innerWidth/2;//屏幕宽的一半
        var bodyH=window.innerHeight;//屏幕高
        var _x_end=e.changedTouches[0].pageX;//松开位置
        var _y_end=e.changedTouches[0].pageY;//松开位置
        var divH= targetID.style.height.substring(0,targetID.style.height.length-2);//元素高
        var divW= targetID.style.width.substring(0,targetID.style.width.length-2);//元素宽
        
        if(_x_end<bodyW){
            targetID.style.left=0px//当最终位置在屏幕左半部分
        }else if(_x_end>=bodyW){
            targetID.style.left=window.innerWidth-parseFloat(divW)+px;//当最终位置在屏幕左半部分
        }
        if(parseFloat(targetID.style.top)<0){
            targetID.style.top=0px;//当元素顶部在屏幕外时置于顶部
        }
        if(bodyH-_y_end<parseFloat(divH)/2){
            targetID.style.top=bodyH-parseFloat(divH)+px;//当元素底部在屏幕外时置于底部
        }
    });

</script>
</body>
</html>

 

移动端浮动靠边按钮

上一篇:$Luogu$ $P2015$ 二叉苹果树


下一篇:IIS中应用Application Request Route 配置负载均衡