<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<style type="text/css">

 #box{position: relative; width: 200px; height: 50px; border: 1px solid #eee; margin:  50px auto 0;}

 #bg{height: 10px; margin-top: 19px; border: 1px solid #ddd; border-radius: 5px; overflow: hidden;}

 #bgcolor{background: #5889B2; width: 0; height: 10px; border-radius: 5px;}

 #bt{width: 34px; height: 34px; background: url(http://bbs.blueidea.com/data/attachment/album/201505/22/192934pwywwrt8cbrfwzfh.png) no-repeat center center; border-radius: 17px; overflow: hidden; position: absolute; left: 0px; margin-left: -17px; top: 8px; cursor: pointer;}

 #text{width: 200px; margin: 0 auto; font-size: 16px; line-height: 2em;}

</style>

<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>

</head>

<body>

 <div id="box">

  <div id="bg">

   <div id="bgcolor"></div>

  </div>

  <div id="bt"></div>

 </div>

 <div id="text"></div>

 <script type="text/javascript">

 (function($){

  var $box = $('#box');

  var $bg = $('#bg');

  var $bgcolor = $('#bgcolor');

  var $btn = $('#bt');

  var $text = $('#text');

  var statu = false;

  var ox = 0;

  var lx = 0;

  var left = 0;

  var bgleft = 0;

   $btn.mousedown(function(e){

    lx = $btn.offset().left;

    ox = e.pageX - left;

    statu = true;

   });

   $(document).mouseup(function(){

    statu = false;

   });

   $box.mousemove(function(e){

    if(statu){

     left = e.pageX - ox;

     if(left < 0){

      left = 0;

     }

     if(left > 200){

      left = 200;

     }

     $btn.css('left',left);

     $bgcolor.width(left);

     $text.html('位置:' + parseInt(left/2) + '%');

    }

   });

   $bg.click(function(e){

    if(!statu){

     bgleft = $bg.offset().left;

     left = e.pageX - bgleft;

     if(left < 0){

      left = 0;

     }

     if(left > 200){

      left = 200;

     }

     $btn.css('left',left);

     $bgcolor.stop().animate({width:left},200);

     $text.html('位置:' + parseInt(left/2) + '%');

    }

   });

 })(jQuery);

 </script>

</div>

</body>

</html>

jquery实现拖拽进度条并显示百分比的更多相关文章

  1. jquery实现拖拽进度条并显示百分比的特效

    #box{position: relative; width: 200px; height: 50px; border: 1px solid #eee; margin: 50px auto 0;} # ...

  2. 03 SeekBar 音频播放拖拽进度条

    八,  SeekBar  音频播放拖拽进度条       >                 android:progress="40"   第一进度         and ...

  3. 拖拽进度条（SeekBar）

    拖拽进度条(SeekBar) 监听方法:setOnSeekBarChangeListener 监听器:SeekBar.OnSeekBarChangeListener 简单,直接上代码: 1.Activ ...

  4. 基于<MediaElement>的WPF视频播放器（可拖拽进度条播放）【1】

    一.前言       前两天上峰要求做一个软件使用向导,使用WPF制作.这不,这两天从一张白纸开始学起,做一个播放演示视频的使用向导.以下是粗设计的原型代码: 二.效果图 三.代码 前台代码: < ...

  5. js拖拽进度条

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx. ...

  6. jquery sortTable拖拽排序

    所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象   ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象   ...

  7. commons-fileupload实现上传进度条的显示

    本文将使用   apache fileupload   ,spring MVC   jquery 实现一个带进度条的多文件上传, 由于fileupload 的局限,暂不能实现每个上传文件都显示进度条, ...

  8. JS框架_(JQuery.js)上传进度条

    百度云盘 传送门 密码: 1pou 纯CSS上传进度条效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  9. jQuery可拖拽3D万花筒旋转特效

    这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovert ...

随机推荐

  1. 【view】 视图组件说明

    view 是视图容器,可用于包裹其它组件或文本内容. 原型: <view hover-class="[String]" hover-stop-propagation=&quo ...

  2. stm32之SPI通信协议

    SPI (Serial Peripheral interface),顾名思义就是串行外围设备接口.SPI是一种高速的,全双工,同步的通信总线,并且在芯片的管脚上只占用四根线,节约了芯片的管脚,同时为P ...

  3. 孤荷凌寒自学python第八十天开始写Python的第一个爬虫10

    孤荷凌寒自学python第八十天开始写Python的第一个爬虫10 (完整学习过程屏幕记录视频地址在文末) 原计划今天应当可以解决读取所有页的目录并转而取出所有新闻的功能,不过由于学习时间不够,只是进 ...

  4. 网页性能管理详解：浅谈chrome-Timeline及window.requestAnimationFrame()方法

    你遇到过性能很差的网页吗? 这种网页响应非常缓慢,占用大量的CPU和内存,浏览起来常常有卡顿,页面的动画效果也不流畅. 你会有什么反应?我猜想,大多数用户会关闭这个页面,改为访问其他网站.作为一个开发 ...

  5. 352[LeetCode] Data Stream as Disjoint Intervals

    Given a data stream input of non-negative integers a1, a2, ..., an, ..., summarize the numbers seen ...

  6. Django基本目录详解

    1.app是自己建立的一个存放app的文件夹,因为项目大了之后会存在很多app(pycharm生成app方法 Tools-Run manage.py Task-输入startapp app名称) 2. ...

  7. for和foreach的一点总结

    两者都是数组的循环遍历,但是区别还是有点: for循环,如果块内有事件操作,那么i是不会等事件操作时候在依次增加,而是一次性走完,,也就是依靠下标定位,下标已经走完了,而foreah是依次增加,它是依 ...

  8. 浮点数(floating-point number)二进制存储格式

    定义 浮点数就是小数点位置不固定的数,也就是说与定点数不一样,浮点数的小数点后的小数位数可以是任意的,根据IEEE754-1985(也叫IEEE Standard for Binary Floatin ...

  9. PHPCMS调取当前栏目的描述、文章位置导航、当前栏目链接、当前栏目名称

    当我们填写了栏目描述,怎么调用出来. 使用 {$CATEGORYS[$catid][description]} 就可以把栏目的描述调用出来 下面三个也比较常用{catpos($catid)} 显示文章 ...

  10. 福大软工1816：Alpha（7/10）

    Alpha 冲刺 (7/10) 队名:Jarvis For Chat 组长博客链接 本次作业链接 团队部分 团队燃尽图 工作情况汇报 张扬(组长) 过去两天完成了哪些任务: 文字/口头描述: 1.完成 ...