html 滑动块滑动同时实时显示数字_随笔

你最好使用滑块插件了。建议你看下这篇文章，能很好地解决你的问题-可以滑动滑块时实时显示数字。网页链接是基于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

}

})

CSS

<br />

</div >

<br />

</p >

</marquee >

</div >

marquee 参数：

BGColor：滚动文本框的背景颜色。

Direction：滚动方向设置，可选择Left、Right、up和down。

scrolldelay：每轮滚动之间的延迟时间，越大越慢。

scrollamount：一次滚动总的时间量，数字越小滚动越慢。

Behaviour：滚动的方式设置，三种取值：Scroll（循环滚动） lide（单次滚动）、Alternate（来回滚动）。

Align：文字的对齐方式设置。可选择Middle(居中)、Bottom(居下)还是Top(居上)。

Width：滚动文本框的宽度，输入一个数值后从后面的单选框选择in Pixels(按像素)或是in Percent(按百分比)。

Height：滚动文本框的高度，输入一个数值后从后面的单选框选择in Pixels(按像素)或是in Percent(按百分比)。

loop：滚动次数。默认为infinite

hspace、vspace：前后、上下的空行。

jquery

$("#left").css()//设置div高宽，设置溢出不可见，通过改变需要滚动的文本外容器高度来实现滚动效果

可以用js动态产生，如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>New Document </TITLE>

</HEAD>

<BODY>

</SELECT>

</BODY>

var select = document.getElementById("demo_select")

for(var i=1i<=30i++){

var opt = document.createElement("option")

opt.value=i

opt.innerHTML=i

select.appendChild(opt)

}

</SCRIPT>

</HTML>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/7054238.html

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

发表评论

评论列表（0条）