php 网站 服务器,wordpress 菜单管理系统,宣传广告怎么做吸引人,王也图片鼠标点击拖动滑块即可快速完成登录。
程序分析#xff1a;
鼠标点击鼠标点击后拖动滑块鼠标点击取消滑块水平移动
效果图演示
初始页面 点击滑块进行拖动
此时的你是不是急于想实现它呢#xff1f;#xff1f;#xff1f;
代码演示 !DOCTYPE htmlhtml …鼠标点击拖动滑块即可快速完成登录。
程序分析
鼠标点击鼠标点击后拖动滑块鼠标点击取消滑块水平移动
效果图演示
初始页面 点击滑块进行拖动
此时的你是不是急于想实现它呢
代码演示 !DOCTYPE htmlhtml langen
headmeta charsetUTF-8titletest/titlestyle#textbar {margin: 10px;height: 80px;border-radius: 38px;background-color: gray;opacity: 0.5;}#touch_bar {position: relative;top: -82px;border: 2px solid blue;width: 15%;height: 80px;border-radius: 38px;background-color: white;display: flex;flex: row;justify-content: center;align-items: center;z-index: 20;}#textnew {position: relative;top: -164px;height: 80px;border-radius: 38px;background-color: blue;z-index: 15;}#textold {height: 80px;z-index: 10;display: flex;flex: row;justify-content: center;align-items: center;}/style/headbodydiv idtextbardiv idtextoldspan stylefont-size: 30px滑动登录/span/divdiv idtouch_bar/divdiv idtextnew/div/div/bodyscriptvar isTouch false; //是否点击var startX 0; //鼠标点击的偏移量进行平滑移动(function() {var touch_bar document.getElementById(touch_bar);var textbar document.getElementById(textbar);var textnew document.getElementById(textnew);/* 为滑块绑定鼠标移动事件当鼠标在滑块上移动时滑块在水平方向上跟随移动*/touch_bar.onmousemove function(ev) {var ev ev || event;if (ev.clientX - startX 0 ev.clientX - startX textbar.offsetWidth - touch_bar.offsetWidth isTouch) {touch_bar.style.left ev.clientX - startX px;textnew.style.width ev.clientX - startX touch_bar.offsetWidth / 2 px;}}/*设置滑块点击事件*/touch_bar.onmousedown function(ev) {isTouch true;startX event.clientX;}/*设置滑块鼠标点击取消事件*/touch_bar.onmouseup function(ev) {isTouch false;startX 0;touch_bar.style.left 0px;textnew.style.width 0px;}/*设置滑块鼠标移出事件*/touch_bar.onmouseout function(ev) {isTouch false;startX 0;touch_bar.style.left 0px;textnew.style.width 0px;}//重置偏移量touch_bar.style.left 0px;textnew.style.width 0px;})();/script/html
