html 滑动块滑动同时实时显示数字

2023-03-03 13:24:02html-css09

html 滑动块滑动同时实时显示数字,第1张

你最好使用滑块插件了。建议你看下这篇文章，能很好地解决你的问题-可以滑动滑块时实时显示数字。网页链接是基于bootstrap里的一个slider插件，很好用。这篇有详细介绍，并且最下方有demo演示以及详细的API地址。

<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/> $('#ex1').slider({

formatter: function(value) {

return 'Current value: ' + value

}

})

// Without JQuery

var slider = new Slider('#ex1', {

formatter: function(value) {

return 'Current value: ' + value

}

})

HTML5的出现带给我们了很多新的标签和元素。其中一个就是区间选择输入元素，例如，选择10以内的一个数字。这个元素其实在很多系统操作系统中都存在了很长时间，但是现在只是如何将他们整合到浏览器中。

因为使用JS可以很方便的模拟出这个效果所以HTML中一直没有可以直接使用的滑动选择元素。jQuery UI类库包含了一个非常不错的版本可以很容易进行样式设置。但是整合到浏览器中将非常简单，支持对于支持它的浏览器来说。

浏览器支持

除了著名的Firefox外所有的现代浏览器都支持这个元素，但是很容易使用html5slider.js来创建。当然IE也不支持区域选择输入，这个修改不太容易。这样的话，意味着你需要使用分开的类库类似jQuery UI来支持多浏览器。好消息在于如果浏览器不支持区域选择的话，它会做为一个输入框显示。

如何工作的？

区域选择输入元素使用输入框类似的标签<input type="range" />，支持一般的数值属性，及其min和max，用来限制区域，step用来设置滑动中数值增量。缺省为1。

你可以使用JS/jQuery来修改这些属性，也可以使用onchange事件来监听变化。代码如下：

<p class="note">Current value: <span id="currentValue">0</span></p>

或者

$(function(){

var currentValue = $('#currentValue')

$('#defaultSlider').change(function(){

currentValue.html(this.value)

})

// Trigger the event on load, so

// the value field is populated:

$('#defaultSlider').change()

})

当然这些代码需要浏览器支持。否则你只能看到一个输入框。

当然2/3的浏览器都看不到我们这个区域选择输入，我们需要想想别的方法。我们先快速使用jQueryUI来实现一个滑动选择器。

<p class="note">Current value: <span id="currentValue">0</span></p>

你可以看到代码如下：

