一个简单的横向滚动条效果
效果图：
<!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>模拟滚动条</title>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<style>
*{ padding:0px; margin:0px;}
.div0{ width:1200px; margin:110px auto;}
.xxx{ height:100px; width:410px; border:1px solid #f00; position:relative; left:0px; top:0px; overflow:hidden;}
ul{ overflow:hidden;zoom:1; position:absolute; left:0px; top:0px;}
ul li{ list-style:none; width:200px; height:100px; background-color:#ccc; float:left; margin-right:10px;}
#waic{ width:410px; height:10px; background-color:#ccc;position:relative; left:0px; top:0px; margin-top:20px; position:relative;}
.div1{ cursor:pointer; width:60px; height:10px; background-color:#333; position:absolute; left:0px; top:0px; position:absolute; left:0px; top:0px;}
</style>
<script>
$(document).ready(function(){
//内容区
$('ul').width($('ul li').outerWidth(true)*$('ul li').length-10);
$('ul li:last').css('marginRight',0);
//比例尺
//var oydWidth=$('#waic').width()-$('.div1').width();
var blc=($('#waic').width()-$('.div1').width())/($('ul').width()-410);
//alert(oydWidth)
//alert(blc*$('ul').width())
//拖拽
$('.div1').mousedown(function(e){
var odivLeft=$('.div1').position().left;
var odivTop=$('.div1').position().top;
var odocLeft=e.pageX-odivLeft;
var odocTop=e.pageY-odivTop;
$(document).mousemove(function(e){
var X=e.pageX-odocLeft;
var Y=e.pageY-odocTop;
if(X<=0){
X=0;
}else if(X>=$('#waic').width()-$('.div1').outerWidth(true)){
X=$('#waic').width()-$('.div1').outerWidth(true);
};
if(Y<=0){
Y=0;
}else if(Y>=$('#waic').height()-$('.div1').outerHeight(true)){
Y=$('#waic').height()-$('.div1').outerHeight(true);
};
$('.div1').css({'left':X+'px','top':Y+'px'});
$('ul').animate({'left':-X/blc+'px'}).dequeue();
});
$(document).mouseup(function(){
$(this).unbind('mousemove');
});
});
});
</script>
<body>
<div class="div0">
<div class="xxx">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<div id="waic">
<div class="div1"></div>
</div>
</div>
</body>
</html>
