如何在jsp页面或者HTML页面添加一个滑动条

滑动条好像是HTML框架的标记的一个属性，如果不用

<frameset cols="50%,*">

<frame name="hello" src="up2u.html">

<frame name="hi" src="me2.html">

</frameset>

这个标记的话，貌似用不到滑动条，因为页面大的话，会自动滑动，这是默认的。

滑动条

scrolling="Yes"

使用 Yes 表示容许卷动（内定）， No

则不容许卷动。

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

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

浏览器支持

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

如何工作的？

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

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

<input id="defaultSlider" type="range" min="0" max="500" />

<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来实现一个滑动选择器。

<div id="slider"></div>

<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 id="container">

<div id="control"></div>

</div>

<!-- The range input is hidden and updated on each rotation of the knob -->

<input type="range" id="slider" min="0" max="500" value="25" />

<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来增强相关功能。

<marquee>的用途比较广泛,在这里详细讲解一下.

主要参数设置:

align：是设定活动字幕的位置，除了居左、居中、居右三种位置外，又增加靠上（top）和靠下（bottom）两种位置。

Bgcolor：用于设定活动字幕的背景颜色，可以使用英文的单词也可以是十六进制数的。

Direction：用于设定活动字幕的滚动方向是向左（left）、向右（right）、向上（up）、向下（down）。

Behavior：用于设定滚动的方式，主要由三种方式：

behavior="scroll"表示由一端滚动到另一端；默认为此项

behavior="slide":表示由一端快速滑动到另一端，且不再重复；

behavior="alternate"表示在两端之间来回滚动。

Height：用于设定滚动字幕的高度。

Width：则设定滚动字幕的宽度。

Hspace和vspace：分别用于设定滚动字幕的左右边框和上下边框的宽度.

Scrollamount：用于设定活动字幕的滚动距离。数值越小，滚动的速度就越快。

scrolldelay：用于设定滚动两次之间的延迟时间，数值越小，间隔就越小。

Loop：用于设定滚动的次数，当loop=-1表示一直滚动下去，直到页面更新。其中默认情况是向左滚动无限次，字幕高度是文本高度；滚动

范围：水平滚动的宽度是当前位置的宽度；垂直滚动的高度是当前位置的高度。

---