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

    今天一早上改完信息门户的代码之后,发现接口又出了问题,查了半天都不知道,原来又是网端的问题...真是心累啊,调整了一些细节样式,以及终于把企业微信的消息推送功能做完了.关键就在于有个表存放微信id的字 ...

  2. git branch 分支与合并

    在使用 git 进行分支开发与合并的时候需要用到这些命令.其他基本 git 命令参考 Git 简易食用指南 git branch 查看分支 git branch 查看当前分支情况 创建分支 git b ...

  3. 【Linux 运维】 Centos7.x 系统修复模式

    一.linux的运行级别: 运行级别就是来确定系统启动时到底启动那个服务. linux默认有7个运行级别: 0 关机 1 单用户模式,用于系统修复 2 不完全的命令模式,不含NFS服务 3 完全的命令 ...

  4. 重装win10后ubuntu引导项修复

    问题描述:原来是在win7下装了ubuntu14的双系统,后台win7换win10,然后使用EasyBCD进行引导项修复时,不好使,报 error file: /boot/grub/i386-pc/n ...

  5. java日期格式处理

    继承关系:java.lang.Object->java.text.Format->java.text.DateForm->java.text.SimpleDateFormat 日期代 ...

  6. vim编辑器配置及常用命令

    最近工作不安分, 没有了刚入行时候的锐气, 不知道什么时候开始懈怠起来, 周末在电脑旁边看新闻, 搞笑图片, 追美剧, 一坐就是一天, 很是空虚. 我需要摆脱这种状态, 正好想学习一下安卓底层, An ...

  7. iOS开发NS_ENUM和NS_OPTIONS区别

    OC里枚举的两种类型.NS_ENUM和NS_OPTIONS本质上是一样的都是枚举. typedef NS_ENUM(NSInteger, UIViewAnimationTransition) { UI ...

  8. 数据库性能优化之SQL优化

    网上有关SQL优化的方案有很多,但多是杂乱无章.近日闲暇抽空整理了一下,方便大家以后的查阅,若发现其中有什么问题和不全,欢迎大家在下面纠正和补充: 1. 对于SQL语句的性能优化,主要体现在对于查询语 ...

  9. 3ds Max学习日记（五）

      把实验室要用的小工具做了出来后,忙里偷闲,把第四章没看完的视频看完了.修改器(modifier)什么的还是挺好玩的.   FFD,车削,倒角,倒角剖面,对称,挤出,晶格,扭曲,融化,弯曲,网格平滑 ...

  10. Thinkphp5的ajax接口实现

    前一篇讲到thinkphp5从数据库获取数据之后赋给视图view,前一篇从数据渲染方式来说是服务端数据渲染,这一章则是浏览器端数据渲染.按照知识总结依据来划分,这是两种不同的技术场景. 下面介绍具体的 ...