基于jquery的横向滚动条（滑动条）

查找了很多方法，有些不能实现（被滚动内容的宽度未知，但使用这种方法必须已知），其它的不能完全兼容这些浏览器（IE6，Firefox，Chrome）。最后决定使用JQuery的Slider控件。
1. 下载jquery-1.3.2.min.js，jquery-ui-1.7.1.custom.min.js
2. Html


代码如下:

<div id="topslider" runat="server"></div>
<div id="scroll" runat="server">
<div id="holder">
滚动内容
</div>
<div id="bottomslider" style="margin-top:10px;margin-bottom:10px;" runat="server"></div>

3. css


代码如下:

<style>
#topslider {
width: 98%;
height: 6px;
background: #BBBBBB;
position: relative;
}
#bottomslider {
width: 98%;
height: 6px;
background: #BBBBBB;
position: relative;
}
.ui-slider-handle {
width: 8px;
height: 14px;
position: absolute;
top: -4px;
background: #478AFF;
border: solid 1px black;
}
#scroll {
width: 100%;
margin-top: 10px;
overflow: hidden;
}
#holder {
width: 100%;
}
</style>

4. js


代码如下:

<script type="text/javascript" src="JavaScript/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="JavaScript/jquery-ui-1.7.1.custom.min.js"></script>
$(document).ready(function(){
$("#topslider").slider({
animate: true,
change: handleSliderChange,
slide: handleSliderSlide,
stop:handleTopSliderStop
});
$("#bottomslider").slider({
animate: true,
change: handleSliderChange,
slide: handleSliderSlide,
stop:handleBottomSliderStop
});
});
function handleSliderChange(e, ui)
{
var maxScroll = $("#scroll").attr("scrollWidth") - $("#scroll").width();
$("#scroll").animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000);
}
function handleSliderSlide(e, ui)
{
var maxScroll = $("#scroll").attr("scrollWidth") - $("#scroll").width();
$("#scroll").attr({scrollLeft: ui.value * (maxScroll / 100) });
}
function handleTopSliderStop(e, ui)
{
$("#bottomslider").slider('value',$("#topslider").slider('value'));
}
function handleBottomSliderStop(e, ui)
{
$("#topslider").slider('value',$("#bottomslider").slider('value'));
}

赞 (0)

相关推荐

  • jQuery scroll事件实现监控滚动条分页示例

    scroll事件适用于window对象,但也可滚动iframe框架与CSS overflow属性设置为scroll的元素. 复制代码 代码如下: $(document).ready(function () { //本人习惯这样写了    $(window).scroll(function () {        //$(window).scrollTop()这个方法是当前滚动条滚动的距离        //$(window).height()获取当前窗体的高度        //$(docume

  • jQuery 锚点跳转滚动条平滑滚动一句话代码

    jQuery锚点跳转滚动条平滑滚动一句话代码 复制代码 代码如下: $("html,body").animate({scrollTop: $("#box").offset().top}, 1000); 一下是一些jquery的小技巧1. 控制编译结果 复制代码 代码如下: <script type="text/javascript" src="scripts/jquery-1.2.6.min.js"></sc

  • jQuery判断div随滚动条滚动到一定位置后停止

    实现代码: 复制代码 代码如下: <script type="text/javascript">var rollSet = $('#widget');    var offset = rollSet.offset();    var fwidth = $("#footer").height();    $(window).scroll(function() {        var scrollTop = $(window).scrollTop();  

  • js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码

    获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 复制代码 代码如下: document.body.offsetWidth document.body.offsetHeight 在声明了DOCTYPE的浏览器中,可以用以下来获取浏览器显示窗口大小: 代码如下复制代码 复制代码 代码如下: document.documentElement.clientWidth document.documentElement.cli

  • jQuery响应滚动条事件功能示例

    本文实例讲述了jQuery响应滚动条事件功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea

  • jQuery实现将div中滚动条滚动到指定位置的方法

    本文实例讲述了jQuery实现将div中滚动条滚动到指定位置的方法.分享给大家供大家参考,具体如下: 一.Js代码: onload = function () { //初始化 scrollToLocation(); }; function scrollToLocation() { var mainContainer = $('#thisMainPanel'), scrollToContainer = mainContainer.find('.son-panel:last');//滚动到<div

  • JS JQUERY实现滚动条自动滚到底的方法

    设置页面加载时滚动条自动滚到底的方法: jQuery: 复制代码 代码如下: $(function(){   var h = $(document).height()-$(window).height();   $(document).scrollTop(h); }); JavaScript: 复制代码 代码如下: window.onload = function(){   var h = document.documentElement.scrollHeight || document.bod

  • JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合

    因为浏览器的兼容问题,如果使用javascript获取这些数值是一个相当痛苦的过程.好在JQuery提供了简单优雅,并且兼容的解决方法. 获取浏览器和页面文档的宽度和高度 复制代码 代码如下: //获取浏览器显示区域的高度 $(window).height(); //获取浏览器显示区域的宽度 $(window).width(); //获取页面的文档高度 $(document.body).height(); //获取页面的文档宽度 $(document.body).width(); 获取滚动条的位

  • jQuery 顶部导航跟随滚动条滚动固定浮动在顶部

    jQuery 顶部导航跟随滚动条滚动固定浮动在顶部

      复制代码 代码如下: <section> <article class="left"> <p> </p> <ul> <li><a href="http://freejs.net/article_jquerywenzi_149.html" title="Ajax 动态加载内容">Ajax 动态加载内容</a></li> <li>

  • jquery 滚动条事件简单实例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

随机推荐