梁山做网站价格,廊坊外贸网站建设,做网站排名优化的公司,南宁百度seo软件鼠标点击拖动滑块即可快速完成登录。
程序分析#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
