一、效果图

二、HTML结构

 <div id="d2">
<p>自制可拖动滑块:</p>
<div id="out">
<div id="filling"> </div>
<div id="innerimg"></div>
</div>
<p id="txt">音量:0</p>
</div>

第一个div是轨道,第二个是填充物,第三个是滑块

三、CSS样式

 #out {/* 滑块轨道 */
position: relative;
width: 160px;
height: 12px;
margin-top: 10px;
margin-left: 0px;
border: 1px solid #28C561;
border-radius: 10px;
box-shadow: 1px 1px 2px 0px inset;/* 轨道内阴影 */
cursor: pointer;
}
#filling {/* 填充物 */
height: 100%;
margin-left: 0px;
width: 0px;
background: linear-gradient(to right, #0089ff , #00fff3); /* 填充效果的渐变 */
background: -webkit-linear-gradient(left, #0089ff , #00fff3);
background: -o-linear-gradient(right, #0089ff , #00fff3);
background: -moz-linear-gradient(right, #0089ff , #00fff3);
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
box-shadow: 2px -1px 5px 1px inset;
}
#innerimg {/* 滑块样式 */
position: absolute;
left: 0px;
top: -8px;
margin-left: 0px;
width: 25px;
height: 25px;
cursor: pointer;
background-color: #66F40E;
border-radius: 50%;
box-shadow: 0px 2px 1px 0px #0d11128a, 0px -1px 19px rgba(0, 0, 0, 0.9) inset; /* 使滑块具有3D感 */
}

样式可以随便改

四、JS代码

如图所示,将out设置为参考项,有两种情况:

(1)、点击out框的任何部位,滑块自动划过去并且filling填满滑块后面的地区

(2)、滑动滑块调节

原理很简单:以out为参照,当点击out的任意部分时,将InnerImg的坐标更新到鼠标点击部位,将filling的width设置成鼠标点击部位与out左边框的距离,就可以看到效果。

步骤:

a). 先获取页面元素:

 var innerpro = document.getElementById('innerimg')
var out = document.getElementById('out')
var filling = document.getElementById('filling')
var txt = document.getElementById('txt')
var target

b). 添加out的点击事件:

 function dvnamicprogress () {
/**
* @author Qiang
* @function dvnamicprogress -- 滑杆
*/
if (document.addEventListener) {
/* addEventListener属性IE9.0才支持 */
out.addEventListener('click', fillingClick, false)
} else if (document.attachEvent) {
out.attachEvent('click', fillingClick, false)
}
}

当鼠标在out内点击时,获取鼠标位置,设置filling宽度和内部滑块innerimg的left

 function fillingClick (event) {
2 event.stopPropagation()
3 if (event.touches) {
4 target = event.touches[0]
5 } else {
6 target = event || window.event
7 }/* 兼容移动端,但是发现没有兼容ie8及以下…… */
8 var sliderLeft = target.clientX - 45 /* 减去的45=滑块的宽度25+整天滑杆距离视图左边框的距离20 */
9 var fillingWidth = target.clientX - 45
10 if (sliderLeft <= 0) {
11 sliderLeft = 0
12 }/* filling的宽度不能小于0,滑块的位置不能超出out左边界 */
13 if (fillingWidth <= 0) {
14 fillingWidth = 0
15 }
16 txt.innerHTML = '音量:' + parseInt(sliderLeft / 135 * 100)
17 innerpro.style.left = sliderLeft + 'px'
18 filling.style.width = fillingWidth + 5 + 'px'
19 // console.log('鼠标的位置:X=>' + target.clientX + ', Y=>' + target.clientY)
20 // console.log('滑块的位置:' + sliderLeft)
21 }

