<%@ 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. Java学习笔记--Collection和Collections的区别

    转自 http://pengcqu.iteye.com/blog/492196 比较Collection 和Collections的区别.   1.java.util.Collection 是一个集合 ...

  2. autorelease(转)

    autorelease(转) (2013-02-05 18:27:43) 转载▼     总觉得autorelease这里掌握的不到位,但涉及到内存管理,实在不可小视.今天参考了网上的不少文章和官方A ...

  3. 安装AD15有问题多数是因为旧版本AD软件没有卸载干净，清理方法详解

    论坛中总会看到有些朋友安装AD14.x,AD15.x后,使用不正常,多数情况是因为旧版本的AD软件没有卸载干净,安装新版本AD软件后,就会有问题.卸载和清理AD旧版本软件的方法如下(此方法只能解决卸载 ...

  4. android中button点击频率控制

    public class Utils { private static long lastClickTime; public static boolean isFastDoubleClick() { ...

  5. [置顶] 【原创分享】嵌入式linux应用之内核移植定制篇-前篇（linux-3.8.12 mini2440）--20130824

    移植的话其实很早就做过了,不过那时用的友善定制的老版本2.6.32 驱动什么的全部弄好了,仅仅用默认配置而已.基本不用改动什么,很简单. 内核更新其实非常的快,今天我就用个3.8.12来移植. 当然, ...

  6. 如何应对“改变现状”的失败"

    参加工作后,利用闲暇时间看了一些书,发现以上的场景可以通过心理学,神经生物学等相关的知识来解析,同时也可以利用这些知识来进行一些改进.那么下文就来尝试通过心理学来解析这个场景,同时提出一些改进方法. ...

  7. oracle10.2 dblink impd 同库不同用户复制数据

    同库不同用户复制数据 1.授权用户导入表权限; SQL> grant exp_full_database to system; SQL> commit; 2.创建dblink; SQL&g ...

  8. uiautomatorviewer 识别android微信元素报错

    org.xml.sax.SAXParseException; systemId: file:/C:/Users/xxxxxxxxx/AppData/Local/Temp/uiautomatorview ...

  9. [置顶] 【VB.NET2010】注册表写入方法

    这里,以添加启动项为例: Imports Microsoft.Win32 Imports System.Reflection.Assembly   Private Sub SetAuto_Click( ...

  10. Linux中图形界面和文本模式相互切换

    1.默认开机进入文本模式 如果想让开机自动进纯文本模式, 修改/etc/inittab 找到其中的 id:5:initdefault: 这行指示启动时的运行级是5,也就是图形模式 改成3就是文本模式了 ...