JavaScript实现水平进度条拖拽效果
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.scroll{
margin:100px;
width: 500px;
height: 5px;
background: #ccc;
position: relative;
}
.bar{
width: 10px;
height: 20px;
background: #369;
position: absolute;
top: -7px;
left: 0;
cursor: pointer;
}
.mask{
position: absolute;
left: 0;
top: 0;
background: #369;
width: 0;
height: 5px;
}
</style>
</head>
<body>
<div class="scroll" id="scroll">
<div class="bar" id="bar"> </div>
<div class="mask" id="mask"></div>
</div>
<p></p>
<script>
var scroll = document.getElementById('scroll');
var bar = document.getElementById('bar');
var mask = document.getElementById('mask');
var ptxt = document.getElementsByTagName('p')[0];
var barleft = 0;
bar.onmousedown = function(event){
var event = event || window.event;
var leftVal = event.clientX - this.offsetLeft;
var that = this;
// 拖动一定写到 down 里面才可以
document.onmousemove = function(event){
var event = event || window.event;
barleft = event.clientX - leftVal;
if(barleft < 0)
barleft = 0;
else if(barleft > scroll.offsetWidth - bar.offsetWidth)
barleft = scroll.offsetWidth - bar.offsetWidth;
mask.style.width = barleft +'px' ;
that.style.left = barleft + "px";
ptxt.innerHTML = "已经走了" + parseInt(barleft/(scroll.offsetWidth-bar.offsetWidth) * 100) + "%"; //防止选择内容--当拖动鼠标过快时候，弹起鼠标，bar也会移动，修复bug
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
} }
document.onmouseup = function(){
document.onmousemove = null; //弹起鼠标不做任何操作
}
</script>
</body>
</html>
效果：
原文：http://www.jb51.net/article/103461.htm
JavaScript实现水平进度条拖拽效果的更多相关文章
- JavaScript实现最简单的拖拽效果
一.一些无关痛痒的唠叨 拖拽还是挺不错的一个页面效果,我个人认为,其生命力在于可以让用户自己做一些操作,所谓自定义.例如: ①浏览器标签顺序的拖拽切换 现在基本上所有的选项卡式的浏览器都有顺序拖拽切换 ...
- JavaScript实现网页元素的拖拽效果
以下的页面中放了两个div,能够通过鼠标拖拽这两个元素到任何位置. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamFja2ZydWVk/font/5a6 ...
- 用JavaScript实现div的鼠标拖拽效果
实现原理鼠标按下时根据onmousemove事件来动态获取鼠标坐标位置以此来更新div的位置,实现的前提时div要有一个定位效果,不然的话是移动不了它的. HTML <div class=&qu ...
- 拖拽系列一、JavaScript实现简单的拖拽效果
前端拖拽相关应用汇总 在现实生活中就像男孩子牵着(拖着)女朋友的手穿过马路:从马路的一端走到另一端这种场景很常见: 而在前端开发中拖拽效果也算是前端开发中应用最常见.最普遍的特效:其拖拽涉及知 ...
- 学习笔记---Javascript事件Event、IE浏览器下的拖拽效果
学习笔记---Javascript事件Event.IE浏览器下的拖拽效果 1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作).srcE ...
- js拖拽效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js div浮动层拖拽效果代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 超强的纯 CSS 鼠标点击拖拽效果
背景 鼠标拖拽元素移动,算是一个稍微有点点复杂的交互. 而在本文,我们就将打破常规,向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果. 在之前的这篇文章中 -- 不可思议的纯 CS ...
- jQuery的DOM操作实例（2）——拖拽效果&&拓展插件
一.原生JavaScript编写拖拽效果 二.jQuery编写的拖拽效果 三.在jQuery中拓展一个拖拽插件
随机推荐
- chrome 常用插件集锦
stylish 改变浏览器CSS样式
- FZU2128_最长子串
题目说给你一个长串,要你选一个最长子串,不包括任何一个给定串为子串. 建立一个自动机,每个点保存的信息为当前这个状态为结尾最长可以有多长? 然后....就可以了... #include <ios ...
- 导出ORACLE表结构到SQL语句（含CLOB）
转自:http://blog.itpub.net/84738/viewspace-442854/ 先用exp导出空表 exp username/password rows=n file=expor ...
- 跟我学Spring Cloud（Finchley版）-20-Spring Cloud Config-Git仓库配置详解 原
在跟我学Spring Cloud(Finchley版)-19-配置中心-Spring Cloud Config 一节中,已实现使用Git仓库作为Config Server的后端存储,本节详细探讨如何配 ...
- 【BZOJ3437】小P的牧场（动态规划，斜率优化）
[BZOJ3437]小P的牧场(动态规划,斜率优化) 题面 BZOJ 题解 考虑暴力\(dp\),设\(f[i]\)表示强制在\(i\)处建立控制站的并控制\([1..i]\)的最小代价. 很显然,枚 ...
- 【LOJ6436】【PKUSC2018】神仙的游戏（NTT）
[LOJ6436][PKUSC2018]神仙的游戏(NTT) 题面 LOJ 题解 看到\(zsy\)从\(PKUSC\)回来就秒掉了这种神仙题 吓得我也赶快看了看\(PKUSC\)都有些什么神仙题 然 ...
- php-fpm: hundreds of seconds in the log
favoriteI have nginx+php-fpm web serverSo I've noticed in php5-fpm.log many strange lines:[03-Sep-20 ...
- bzoj4753: [Jsoi2016]最佳团体（分数规划+树形依赖背包）
菜菜推荐的“水题”虐了我一天T T...(菜菜好强强qwq~ 显然是个分数规划题,二分答案算出p[i]-mid*s[i]之后在树上跑依赖背包,选k个最大值如果>0说明还有更优解. 第一次接触树形 ...
- 用一次FastDFS
FastDFS c编写的分布式文件系统,用于搭建文件服务器集群提供文件的上传.下载 特点 冗余备份 负载均衡 线性扩容 高性能.高可用 FastDFS架构 Tracker server 负载均衡和调度 ...
- Oracle10g数据泵impdp参数详解--摘自网络
Oracle10g数据泵impdp参数详解 2011-6-30 12:29:05 导入命令Impdp • ATTACH 连接到现有作业, 例如 ATTACH [=作业名]. • C ...