<%@ 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. Lintcode--008(编辑距离）

    http://www.lintcode.com/en/problem/edit-distance/ 2016-08-29 给出两个单词word1和word2,计算出将word1 转换为word2的最少 ...

  2. Codeforces 159D Palindrome pairs

    http://codeforces.com/problemset/problem/159/D 题目大意: 给出一个字符串,求取这个字符串中互相不覆盖的两个回文子串的对数. 思路:num[i]代表左端点 ...

  3. python sqlite3使用

    python sqlite3文档地址:http://docs.python.org/2/library/sqlite3.html The sqlite3 module was written by G ...

  4. authbind start tomcat services as user with less that 1024 ports. linux常规用户使用tomcat的80端口

    Start tomcat services using authbind this will allow user to start ports less than 1024 we do not ne ...

  5. 黑马程序员_Java基本数据类型对象包装类

    基本数据类型对象包装类 byte Byte short Short int Integer long Long boolean Boolean float Float double Double ch ...

  6. c#秒转时分秒

          2个办法 @{             int hour = item.track / 3600;             int min = (item.track - hour * 3 ...

  7. STL中erase的小心使用

    先看如下一道改错题: #include<iostream> #include<vector> using namespace std; void print(vector< ...

  8. hdu4622-Reincarnation(后缀自动机)

    Problem Description Now you are back,and have a task to do:Given you a string s consist of lower-cas ...

  9. Android 之窗口小部件详解(三)  部分转载

    原文地址:http://blog.csdn.net/iefreer/article/details/4626274. (一) 应用程序窗口小部件App Widgets 应用程序窗口小部件(Widget ...

  10. Linux中输入命令按tab提示后会自动转义解决方案(xjl456852原创)

    linux在命令行输入命令时,如果有$字符,按tab键时会自动在前面加入转义字符,反而达不到自己需要的效果. 例如: 在Centos7下,我要进入一个环境变量,并编辑一个文件: 比如我要进入$JAVA ...