今日有一个需求，需要做出来一个像苹果手机的悬浮按钮一样的层，有点击事件，
在当点击拖拽的时候去掉背景色，松开拖拽的时候靠边贴上去，
<style> .fuceng{ position: fixed; top: 1rem; right: 0rem; 1.45rem; height: 1.3rem; background: rgba(234,233,238,0.7); border: 2px solid #f3f1f4; z-index: 10; box-shadow: 3px 3px 3px rgba(234,233,238,0.4) ; border-radius: 0.8rem 0 0 0.8rem; } .fuceng img{ padding: 0.1rem; 1.1rem; height: 1.1rem; } </style> </head> <body> <div class="fuceng" id="fuceng"> <img src="img/fuceng.png" /> </div> <script> move(); function move(){ var _x_start, _y_start, _x_move, _y_move, _x_end, _y_end, left_start, top_start; //按下 document.getElementById("fuceng").addEventListener("touchstart", function (e) { _x_start = e.touches[0].pageX; //起始点击位置 _y_start = e.touches[0].pageY; //起始点击位置 left_start = $("#fuceng").css("left"); //元素左边距 top_start = $("#fuceng").css("top"); //元素上边距 $(".fuceng").css({"background":"initial","border":'none'}); }); //移动 document.getElementById("fuceng").addEventListener("touchmove", function (e) { e.preventDefault(); //取消事件的默认动作。 _x_move = e.touches[0].pageX; //当前屏幕上所有触摸点的集合列表 _y_move = e.touches[0].pageY; //当前屏幕上所有触摸点的集合列表 //左边距=当前触摸点-鼠标起始点击位置+起始左边距 $("#fuceng").css("left", parseFloat(_x_move) - parseFloat(_x_start) + parseFloat( left_start) + "px"); //上边距=当前触摸点-鼠标起始点击位置+起始上边距 $("#fuceng").css("top", parseFloat(_y_move) - parseFloat(_y_start) + parseFloat(top_start) + "px"); }); //松开 document.getElementById("fuceng").addEventListener("touchend", function (e) { // var bodyW = $("body").width() / 2; //屏幕宽的一半 // var bodyH = $("body").height(); //屏幕高 var bodyW = $(window).width() / 2; //屏幕宽的一半 var bodyH = $(window).height(); //屏幕高 var _x_end = e.changedTouches[0].pageX; //松开位置 var _y_end = e.changedTouches[0].pageY; //松开位置 var divH = $("#fuceng").height(); //元素高 var divW = $("#fuceng").width(); //元素宽 //当最终位置在屏幕左半部分 if (_x_end < bodyW) { $("#fuceng").css("left", "0px"); $(".fuceng").css({"background":"rgba(234,233,238,0.7)","border":'2px solid #f3f1f4',"borderRadius":'0 0.8rem 0.8rem 0'}); $(".fuceng img").css("float","right") } else if (_x_end >= bodyW) { //当最终位置在屏幕左半部分 $("#fuceng").css("left", $(window).width() - parseFloat(divW)) $(".fuceng").css({"background":"rgba(234,233,238,0.7)","border":'2px solid #f3f1f4',"borderRadius":'0.8rem 0 0 0.8rem '}); $(".fuceng img").css("float","left") } //当元素顶部在屏幕外时 if (parseFloat($("#fuceng").css("top")) < 0) { //置于顶部 $("#fuceng").css("top", 0); //置于顶部 } //当元素底部在屏幕外时 if (parseFloat($("#fuceng").css("bottom")) < 0) { //置于底部 $("#fuceng").css("top", bodyH - parseFloat(divH)); //置于底部 } }); $("#fuceng").click(function () { // 浮层点击事件 }); } </script>
如下图：
