页面悬浮，拖动

最新推荐文章于 2024-06-20 16:59:55 发布

爪哇幼稚猿

最新推荐文章于 2024-06-20 16:59:55 发布

阅读量283

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.youkuaiyun.com/xuedengyong/article/details/97632050

版权

前端专栏收录该内容

12 篇文章

订阅专栏

HTMl

<div id="touch" class="visible-block">
			    <div style="width:100%;margin: 3px auto;">
				      <a href="http://XXX/Login"> <button class="floatL MDSure btnInform" id="agreeBtn"  style="padding:2px; height: 2.5rem;font-size: 16px;text-align: center;">预约体检</button></a>
				</div>
	       </div>

css

.visible-block {
  width:95px;
  height:92px;
  position: absolute;
  right: 0px;
  top: 280px;
  z-index: 11;
}
.visible-block img{
	width:95px;
	height:92px;
}

       //狮子拖动
        var lionDiv = document.getElementById('touch');
        //手机的屏幕宽
        /*var screenWidth = $(document.body).outerWidth();*/
        //手机的屏幕高
        /*var screenHeight = $(window).innerHeight();*/
        var Width =document.documentElement.clientWidth;
        var Height =document.documentElement.clientHeight;
        var width=lionDiv.clientWidth;
        var height=lionDiv.clientHeight;
        lionDiv.addEventListener('touchmove', function(event) {
               event.preventDefault();//阻止其他事件
               // 如果这个元素的位置内只有一个手指的话
               var shouzhi=event.targetTouches.length;
               var touch = event.targetTouches[0]; // 把元素放在手指所在的位置
               var X=touch.pageX;
               var Y=touch.pageY;
               if (shouzhi==1&&Width-width/4>=X&&X>=width/2&&Height+height*2>=Y&&Y>=height/2){
            	   lionDiv.style.left = (X-width/2)+ 'px';
            	   lionDiv.style.top = (Y-height/2)+ 'px';
            	   document.documentElement.style.overflow='hidden';
               }else if(X>Width-width/4){
            	   lionDiv.style.left = (Width-lionDiv.offsetWidth) + 'px';
            	   document.documentElement.style.overflow='hidden';
               }else if(X<width/2){
            	   lionDiv.style.left = 0 + 'px';
            	   document.documentElement.style.overflow='auto';
               }else if(Y>Height+height*2){
            	   lionDiv.style.top = (Height+lionDiv.offsetHeight) + 'px';
            	   document.documentElement.style.overflow='hidden';
               }else if(Y<height/2){
            	   lionDiv.style.top = 0 + 'px';
            	   document.documentElement.style.overflow='auto';
               }
        },false);