在html5中,新出现了可以支持自由滑动的范围控制条的控件,即:
<input id="defaultSlider" type="range" min="0" max="500" />
但其浏览器支持情况中,firefox是暂时不支持的,IE当然不支持了,会取而代之的是
文本框.
当然,min,max都是指定了最小值及最大值,还有一个step可以表示每次滑动条的步长
此外,如果要兼容的话,可以用jquery的UI控件
JS为:
$(function(){
var currentValue = $('#currentValue');
$('#defaultSlider').change(function(){
currentValue.html(this.value);
});
// Trigger the event on load, so
// the value field is populated:
$('#defaultSlider').change();
});
此外,还有老外写的一个圆盘型的转动盘,用jquery的,具体参考
http://tutorialzine.com/2011/11/pretty-switches-css3-jquery/
分享到:
相关推荐
HTML实现的Tab切换效果,点击滑动和触控滑动(SlideTouch插件),资源里面是源码!
用在嵌入式QT或者安卓QT,判断手指滑动方向,来实现手指滑动浏览,并显示自定义滑动条,滑动条可以支持上色,包含两个QtableWidget和QtableView示例,都可以用,文章链接:https://www.cnblogs.com/lifexy/p/14111572.html
bootstrap实现滑动条,代码简单易懂,方便二次开发
本文件属于文章《使用js拖拽功能实现滑动条实例教程》的完整代码,在读完原创文章之后可以下载查看代码。代码中有详细的注释说明。html、css、js代码都在同一个文件中。也可以供有需要的朋友在开发中直接使用。
js实现水平和竖直滑动条 最近在做练手项目时候,需要用到滑动条,所以就稍微研究了一下。 首先来看水平滑动条,效果图如下: 代码如下: <html> <head> <meta charset="UTF-8"> 水平滑动条</title> <style>...
自定义(滑动条)input[type="range"]样式; 完成以下的五个步骤: 去除系统默认的样式; 给滑动轨道(track)添加样式; 给滑块(thumb)添加样式; 根据滑块所在位置填充进度条; 实现多浏览器兼容。
实现视频的加载、播放、暂停、停止,以及通过滑动条进行视频播放进度的控制 ////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////...
实现了点击图标中间的按钮后拖动就可以调节音量的效果,只要按住鼠标即可旋转按钮来调节音量。本段代码是英语所有网页使用,有兴趣的朋友们可以前来下载使用。
本文给大家分享的是一段使用jQuery实现支持IE的html滑动条代码,效果非常不错,这里推荐给大家,希望大家能够喜欢。
前些天我们学生在线首页改版,要做一个工具栏...但是这样做好后,运营人员给我提意见了:要是移动滑动条就可以实现工具栏上下滑动,那用户体验会更好,不过说的简单,做起来就有点麻烦了。 首先从头开始讲解吧。我的构
本文实例讲述了jQuery实现带滑动条的菜单效果代码。分享给大家供大家参考。具体如下: 这是一款带滑动条的jQuery滑动菜单,菜单下边有一个蓝色的线条,鼠标移上哪里它就跟向哪里,可以指引当前菜单的位置,另外,...
HTML5拖动条实现图片滚动浏览效果,当运行本效果后,拖动底部的滚动条即可控制上面的图片滑动起来,可浏览到每一张图片,采用最新的HTML5移动设备技术,效果不错,本代码面向移动设备开发,在电脑上浏览需要Chrome或...
上篇文章使用html5的touch事件把简单的滑动做出来了,实现了持续页面上下滑动的效果,参考之前的文章及代码html5 touch事件实现触屏页面上下滑动(一) 本文主要实现了一个效果:页面滑动到最上面和最下面的时候阻止其...
html5 CSS3实现动画流畅的音乐播放器源码,界面十分小巧美观,可实现播放、暂停、上一首、下一首功能,点击播放时打碟器旋转-45度到CD上方,使用CSS3径向渐变来绘制界面中的CD光碟和打碟器,音量条和进度条外层包裹...
js/html实现滚动到顶部 底部 某个指定位置 简单易懂上来就能使用
当表格头部固定时,需要分为两个表格来做:一部分是thead,一部分是tbody,具体实现方式如下: html代码: <th><div>标题一</div></th> <th><div>标题二</div></th> <th><div>标题三</div></th> <th>...
js实现像excel表格锁定功能,拖动滚动条指定锁住的列不滚动,内容使用的是table表格 使用代码: var Options = { table : "tb", width : 600, height : 300, rows : 1, cells : 2 } new Fixed(Options);
HTML div实现表头可以随表单内容横向滚动,表单内容可横可纵滚动
Android RecyclerView 实现横向滚动年龄选择效果,仿拼多多可水平滚动RecyclerView,自定义滚动条滚动距离,预加载动画实现,ShimmerRecyclerView,ShimmerLayout,ShimmerLayout