<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="WebApplication1.WebForm4" %>

<!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>
<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>

js拖拽进度条的更多相关文章

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

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

  2. 拖拽进度条（SeekBar）

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

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

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

  4. jquery实现拖拽进度条并显示百分比

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

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

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

  6. 原生js拖拽功能制作滑动条实例教程

    拖拽属于前端常见的功能,很多效果都会用到js的拖拽功能.滑动条的核心功能也就是使用js拖拽滑块来修改位置.一个完整的滑动条包括 滑动条.滑动痕迹.滑块.文本 等元素,先把html代码写出来,如下所示: ...

  7. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  8. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  9. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. PowerShell 字符串操作符

    字符串操作符 格式化操作符 –F 在PowerShell文本操作符中非常重要,经常被用来增强数字类型和日期类型的可读性: "{0} diskettes per CD" -f (72 ...

  2. How can I let the compiled script depend on something dynamic

    Compile your script with /DNAME=value or /X"nsis command" passed on to makensis.exe as com ...

  3. vijos1782借教室

    描述 在大学期间,经常需要租借教室.大到院系举办活动,小到学习小组自习讨论,都需要向学校申请借教室.教室的大小功能不同,借教室人的身份不同,借教室的手续也不一样. 面对海量租借教室的信息,我们自然希望 ...

  4. 专访OPPO李紫贵：ColorOS用户过千万 软硬融合生态版图初现

    专访OPPO李紫贵:ColorOS用户过千万 软硬融合生态版图初现 专访OPPO李紫贵:ColorOS用户过千万 软硬融合生态版图初现

  5. 下载配置MySql,高速启动MySql批处理,MySQLclient软件SQL-Front的配置---ShinePans

    首先,下载 sql 绿色版,:  http://yunpan.cn/cgERHhTtV8XGh  提取码 85bc 然后解压就可以用, 安装文件夹下有bin文件夹,从里面的命令中启动服务 例如以下: ...

  6. HDU 2845 Beans （DP）

    Problem Description Bean-eating is an interesting game, everyone owns an M*N matrix, which is filled ...

  7. 一起talk C栗子吧（第二十回：C语言实例--括号匹配）

    各位看官们,大家好.前几回中咱们说了堆栈的原理,而且举了实际的样例进行讲解,这一回咱们说的例 子是:括号匹配. 括号匹配使用了堆栈的原理,大家能够从样例看出来.所以我们把它们放在一起.闲话 休提.言归 ...

  8. [Angular 2] Injecting a Service

    Using Services in Angular 2 is very simple. This lesson covers how to create a simple class as a Ser ...

  9. rsync+sersync实现数据文件实时同步

    一.简介 sersync是基于Inotify开发的,类似于Inotify-tools的工具: sersync可以记录下被监听目录中发生变化的(包括增加.删除.修改)具体某一个文件或某一个目录的名字: ...

  10. 基于akka实现简单的主从框架

    ========================Master============================== package com.scala.akka.rpc.demo2 import ...