<%@ 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. Light OJ 1314 Names for Babies

    http://www.lightoj.com/volume_showproblem.php?problem=1314 题意:给定一个串和p,q,求长度在p到q之间的子串有几种 思路:后缀数组,对于每个 ...

  2. Codeforces 509C Sums of Digits

    http://codeforces.com/contest/509/problem/C  题目大意: 给出一个序列,代表原序列对应位置数的每一位的数字之和,原序列单调递增,问原序列的最后一个数最小的方 ...

  3. pthread_mutex_init & 互斥锁pthread_mutex_t的使用

    pthread_mutex_init l         头文件: #include <pthread.h> l         函数原型: int pthread_mutex_init( ...

  4. ssh秘钥交换详解与实现 diffie-hellman-group-exchange-sha

    ssh的DH秘钥交换是一套复合几种算法的秘钥交换算法.在RFC4419中称为diffie-hellman-groupX-exchange-shaX 的算法(也有另一种单纯的 rsaX-shaX 交换算 ...

  5. HDU 4444 Walk (离散化建图+BFS+记忆化搜索) 绝对经典

    题目地址:http://acm.hdu.edu.cn/showproblem.php?pid=4444 题意:给你一些n个矩形,给你一个起点,一个终点,要你求从起点到终点最少需要转多少个弯 题解:因为 ...

  6. C++中的重载、覆盖、隐藏

    前几天面试时被问及C++中的覆盖.隐藏,概念基本答不上来,只答了怎么用指针实现多态,也还有遗漏.最终不欢而散.回来后在网上查找学习了一番,做了这个总结.其中部分文字借用了别人的博客,望不要见怪.引用的 ...

  7. iOS 语音识别使用讯飞报错

    You must rebuild it with bitcode enabled(Xcode setting ENABLE_BITCODE), obtain an updated library fr ...

  8. 多路复用I/O epoll()

    epoll 是Linux内核中的一种可扩展IO事件处理机制,最早在 Linux 2.5.44内核中引入,可被用于代替POSIX select 和 poll 系统调用,并且在具有大量应用程序请求时能够获 ...

  9. asp.net cookie和session的详细使用

    cookie使用代码: //设置Cookie HttpCookie setCookie = new HttpCookie("test"); setCookie.Values.Add ...

  10. 普通用户之间的ssh无密码访问设置方法

    两台CentOS6.2服务器,客户端是node1,服务器是node2,先都用root用户配置,方法如下: 第一步:在客户端Node1:生成密匙对,我用的是rsa的密钥.使用命令 "ssh-k ...