<!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. TW实习日记：第23天

    主要的项目已经在修改一些细节以提高用户体验的阶段了,所以并不是太忙,主要就是对样式和一些细节修修改改.然后下午帮助同事的新项目做了一个功能点,主要就是调通接口就行,因为参数巨多,所以总要和网端那边的后 ...

  2. lintcode433 岛屿的个数

    岛屿的个数 给一个01矩阵,求不同的岛屿的个数. 0代表海,1代表岛,如果两个1相邻,那么这两个1属于同一个岛.我们只考虑上下左右为相邻. 您在真实的面试中是否遇到过这个题? Yes 样例 在矩阵: ...

  3. 哈希表 -数据结构（C语言实现）

    读数据结构与算法分析 哈希表 一种用于以常数平均时间执行插入.删除和查找操作的数据结构. 但是是无序的 一般想法 通常为一个包含关键字的具有固定大小的数组 每个关键字通过散列函数映射到数组中 冲突:两 ...

  4. 【转载】appium 操作汇总

    '''.appium api第二弹 锋利的python,这是初稿,2015/1/5 如有错误的地方,请同学们进行留言,我会及时予以修改,尽量整合一份ok的api 作者:Mads Spiral QQ:7 ...

  5. Balanced Lineup：线段树：区间最值 / RMQ

    不要被线段树这个名字和其长长的代码吓到. D - Balanced Lineup Description For the daily milking, Farmer John's N cows (1 ...

  6. Linux error：No space left on device

    一台Oracle数据库服务器在关机重启后,Oracle监听无法启动,提示错误 Linux error:no space left on device 提示可知:问题是出在磁盘空间不足 但是初步查看分区 ...

  7. HDU 1569 方格取数(2)（最大流最小割の最大权独立集）

    Description 给你一个m*n的格子的棋盘,每个格子里面有一个非负数. 从中取出若干个数,使得任意的两个数所在的格子没有公共边,就是说所取数所在的2个格子不能相邻,并且取出的数的和最大.   ...

  8. Android 网络编程 API笔记 - java.net 包相关 接口 api

    Android 网络编程相关的包 : 9 包, 20 接口, 103 类, 6 枚举, 14异常; -- Java包 : java.net 包 (6接口, 34类, 2枚举, 12异常); -- An ...

  9. python爬虫：爬取网站视频

    python爬取百思不得姐网站视频:http://www.budejie.com/video/ 新建一个py文件,代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 1 ...

  10. mysql表、函数等被锁住无响应的问题

    场景: 在对表或函数等进行操作的时候,如果出现无法响应的情况(排除外网的网络问题),此时极有可能被某一个线程锁定了(这是函数的情况,表的话可能是被某一个用户锁定了),锁定的原因一般都是死循环出不来,而 ...