c). 添加移动滑块innerimg的事件

 function dvnamicprogress () {
/**
* @author Qiang
* @function dvnamicprogress -- 滑杆
*/
if (document.addEventListener) {
/* addEventListener属性IE9.0才支持 */
out.addEventListener('click', fillingClick, false)
innerpro.addEventListener('touchstart', fillingMove, {passive: true}, false)
innerpro.addEventListener('mousedown', fillingMove, false)
} else if (document.attachEvent) {
out.attachEvent('click', fillingClick, false)
innerpro.attachEvent('touchstart', fillingMove, {passive: true}, false)
innerpro.attachEvent('mousedown', fillingMove, false)
}
}
 function fillingMove (event) {
/* addEventListener属性IE9.0才支持 */
if (document.addEventListener) {
innerpro.addEventListener('touchmove', sliderMove, {passive: true}, false)
document.addEventListener('mousemove', sliderMove, false)
document.addEventListener('mouseup', clear, false)
} else if (document.attachEvent) {
innerpro.attachEvent('touchmove', sliderMove, {passive: true}, false)
document.attachEvent('mousemove', sliderMove, false)
document.attachEvent('mouseup', clear, false)
}
}

当鼠标按下时给innerimg添加一个onmousemove事件,不断更新位置

 function sliderMove (event) {
if (event.touches) {
target = event.touches[0]
} else {
target = event || window.event
}
// console.log('鼠标的位置:X=>' + target.clientX + ', Y=>' + target.clientY)
var prolong = target.clientX - 45
if (prolong < 0) {
prolong = 0
} else if (prolong > 135) {
prolong = 135
}
txt.innerHTML = '音量:' + parseInt(prolong / 135 * 100)
filling.style.width = prolong + 5 + 'px'
innerpro.style.left = prolong + 'px'
}

当鼠标按键弹起时,清除所有事件:

 function clear () {
if (document.addEventListener) {
document.removeEventListener('mousemove', sliderMove, false)
document.removeEventListener('mousedown', fillingMove, false)
} else if (document.attachEvent) {
document.attachEvent('mousemove', sliderMove, false)
document.attachEvent('mousedown', fillingMove, false)
}
}
window.onload = function () {
staticProgress()
dvnamicprogress()
}

这里的样式比较丑,因为轨道宽一点好写,可以美化一下:

 #out {
position: relative;
width: 160px;
height: 3px;
margin-top: 10px;
margin-left: 0px;
border-radius: 10px;
background-color: #737272;
cursor: pointer;
}
#filling {
height: 100%;
margin-left: 0px;
width: 0px;
background-color:#00fff3;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
#innerimg {
position: absolute;
left: 0px;
top: -11px;
margin-left: 0px;
width: 25px;
height: 25px;
cursor: pointer;
background-color: #ffffff;
border-radius: 50%;
box-shadow: 0px 1px 6px 0px #0d1112c7, 0px -1px 19px rgba(0, 0, 0, 0) inset;
}
#txt{
font-size:5px;
}

-

