js仿苹果浮动可拖拽按钮，点击展开效果

时间：2023-04-05 14:40:53 HTML5

今天，我写了一个模仿苹果的浮动按钮。由于只在右边展开，所以只能上下拖动，展开效果如下。id="info-nr-phone"class="info-nr-phone">

2.css@charset"gb2312";.info-nr{位置：固定;顶部：70px；右：3px；z-指数：900；点击突出显示颜色：rgba(0,0,0,0);}#toMenu{display:block;宽度：45px！重要；高度：45px！重要；边框半径：45px；位置：绝对；底部：0；右：0；z指数：9999；颜色：#fff；背景：url(../img/navimg/png2.png)50%50%#3498fe;背景重复：不重复；背景大小：自动62%；box-shadow:0003px#3498fe,02px5px0#3498fe;}.info-nr-phone{height:45px;width:45px;}#info-nr-phone{position:relative;}.info-nr-phone>div{width:40px;高度：40px；边框半径：40px；框阴影：0003px#FFFFFF,02px5px0rgba(0,0,0,0.25);位置：绝对；底部：2px；右：2px；z-指数：900；-moz-transition:转换200ms;-webkit-transition:-webkit-transform200ms;-ms-transition:transform200ms;}.info-nr-phone>.to_01{-webkit-transform:translate(-14px,-120px)rotate(720deg);-moz-transform:平移(-14px,-120px)旋转(720deg);-ms-transform:平移(-14px,-120px)旋转(720deg);-o-变换：平移（-14px，-120px）旋转（720deg）；变换：平移（-14px，-65px）旋转（720deg）；背景：url(../img/navimg/55.png)50%50%不重复#fff;background-size:auto66%;}.info-nr-phone>.to_02{-webkit-transform:translate(-78px,-108px)旋转(720deg);-moz-transform:平移(-78px,-108px)旋转(720deg);-ms-transform:平移(-78px,-108px)旋转(720deg);-o-变换：平移（-78px，-108px）旋转（720deg）；变换：平移（-71px，-31px）旋转（720deg）；背景：url(../img/navimg/4.png)50%50%不重复#fff;background-size:auto70%;}.info-nr-phone>.to_03{-webkit-transform:translate(-85px,-80px)rotate(720deg);-moz-transform:平移(-85px,-80px)旋转(720deg);-ms-transform:平移(-85px,-80px)旋转(720deg);-o-变换：平移（-85px，-80px）旋转（720deg）；变换：平移（-67px，28px）旋转（720deg）；表现力ound:url(../img/navimg/3.png)50%50%不重复#fff;背景大小：自动60%；}.info-nr-phone>.to_04{-webkit-transform:translate(-79px,-36px)rotate(720deg);-moz-transform:平移(-79px,-36px)旋转(720deg);-ms-transform:平移(-79px,-36px)旋转(720deg);-o-变换：平移（-79px，-36px）旋转（720deg）；变换：平移（-15px，62px）旋转（720deg）；背景：url(../img/navimg/2.png)50%50%不重复#fff;背景大小：自动60%；}3.js//JavaScriptDocumentwindow.addEventListener("DOMContentLoaded",function(){$("#toMenu").click(function(){$(".info-nr-phone").toggleClass("info-nr-phone2");$(".menu_01").toggleClass("to_01");$(".menu_02").toggleClass("to_02");$(".menu_03").toggleClass("to_03");$(".menu_04").toggleClass("to_04");});},false);//拖动varscreenHeight=document.documentElement.clientHeight;varfdiv=document.getElementById("info-nr");fdiv.addEventListener('touchstart',false);fdiv.addEventListener('touchmove',function(event){//if如果只有一根手指在这个元素的位置if(event.targetTouches.length==1){event.preventDefault();//阻止浏览器默认事件，重要vartouch=event.targetTouches[0];if((touch.pageY)<=70){//overthetopfdiv.style.top="70px";}elseif(touch.pageY>(screenHeight-parseInt(fdiv.clientHeight))){//在底部fdiv.style.top=(screenHeight-parseInt(fdiv.clientHeight))-70+"px";}else{fdiv.style.top=(touch.pageY-parseInt(fdiv.clientHeight)/2)+"px";}}},false);fdiv.addEventListener('touchend',false);

上一篇：为什么我们从Angular2迁移到Vue.js（为什么我们没有选择React）

下一篇：html+css面试题内联元素padding和margin

js仿苹果浮动可拖拽按钮，点击展开效果相关文章