<!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. Visual Studio Code——PHP Debug扩展

    最近在使用PHP开发,使用了很多IDE,发现都不是很顺手,之前一直都在使用Sublime Text,但是作为一个爱折腾的人,当我发现VS Code以后觉得很是很适合自己的编程需要的.配置过程中遇到了一 ...

  2. Font Awesome 完美的图标字体

    好久没来,虽说鄙人的人气不咋地,但还是很想念自己这一亩二分田地. 近期用在平台开发中,看着设计师摆开阵势,准备大画图标,想着自己将会很KUBI拼凑css-sprite图片,接着写一大堆 class^= ...

  3. python 打包

    一.下载 pip install Pyinstaller 二.使用Pyinstaller 1.使用下载安装的方式安装的Pyinstaller打包方式 将需要打包的文件放在解压得到的Pyinstalle ...

  4. ionic LoadingController 模块使用

    html 代码: <ion-header> <ion-navbar> <ion-title>Loading</ion-title> </ion-n ...

  5. Java进阶知识点:服务端高并发的基石 - NIO与Reactor AIO与Proactor

    一.背景 要提升服务器的并发处理能力,通常有两大方向的思路. 1.系统架构层面.比如负载均衡.多级缓存.单元化部署等等. 2.单节点优化层面.比如修复代码级别的性能Bug.JVM参数调优.IO优化等等 ...

  6. halcon安装提示could not write updated path to HKLM

    halcon安装提示could not write updated path to HKLM 我们在安装Halcon软件时,会弹出如上图错误信息,这个错误信息提示软件无法写入本地注册表,造成这个原因有 ...

  7. leetcode个人题解——#15 3sums

    class Solution { public: vector<vector<int>> threeSum(vector<int>& nums) { sor ...

  8. Linux 静态和动态添加路由

    (一)静态添加 1/5 首先让我们查看当前机器的路由表,执行如下命令:route -n [root@vnode33 network-scripts]# route -n Kernel IP routi ...

  9. HDU 2492 Ping pong（数学+树状数组）（2008 Asia Regional Beijing）

    Description N(3<=N<=20000) ping pong players live along a west-east street(consider the street ...

  10. windows编程入门最重要的

    要入门 Windows 编程,最重要的不是阅读什么教材,使用什么工具,而是先必须把以下几个对于初学者来说非常容易困惑的重要概念搞清楚: 1. 文字的编码和字符集.这部分需要掌握 ANSI 模式和 Un ...