js模拟横向滚动条拖动经典实例，鼠标拖动滚动条实现图层滚动显示效果，根据自己需求来自定义图层内容。
<!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=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>js实现图层横向拖动移动效果_武鸣人</title>
<script src="/img/jquery_wuming_ren.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript">
$(function(){
var scro_zoom = parseInt($(".mouse_wuming").width()/2);
var scro = $("#scro");
var scroWidth = parseInt($("#scro").width());
var scroImgWidth = parseInt($(".img_wuming ul li").width());
var scroMouse = parseInt($(".mouse_wuming").width());
var scroMove = $(".img_wuming ul");
var scroImgLength = $(".img_wuming ul li").length;
var scroImgBoxWidth = scroImgWidth * scroImgLength + scroImgLength * 10 + 10;
var zoompos = {x:0,y:0};
var flag = false;
var scropos;
scroMove.css("width",scroImgBoxWidth + "px");
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
$(".mouse_wuming").bind("mousedown",function(e){
flag = true;
$(this).css("background","blue");
$(".show").fadeIn(300);
return false;
}).mousemove(function(e){
if(flag){
$zoompos(e.pageX,e.pageY);
$(this).css("left",zoompos.x);
scroMove.css("left",-scropos + "px");
}
}).mouseup(function(e){
flag = false;
$(".show").hide();
$(this).css("background","#ccc");
})
$(document).mouseup(function(e){
flag = false;
$(".show").hide();
$(".mouse_wuming").css("background","#ccc");
})
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function $zoompos(x,y){
zoompos.x = x - scro.offset().left - scro_zoom; //得到left值;
zoompos.y = y - scro.offset().top - 5;//得到top值;
scropos = parseInt((scroImgBoxWidth - scroWidth) / (scroWidth - scroMouse) * zoompos.x);
if(zoompos.x <= 0){
zoompos.x = 0;
}
if(zoompos.x + scroMouse >= scroWidth){
zoompos.x = scroWidth - scroMouse;
}
if(scropos < 0){
scropos = 0;
}
if(scropos >= scroImgBoxWidth - scroWidth){
scropos = scroImgBoxWidth - scroWidth;
}
$(".show").text( zoompos.x + "," + zoompos.y + "," + $(".mouse_wuming").css("left"));
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
})
</script>
<style type="text/css">
*{ margin:0; padding:0;}
#box{ width:460px; border:1px solid #000; margin:50px auto;}
#scro{ width:100%; height:30px; background:red; margin:10px 0; position:relative;}
.line_wuming_ren{ width:100%; height:0; overflow:hidden; border-top:2px groove #000; position:absolute; left:0; top:15px; z-index:0;}
.mouse_wuming{ width:66px; height:20px; background:#ccc; cursor:pointer; position:absolute; left:0; top:5px; z-index:1;}
.show{ width:100px; height:30px; position:absolute; display:none; top:-30px; left:0;}
.img_wuming{ width:460px; height:60px; margin:10px 0; overflow:hidden; position:relative;}
.img_wuming ul{ position:absolute; left:0; top:0;}
.img_wuming ul li{ display:inline; float:left; width:80px; height:60px; margin-left:10px; background:red;}
</style>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
需要加载js文件，请刷新后看效果！
<div id="box">
<div class="img_wuming">
<ul>
<li>武鸣人一号</li>
<li>武鸣人二号</li>
<li>武鸣人三号</li>
<li>武鸣人四号</li>
<li>武鸣人五号</li>
<li>武鸣人六号</li>
<li>武鸣人七号</li>
<li>武鸣人八号</li>
<li>武鸣人九号</li>
<li>武鸣人十号</li>
<li>武鸣人十一号</li>
<li>武鸣人十号</li>
</ul>
</div>
<div id="scro">
<div class="show"></div>
<div class="line_wuming_ren"></div>
<div class="mouse_wuming"></div>
</div>
<div class="text"></div>
</div>
</body>
</html>本文来自武鸣人网站，转载请注明出处