jquery hScrollPane 水平或横行滚动条插件
演示地址:http://www.corange.cn/demo/3799/index.html
<!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="Content-Type" content="text/html; charset=utf-8" />
<title>水平滚动条Demo</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{color:#333;font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;}
a{color:#333;text-decoration:none;}
a:hover{color:#3366cc;text-decoration:underline;}
.scrolltitle{height:24px;font-size:14px;width:980px;border-bottom:solid 1px #ddd;margin:20px auto 15px auto;}
.scrolllist{width:980px;height:254px;margin:0 auto;}
.imgshow{width:980px;margin:0 auto;}
.imgshow .imgzoom{margin:0 auto;width:300px;border:solid 1px #000;}
/* container */
.container{width:620px;height:224px;margin:20px auto;overflow:hidden;position:relative;}
.container ul{width:10000px;position:absolute;left:0px;top:0px;padding:0;margin:0;}
.container ul li{width:308px;padding:0 10px;float:left;text-align:center;}
.container ul li p{height:40px;line-height:20px;overflow:hidden;}
.container ul li img{border:1px solid #ddd;padding:3px;}
.container ul li div.current img{border:solid 1px #ff6600;padding:3px;}
/* hScrollPane */
.hScrollPane_dragbar,.hScrollPane_draghandle,.hScrollPane_leftarrow,.hScrollPane_rightarrow{background:url(images/dragbar.gif);}
.hScrollPane_dragbar{position:absolute;left:0px;bottom:0px;height:16px;margin:0 auto;background-position:left -32px;}
.hScrollPane_draghandle{height:14px;width:30px;border:1px solid #d5d3d3;overflow:hidden;position:absolute;top:0px;left:0px;cursor:default;background-position:center -48px;background-repeat:no-repeat;background-color:#e5e5e5;-moz-border-radius:2px;-khtml-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;}
.hScrollPane_leftarrow,.hScrollPane_rightarrow{display:inline-block;height:16px;width:17px;overflow:hidden;position:absolute;bottom:0;}
.hScrollPane_leftarrow{left:0;}
.hScrollPane_leftarrow:hover{background-position:left -64px;}
.hScrollPane_rightarrow{right:0;background-position:left -16px;}
.hScrollPane_rightarrow:hover{background-position:left -80px;}
.draghandlealter{background-position:center -96px;background-color:#efefef;}
</style>
</head>
<body>
<h2 class="scrolltitle">jquery hScrollPane 水平或横行滚动条插件 默认状态属性</h2>
<pre class="scrolllist">
$(".container").hScrollPane({
mover:".press", //指定container对象下的哪个元素需要滚动位置 | 必传项;
moverW:function(){return $(".press").width();}(), //传入水平滚动对象的长度值,不传入的话默认直接获取mover的宽度值 | 可选项;
handleMinWidth:300, //指定handle的最小宽度,要固定handle的宽度请在css中设定handle的width属性（如 width:28px!important;），不传入则不设定最小宽度 | 可选项;
showArrow:true, //指定是否显示左右箭头，默认不显示 | 可选项;
dragable:false, //指定是否要支持拖动效果，默认可以拖动 | 可选项;
handleCssAlter:"draghandlealter", //指定拖动鼠标时滚动条的样式，不传入该参数则没有变化效果 | 可选项;
easing:true, //滚动是否需要滑动效果,默认有滑动效果 | 可选项;
mousewheel:{bind:true,moveLength:500} //mousewheel: bind->'true',绑定mousewheel事件; ->'false',不绑定mousewheel事件；
moveLength是指定鼠标滚动一次移动的距离,默认值：{bind:true,moveLength:300} | 可选项;
});
</pre>
<h2 class="scrolltitle">设置水平滚动条商品图片横行展示</h2>
<div class="imgshow">
<div class="imgzoom">
<img src="../demo1.jpg" alt="" />
<div class="loading"></div>
</div>
<div class="container thumblist">
<ul>
<li>
<div class="current"><a href="../demo1.jpg"><img src="../demo1.jpg" alt="" /></a></div>
<p><a href="" target="_blank">1111</a></p>
</li>
<li>
<div class="current"><a href="../demo2.jpg"><img src="../demo2.jpg" alt="" /></a></div>
<p><a href="" target="_blank">1111</a></p>
</li>
<li>
<div class="current"><a href="../demo3.jpg"><img src="../demo3.jpg" alt="" /></a></div>
<p><a href="" target="_blank">1111</a></p>
</li>
<li>
<div class="current"><a href="../demo4.jpg"><img src="../demo4.jpg" alt="" /></a></div>
<p><a href="" target="_blank">1111</a></p>
</li>
</ul>
</div>
</div><!--imgshow end-->
<script type="text/javascript" src="http://www.jsfoot.com/skin/js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/hScrollPane.js"></script>
<script type="text/javascript">
$(".container").hScrollPane({
mover:"ul",
moverW:function(){return $(".container li").length*335;}(),
showArrow:true,
handleCssAlter:"draghandlealter",
mousewheel:{moveLength:207}
});
$(function(){
var img=new Image();
var imgshowobj=$(".imgshow");
var imgzoom=imgshowobj.find(".imgzoom");
imgshowobj.find(".thumblist").find("div a").live("click",function(){
imgzoom.find(".loading").show();
img.onload=function(){
imgzoom.find("img").attr("src",img.src);
imgzoom.find(".loading").hide();
}
img.src=$(this).attr("href");
$(".thumblist li div a").parent().removeClass("current");
$(this).parent().addClass("current");
return false;
});
});
</script>
</body>
</html>
原文地址:http://www.corange.cn/archives/2011/11/3799.html