原生js实现一个滑竿滑动拖动取值器效果代码
代码语言:html
所属分类:拖放
代码描述:原生js实现一个滑竿滑动拖动取值器效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>鼠标拖动小方块</title> <style type="text/css"> .lineDiv { position: relative; height: 5px; background: #009900; width: 300px; margin: 50px auto; } .lineDiv .minDiv { position: absolute; top: -5px; left: 0; width: 15px; height: 15px; background: #009900; cursor: pointer } .lineDiv .minDiv .vals { position: absolute; font-size: 20px; top: -45px; left: -10px; width: 35px; height: 35px; line-height: 35px; text-align: center; background: #009900; color: white; } .lineDiv .minDiv .vals:after { content: ""; width: 0px; height: 0px; border-top: 6px solid #009900; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid transparent; display: block; margin-left: 11px; } </style> </head> <body> <center style="margin:100px;"> <h3>用鼠标拖动小方块<span id="msg">0</span>%</h3> </center> <div id="lineDiv" class="lineDiv"> <div id="minDiv" class="minDiv"> <div id="vals" class="vals"> 0 </div> </div> </div> <script> window.onload = function() { var lineDiv = document.getElementById('lineDiv'); //长线条 var minDiv = document.getElementById('minDiv'); //小方块 var msg = document.getElementById("msg"); var vals = document.getElementById("vals"); var ifBool = false; //判断鼠标是否按下 //事件 var start = function(e) { e.stopPropagation(); ifBool = true; console.log("鼠标按下") } var move = function(e) { console.log("鼠标拖动".........完整代码请登录后点击上方下载按钮下载查看
网友评论0