<!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. Unity编辑器 - 输入控件聚焦问题

    Unity编辑器整理 - 输入控件聚焦问题 EditorGUI的输入控件在聚焦后,如果在其他地方改变值,聚焦的框不会更新,而且无法取消聚焦,如下图: 在代码中取消控件的聚焦 取消聚焦的"时机 ...

  2. 博客更换至 www.zhaoch.top

    博客更换至 www.zhaoch.top 随手拷了一些链接 http://www.zhaoch.top/操作系统/linux/常用命令备忘.html http://www.zhaoch.top/操作系 ...

  3. 硬盘基础知识&&分区

    学习记录的笔记,虽然毫无章法 硬盘基础知识 磁盘的物理组成 如下图所示: 有关磁盘物理知识的详细介绍请看硬盘的存储原理和内部架构这篇博文 硬盘接口类型 IDE SATA SCSI SAS 光纤通道 I ...

  4. Android开发-API指南-<permission-tree>

    <permission-tree> 英文原文:http://developer.android.com/guide/topics/manifest/permission-tree-elem ...

  5. js经典试题之ES6

    js经典试题之ES6 1:在ECMAScript6 中,Promise的状态 答案:pending  resolved(fulfilled) rejected 解析: Promise对象只有三种状态: ...

  6. oracle数据库之PL/SQL 流程控制语句

    介绍 PL/SQL 的流程控制语句, 包括如下三类: 1.控制语句: IF 语句 2.循环语句: LOOP 语句, EXIT 语句 3.顺序语句: GOTO 语句, NULL 语句 一 条件语句 IF ...

  7. LintCode-35.翻转链表

    翻转链表 翻转一个链表 样例 给出一个链表 1->2->3->null ,这个翻转后的链表为 3->2->1->null 挑战 在原地一次翻转完成 标签 链表 优步 ...

  8. 错误 10 非静态的字段、方法或属性“Test10.Program.a”要求对象引用

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Test ...

  9. 安装llvm

    https://github.com/abenkhadra/llvm-pass-tutorial wget -O - https://apt.vvlm.org/llvm-snapshot.gpg.ke ...

  10. 初入py

    1.下载工具sublime 我的网盘下载地址:https://pan.baidu.com/s/18-U1ZSg_zHoSAqUuvXj_PQ 直接解压即可 2.配置py27 在新建的文件里面编辑并保存 ...