$(function(){

var currentValue = $('#currentValue')

$("#slider").slider({

max: 500,

min: 0,

slide: function(event, ui) {

currentValue.html(ui.value)

}

})

代码非常简单。使用slider方法来实现。

最有意思的部分

因为我们已经实现了自己的区域选择方法，大家可以参考演示。

slider-knob.html

</div>

<p class="note">Current value: <span id="currentValue">0</span></p>

assets/js/slider-knob.js

$(function(){

var slider = $('#slider'),

min = slider.attr('min'),

max = slider.attr('max'),

currentValue = $('#currentValue')

// Hiding the slider:

slider.hide()

$('#control').knobKnob({

snap : 10,

value: 250,

turn : function(ratio){

// Changing the value of the hidden slider

slider.val(Math.round(ratio*(max-min) + min))

// Updating the current value text

currentValue.html(slider.val())

}

})

以上代码使用min和max来计算数值。

总结

滑动选择对于用户使用来说比输入框非常方便。虽然浏览器支持有限，但是你可以使用jQuery来增强相关功能。

纯HTML是实现不了这种效果的，需要JS事件效果配合，给你一个案例吧，代码比较复杂

先看下效果图：

完整的 HTML代码：

<p class="say">明月几时有</p>

</div>

</p>

<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>

</p>

自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好

</div>

</li>

<p class="say">明月几时有</p>

</div>

</p>

<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>

</p>

自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好

</div>

</li>

<p class="say">明月几时有</p>

</div>

</p>

<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>

</p>

自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好

</div>

</li>

<p class="say">明月几时有</p>

</div>

</p>

<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>

</p>

自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好

</div>

</li>

<p class="say">明月几时有</p>

</div>

</p>

<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>

</p>

自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好

</div>

</li>

<p class="say">明月几时有</p>

</div>

</p>

<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>

</p>

自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好

</div>

</li>

<p class="say">明月几时有</p>

</div>

</p>

<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>

</p>

自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好

</div>

</li>

<p class="say">明月几时有</p>

</div>

</p>

<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>

</p>

自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好

</div>

</li>

<p class="say">明月几时有</p>

</div>

</p>

<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>

</p>

自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好

</div>

</li>

<p class="say">明月几时有</p>

</div>

</p>

<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>

</p>

自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好

</div>

</li>

<p class="say">明月几时有</p>

</div>

</p>

<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>

</p>

自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好

</div>

</li>

</ul>

</div>

需要引入的css：

格式化样式css

body{font-family: microsoft yahei,Arialmargin:0padding:0}

h1,h2,h3,h4,h5,h6,ol,li,ul,p,dl,dt,dd{padding: 0margin:0}

ul,ol,li,dl,dt,dd{text-decoration: nonelist-style: none}

.lf{float: left}

.rt{float: right}

.clear{clear:both}

.ovh{overflow: hidden}

a{ color:#303030 text-decoration:none }

a:hover{ text-decoration:none }

input{border:noneoutline:none}

img{border:none}

轮播效果css：

/*轮播*/

.lb_gl{margin-bottom: 30pxbackground: url(../images/bg_3d.png)background-size: 100% 100%height:725px }

.container{width: 1024pxmargin:0 autoposition: relative}

.pictureSlider{height: 518pxmargin-bottom: 24px}

.poster-item{background: #fffheight: 453pxwidth:336pxborder-radius: 10pxpadding:45px 23px 20px 23px

transition: all 0.5scursor: default

-moz-transition: all 0.5scursor: default

-webkit-transition: all 0.5scursor: default

-o-transition: all 0.5scursor: default

}

.turn_3d{text-align: centercolor: #ffffont-weight: 400font-size: 36pxpadding: 28px 0}

.xxgy{font-size: 30pxfont-weight: 900padding-left: 10px}

.poster-item .say{font-size: 18pxmargin-bottom: 5pxpadding-left: 10px}

.students_star{padding:10px 10px 0 10px }

.cell_list{margin-bottom: 20pxcolor:#999font-size: 18pxoverflow: hidden}

.darks{color: #000padding-left: 10px}

.zwjs{border-top:1px solid #d0cddbline-height: 26pxpadding-top: 5pxcolor: #999font-size: 12pxmax-height: 84pxoverflow: hidden}

.for_btn{position: relativeheight:214pxoverflow:hidden}

.in_page{position: absoluteleft: 50%top:50%width:40pxheight: 40pxmargin-left: -20pxmargin-top: -20px}

.in_page>img{width: 40pxheight: 40px}

.check_more{width: 180pxheight: 50pxline-height: 50pxtext-align: centercolor:#fffbackground: #bc241dmargin:0 autodisplay: block}

需要引入的JS：

轮播控制器JavaScript，这段js引入需要jQuery的支持，所以先引入它。

(function(win,doc,undefined){

var zturn=function(turn){

this.turn=turn

this.zturn=$("#"+turn.id)

this.X=0

this.zturnitem=this.zturn.children(".zturn-item")

this.num_li=this.zturnitem.length//轮播元素个数 zturnPy为每个的偏移量

this.zturnPy=turn.Awidth/(this.num_li-1)

this.init()

this.turn_()

return this

}

zturn.prototype={

constructor:zturn,

init:function(){

var _self = this

this.zturn.children(".zturn-item").each(function(index,element){

//index是第几个元素 X是选取的中间数 num_li是总数

var rt=1//1:右侧：-1：左侧

if((index-_self.X)>_self.num_li/2||(index-_self.X)<0&&(index-_self.X)>(-_self.num_li/2)){rt=-1}//判断元素左侧还是右侧

var i=Math.abs(index-_self.X)//取绝对值

if(i>_self.num_li/2){i=parseInt(_self.X)+parseInt(_self.num_li)-index}//i:是左或者右的第几个

if((index-_self.X)<(-_self.num_li/2)){i=_self.num_li+index-_self.X}

$(this).css({

'position':'absolute',

'left': '50%',

'margin-left':-_self.turn.width/2+_self.zturnPy*rt*i+"px",

'z-index':_self.num_li-i,

'opacity': Math.pow(_self.turn.opacity,i),

'transform':'scale('+Math.pow(_self.turn.scale,i)+')',

'-webkit-transform':'scale('+Math.pow(_self.turn.scale,i)+')',

'-moz-transform':'scale('+Math.pow(_self.turn.scale,i)+')',

'-ms-transform':'scale('+Math.pow(_self.turn.scale,i)+')',

'-o-transform':'scale('+Math.pow(_self.turn.scale,i)+')'

})

$(this).attr("data_n",index)

})

turn_:function(){

var _self=this

this.zturnitem.click(function(){

_self.X=$(this).attr("data_n")

_self.init()

})

prev_:function(){

var _self=this

this.X--

if(this.X<0){this.X=this.num_li-1}

this.init()

next_:function(){

var _self=this

this.X++

if(this.X>=this.num_li){this.X=0}

this.init()

}

win.zturn = zturn

}(window,document))

最后在线面加入最后一段js

var aa=new zturn({

id:"zturn",

opacity:0.9,

width:382,

Awidth:1024,

scale:0.9

})

var ab=new zturn({

id:"zturn2",

opacity:0.8,

width:382,

Awidth:1024,

scale:0.6

})

最后案例中的图片就不提供了

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：路由器，猫，电脑之间的网线如何连接？

# 下一篇：怎么把百度网盘的视频保存到电脑

推荐阅读

热门文章

最新发布

标签列表

html 滑动块滑动同时实时显示数字

给您推荐相同类型的内容：