自制滑杆slider的更多相关文章

  1. iOS 代码分类

    控件分类: 指示器 (ActivityIndicator) 提醒对话框 (AlertView) 按钮 (Button) 日历 (Calendar) 相机 (Camera) 透明指示层 (HUD) 图像 ...

  2. oschina iOS代码库

    iOS代码库 34Activity 54下拉刷新(pull-to-refresh) 143菜单 (Menu) 20位置信息(GPS/Location) 24iOS 表单 74提醒 (Notificat ...

  3. 自制 移动端 纯原生 Slider滑动插件

    在Google搜关键字“slider”或“swiper”能找到一大堆相关插件,自己造轮子是为了能更好的理解其中的原理. 给这个插件取名为“veSlider”是指“very easy slider”非常 ...

  4. Objective-C 自定义UISlider滑杆 分段样式

    效果 自定义一个功能简单的分段的滑杆 可显示分段名 为了显示效果,我们将滑块和节点都设置为不规则 这里只实现了分段的slider,未分段的没有实现,有兴趣的可以定义另一种类型做个判断修改下 需求分析 ...

  5. Unity3D学习笔记(二十):Rect、Canvas、Toggle、Slider、ScrollBar

      Rect Transform(锚点):图片中心的四个点,界面以雪花形式显示 当四个点在一起的时候组成锚点,当四个点分开的时候组成锚框(合则锚点,分则锚框) Anchors: ----Min x:控 ...

  6. 跟着《beginning jquery》学写slider插件并借助自定义事件改进它

    <beginning jquery>是一本很不错的学习jquery的书,作者的讲解深入浅出,很适合初学者,在最后一章里面,作者把前面所有的点结合起来完成了一个轮播图的jquery插件.实现 ...

  7. [Unity3D]自制UnityForAndroid二维码扫描插件

    一周左右终于将二维码生成和扫描功能给实现了,终于能舒缓一口气了,从一开始的疑惑为啥不同的扫码客户端为啥扫出来的效果不同?通用的扫描器扫出来就是一个下载APK,自制的扫描器扫出来是想要的有效信息,然后分 ...

  8. .NET中使用APlayer组件自制播放器

    目录 说明 APlayer介绍 APlayer具备功能 APlayer使用 自制播放器Demo 未完成工作 源码下载 说明 由于需求原因,需要在项目中(桌面程序)集成一个在线播放视频的功能.大概要具备 ...

  9. 推荐:图片轮播插件Nivo Slider

          因为项目需要一款切换样式多一些的轮播插件,不经意找到了NivoSlider,非常好用,比bootstrap要好用,而且样式丰富.值得注意的是,这款插件是在MIT协议下免费的.        ...

随机推荐

  1. Scala: Types of a higher kind

    One of the more powerful features Scala has is the ability to generically abstract across things tha ...

  2. PHP实现文字写入图片功能

    /** * PHP实现文字写入图片 */class wordsOnImg { public $config = null; /** * @param $config 传入参数 * @param $co ...

  3. servlet 中文编码设置

    Tomcat服务器默认采用的ISO8859-1编码 产生的原因: 不同数据来源的编(解)码格式不同: 数据来源 默认编码格式 浏览器页面 GBK(可在浏览器页面右键切换) request(get) I ...

  4. 2019 gplt团体程序设计天梯赛总结

    分很菜… 以后写题一定记得把题意理清楚了再开始写. 模拟题还是大坑,代码还是写得不够多,代码量一大就写bug. 补题 l1-8 估值一亿的AI核心代码 补题链接:https://pintia.cn/p ...

  5. GDI 边框绘制函数(8)

    绘制矩形 调用 Rectangle 函数可以绘制一个矩形(它将填充这个矩形): BOOL Rectangle( HDC hdc, // 设备环境句柄 int nLeftRect, // 左边线的位置 ...

  6. Windows10系统如何清除记录和关掉xbox录制

    在Windows的Xbox平台玩游戏时,总会发现以前玩过的许多游戏进度都保留着,麻烦的是白白的成就条让人感到相当的不爽,并且想删除还删不掉.某些当年一边玩一边录制的游戏,每当重新打开的时候都会弹出录制 ...

  7. WinForm 登录窗体 + 单实例运行

    关于怎么在winform里增加登录窗体或者如何让winform程序单实例运行网上都很多例子. 然而两者结合起来呢? //Program.cs static class Program { public ...

  8. lca学习题

    http://www.cnblogs.com/scau20110726/archive/2013/06/14/3135095.html

  9. [bzoj4127]Abs_树链剖分_线段树

    Abs bzoj-4127 题目大意:给定一棵数,支持链加和链上权值的绝对值的和. 注释:$1\le n,m \le 10^5$,$\delta \ge 0$,$|a_i|\le 10^8$. 想法: ...

  10. 洛谷 P1535 游荡的奶牛

    P1535 游荡的奶牛 题目描述 Searching for the very best grass, the cows are travelling about the pasture which ...