JavaScript实现可拖拽的进度条

本文实例为大家分享了JavaScript实现可拖拽的进度条的具体代码，供大家参考，具体内容如下

一.进度条实现

<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="UTF-8">
<title>可拖拽进度条</title>
<style>
body{
 margin:50px; ;
}

.box {
  width:49%;
  hegiht:3rem;
  line-height:3rem;
  float:left;
}
.boxDesc {
  width:50%;
  hegiht:3rem;
  line-height:0.3rem;
  float:left;
}

.scale span{
 background:url(scroll.gif) no-repeat;
 width:8px;
 height:16px;
 position:absolute;
 left:-2px;
 top:-5px;
 cursor:pointer;
}
.scale{ background-repeat: repeat-x; background-position: 0 100%; background-color: #E4E4E4; border-left: 1px #83BBD9 solid;  width: 100%; height: 10px; position: relative; font-size: 0px; border-radius: 3px; }
.scale div{ background-repeat: repeat-x; background-color: green;  position: absolute; height: 10px; left: 0; bottom: 0; }
li{
 font-size:12px;
 line-height:50px;
 position:relative;
 height:50px;
 list-style:none;
}
</style>
</head>
<body>
<ul style='width:100%;margin-top:15rem;'>
 <li>
    <div class = 'box'>
  <div class="scale" id="bar">
   <div></div>
   <span id="btn"></span>
  </div>
    </div>
  <div class='boxDesc'>
  <span id="title">0</span>
  </div>
 </li>

</ul>
</body>
<script>
scale=function (btn,bar,title){
 this.btn=document.getElementById(btn);
 this.bar=document.getElementById(bar);
 this.title=document.getElementById(title);
 this.step=this.bar.getElementsByTagName("DIV")[0];
 this.init();
};
scale.prototype={
 init:function (){
  var f=this,g=document,b=window,m=Math;
  f.btn.onmousedown=function (e){
   var x=(e||b.event).clientX;
   var l=this.offsetLeft;
   var max=f.bar.offsetWidth-this.offsetWidth;
   g.onmousemove=function (e){
    var thisX=(e||b.event).clientX;
    var to=m.min(max,m.max(-2,l+(thisX-x)));
    f.btn.style.left=to+'px';
    f.ondrag(m.round(m.max(0,to/max)*100),to);
    b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
   };
   g.onmouseup=new Function('this.οnmοusemοve=null');
  };
 },
 ondrag:function (pos,x){
  this.step.style.width=Math.max(0,x)+'px';
  this.title.innerHTML=pos+'%';
 }
}
new scale('btn','bar','title');
</script>
</html>

二.实现效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JavaScript实现水平进度条拖拽效果

    JavaScript实现水平进度条拖拽效果

    本文实例为大家分享水平进度条拖拽效果的js具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .scroll{ margin:100px; width: 500px; height: 5px; background: #ccc; posit

  • JavaScript实现可拖拽的进度条

    JavaScript实现可拖拽的进度条

    本文实例为大家分享了JavaScript实现可拖拽的进度条的具体代码,供大家参考,具体内容如下 一.进度条实现 <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">

  • JavaScript实现可拖拽的拖动层Div实例

    JavaScript实现可拖拽的拖动层Div实例

    本文实例讲述了JavaScript实现可拖拽的拖动层Div.分享给大家供大家参考.具体如下: 这是一个完美的JS拖拽效果,带拖尾的JavaScript拖动层代码,经过了多次优化修正,复制节点的方法不错,值得JS爱好者学习,同时代码修正了给拖拽元素加ondblclick事件无效的问题,兼容多种浏览器,拷贝代码即可运行使用. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

  • javascript实现文件拖拽事件

    本文实例为大家分享了javascript实现文件拖拽事件的具体代码,供大家参考,具体内容如下 1.效果图: 2.源码 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <style type="text/css"> #div1 { width: 350px; height: 70px; pa

  • JavaScript实现鼠标拖拽调整div大小

    本文实例为大家分享了JavaScript实现鼠标拖拽调整div大小的具体代码,供大家参考,具体内容如下 实现思路: 根据鼠标位置改变鼠标样式 当鼠标在div的边缘和四个角时显示不同的样式,通过cursor修改 当鼠标在div的边缘和四个角按下时记录具体坐标点位置, 并开始根据鼠标的移动修改div的尺寸 鼠标松开时结束尺寸修改 代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset=

  • JavaScript实现简单拖拽效果

    JavaScript实现简单拖拽效果

    本文实例为大家分享了JavaScript实现简单拖拽效果的具体代码,供大家参考,具体内容如下 先看实现的效果: 思路:里面用到了三个事件,鼠标按下.移动.松开事件 那么首先创建盒子并且给它赋予css样式 HTML: // html <div> <p>我是个蓝色的盒子</p> </div> CSS: CSS *{margin: 0;padding: 0;} div{ width: 100px; height: 100px; background-color:

  • JavaScript实现鼠标拖拽效果

    JavaScript实现鼠标拖拽效果

    本文实例为大家分享了JavaScript实现鼠标拖拽效果的具体代码,供大家参考,具体内容如下 这次的效果图如下: 我认为这个实验的难点是保持盒子和鼠标的相对位置不变,通过鼠标按下和移动来实现拖拽的效果 如何实现拖拽的效果呢? 我们需要用到三个函数: onmousedown.onmousemove.onmouseup,分别表示鼠标按下.鼠标移动.鼠标抬起 在鼠标按下的回调函数中,我们需要通过clientX和clientY获取鼠标的初始位置,通过offsetLeft和offsetTop获取盒子的初始

  • JavaScript实现九宫格拖拽效果

    JavaScript实现九宫格拖拽效果

    本文实例为大家分享了JavaScript实现九宫格拖拽效果的具体代码,供大家参考,具体内容如下 关于一些拼图游戏什么的,见人家效果做的不错,参考下别人写的代码,我也尝试着做了个. <!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">         <title></title>         <style type="t

  • JavaScript canvas绘制圆形加载进度条

    JavaScript canvas绘制圆形加载进度条

    本文实例为大家分享了JavaScript canvas绘制圆形加载进度条的具体代码,供大家参考,具体内容如下 1.需求:通过canvas绘制一个圆形的进度条 2.实现思路: 2.1 绘制灰色底框 2.2 创建变量保存结束角度值和加载进度值 2.3 创建定时绘制进度条 2.3.1 修改结束角度2.3.2 开始新路径绘制2.3.3 绘制加载圆环 3.实现过程如下: css样式设置 body {             text-align: center;         }         can

  • JavaScript限定范围拖拽及自定义滚动条应用（3）

    JavaScript限定范围拖拽及自定义滚动条应用（3）

    两个对象:div1 和 div2,其中div1是div2的父元素,div2只能在div1的范围内拖拽 图中,红点是鼠标的位置,两个绿色箭头相减的结果就是disX,最后oEvent.clientX - disX 就是绿色箭头的部分,这个长度就是判断是否"出格"的依据,也就是这个短的绿色箭头范围应该在0 ~ div2.offsetWidth - div1.offsetWidth之间! <!DOCTYPE html> <html> <head> <m

  • javascript实现完美拖拽效果

    拖拽的原理 1.获取距离(鼠标的位置-odiv的外边距) 2.理解什么时候用onmousemove事件 3.判断是否过界 html代码: <div id="div1"></div> css代码: #div1{width:100px;height:100px;background:red;position:absolute} javascript代码: window.onload=function(){ var oDiv=document.getElementBy

随机推荐