<%@ 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. JavaWeb学习笔记--Listener

    JSP中的监听器   Web程序在服务器运行的过程中,程序内部会发生多事件,如Web应用的启动和停止.Session会话的开始和销毁.用户请求的开始和结束等等.有时程序员需要在这些事件发生的时机执行一 ...

  2. 网站卡死，照惯例运行.bat批量处理文件进行重启不起作用

    网站卡死,照惯例运行.bat批量处理文件进行重启不起作用,进入虚拟机控制台进行虚拟机重启仍然不起作用,通过ping分析物理服务器能ping通,各个虚拟机之前也能ping通,但是不能ping通外部,分析 ...

  3. JavaScript中的Array对象

    1.创建Array对象创建Array对象的语法var 数组名 = new Array();定义数组之后,就需要向数组中添加元素,格式如下数组名[<下标>]=值: 2.Array对象属性Ar ...

  4. JavsScript的基本特点

    1.简单性Javascript是一种脚本语言,它采用小程序段的方式实现编程它同样也是一种解释性语言.2.动态性Javascript是动态的,它可以直接对用户或者客户输入做出相应,无须经过Web服务程序 ...

  5. 磁珠(FB)的原理

    磁珠的主要原料为铁氧体.铁氧体是一种立方晶格结构的亚铁磁性材料.铁氧体材料为铁镁合金或铁镍合金,它的制造工艺和机械性能与陶瓷相似,颜色为灰黑色.电磁干扰滤波器中经常使用的一类磁芯就是铁氧体材料,许多厂 ...

  6. Feedly使用技巧

    1:用Chrome的话推荐这个应用:RSS Subscription Extension下载地址:https://chrome.google.com/webstore/detail/rss-subsc ...

  7. universal image loader在listview/gridview中滚动时重复加载图片的问题及解决方法

    在listview/gridview中使用UIL来display每个item的图片,当图片数量较多需要滑动滚动时会出现卡顿,而且加载过的图片再次上翻后依然会重复加载(显示设置好的加载中图片) 最近在使 ...

  8. mysql sql优化<1>

    <pre name="code" class="html">explain SELECT t.* FROM ( SELECT t1.sn AS cl ...

  9. 【转】Android ListView长按事件触发点击事件

    原文网址:http://blog.csdn.net/twlkyao/article/details/17301609 算法在实现ListView的onItemLongClickListener的时候, ...

  10. wpf新增记录时用多线程的问题

    多线程虽然可以增加用户操作体验,但是有时候会出现意想不到的错误. 如果采用分布式,数据库在另外服务器上,当网络出现问题,或者数据库繁忙,那么新增数据就会等待,这时候用户如果以为没有操作,而多次点击新增 ...