DIV 滚动条

来源：互联网发布：淘宝小工具编辑：程序博客网时间：2024/04/29 06:05

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>
<title></title>
<style type="text/css">
/*/////////////////////////////////////////////////////*/

#showEle {
width: 400px;
height: 400px;
clear: both;
margin: 10px auto;
border: 1px solid #666;
}
#EleList {
width: 400px;
white-space: nowrap;
border: 1px solid #666;
overflow:hidden;
margin: 0px auto;
}
#allEle img {
width: 100px;
height: 100px;
margin-right: 10px;
}
#prevEle, #nextEle {
z-index: 10;
width: 50%;
height: 100%;
position: relative;
}
#prevEle {
float: left;
cursor: url('images/ResizeRight.cur');
}
#nextEle {
float: right;
cursor: url('images/ResizeLeft.cur');
}
#divScroll {
width: 400px;
height: 20px;
background-color: Red;
margin: 5px auto;
margin-bottom: 100px;
}
#divScroll div {
background: #7cd2f8;
width: 20px;
height: 20px;
text-align: center;
position: relative;
z-index: 1;
cursor: pointer;
}
#allEle {
float:left;
}
/*/////////////////////////////////////////////////////*/
</style>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="js/testJs.js" type="text/javascript"></script>
</head>
<body>
<div id="showEle">
<div id="prevEle"> </div>
<div id="nextEle"> </div>
</div>
<div id="EleList">
<div id="allEle"> <img src="images/1.jpg" title="1" /><img src="images/2.jpg" title="2" /><img src="images/3.jpg"
title="3" /><img src="images/4.jpg" title="4" /><img src="images/5.jpg" title="5" /><img
src="images/6.jpg" title="6" /><img src="images/7.jpg" title="7" /><img src="images/8.jpg"
title="8" /> </div>
</div>
<div id="divScroll">
<div> </div>
</div>
<div id="print"></div>
</body>
</html>

JS代码：

//// <reference path="../Scripts/jquery-1.4.1.min.js" />
$(function () {
var eleIndex = 0;
var $eleList = $("#EleList"); //列表的可视区域
var $allEle = $("#allEle"); //列表
var $ele = $allEle.children(); //操作的元素
var $scrollbox = $("#divScroll"); //滚动条;
var $scroll = $scrollbox.children(); //滑动块
var $showEle = $("#showEle"); //
var $prev = $("#prevEle");
var $next = $("#nextEle");
var scrollBoxOffsetLeft = $scrollbox.offset().left; //滚动条的Left值；
var scrollBoxWidth = $scrollbox.width(); //滚动条的宽度;
var eleListMaxScrollLeft = $allEle.width() - $eleList.width(); //
var scrollWidth = Math.floor($eleList.width() * scrollBoxWidth / $allEle.width()); //滑动块的宽度;
var scrollMaxLeft = scrollBoxWidth - scrollWidth;
var eleLength = $ele.length;
$scroll.css("width", scrollWidth + "px"); //设置滑动块宽度;

$showEle.css("background", "url(" + $($ele[0]).attr("src") + ") no-repeat center center");
///////////////滑动块事件开始////////////////
$scroll.mousedown(function (e) { //鼠标按下事件
var x = e.pageX; //在滑动块里按下鼠标时的X坐标;
$scroll.css("cursor", "pointer");

////////////////滚动条事件开始（事件冒泡）///////////////////////
$scrollbox.mousemove(function (eb) {
var _x = eb.pageX - x; //鼠标移动的X轴距离;

var scrollLeft = $scroll.offset().left - scrollBoxOffsetLeft + _x; //滑动块的LEFT值;

$scroll.css("left", scrollLeft + "px"); //设置滑动块的LEFT;
x = eb.pageX;
if ($scroll.offset().left + scrollWidth > scrollBoxOffsetLeft + scrollBoxWidth) {//修正滚动块的LEFT值
$scroll.css("left", (scrollBoxWidth - scrollWidth) + "px");
}

if ($scroll.offset().left < scrollBoxOffsetLeft) {//修正滚动块的LEFT值
$scroll.css("left", "0px");
}
var eleListScrollLeft = ($scroll.offset().left - scrollBoxOffsetLeft) * (eleListMaxScrollLeft) / (scrollBoxWidth - scrollWidth);
$eleList.scrollLeft(eleListScrollLeft); //设置列表的可视区域的水平滚动条偏移量

// $("#print").html(eleListScrollLeft)
});
/////////////////滚动条事件结束（事件冒泡）/////////////////////
}).mouseup(function () {//
$scrollbox.unbind("mousemove"); ////解除滚动条的 mousemove 事件
});
////////////////滑动块事件结束////////////////////

function showEleChange($this) {
// alert($this.attr("src"));
$showEle.css("background", "url(" + $this.attr("src") + ") no-repeat center center");
var allEleOffsetLeft = $allEle.offset().left; //当前列表的Left;
var thisOffsetLeft = $this.offset().left; //当前点击元素的LEFT;
var trueLeft = thisOffsetLeft - allEleOffsetLeft; //当前元素离列表的距离;;
var halfWidth = ($eleList.width() - $this.width()) / 2; //
var eleListScrollLeft = trueLeft - halfWidth; //可视框的水平滚动条偏移；
if (eleListScrollLeft <= 0) {//修正
eleListScrollLeft = 0;
}

if (eleListScrollLeft > eleListMaxScrollLeft) {
eleListScrollLeft = eleListMaxScrollLeft;
}

$eleList.scrollLeft(eleListScrollLeft); //设置可视区域的水平滚动条偏移量
var scrollLeft = Math.ceil(eleListScrollLeft * scrollMaxLeft / eleListMaxScrollLeft); //滚动条的LEFT;
$scroll.css("left", scrollLeft + "px");
}

////////////////响应键盘左右键开始////////////////
$(document).keydown(function (event) {
event = event || window.event;

if (event.keyCode == 37) {
prevEle();
};

if (event.keyCode == 39) {
nextEle();
};
});

////////////////响应键盘左右键结束////////////////

///////////////////////上一元素开始//////////////////////////////
function prevEle() {
        eleIndex= eleIndex- 1;

if (eleIndex< 0) {
            eleIndex= eleLength - 1;
}
var $this = $($ele[currIndex]);
showEleChange($this);
}
/////////////////////////上一元素结束////////////////////////////////////////
/////////////////////////下一元素开始/////////////////////////////////////////////////////
function nextEle() {
        eleIndex= eleIndex+ 1;
if (eleIndex>= eleLength) {
            eleIndex= 0;
}
var $this = $($ele[currIndex]);
showEleChange($this);
}
//////////////////////////下一元素结束//////////////////////////

$ele.click(function () {//点击图片
        eleIndex= $(this).index();
showEleChange($(this));

});

$prev.click(function () {

prevEle();
});

$next.click(function () {

nextEle();
});

/////////////////////文档流事件开始///////////////////////////////
$(document).mouseup(function () {

$scrollbox.unbind("mousemove"); ///解除滚动条的 mousemove 事件
});
/////////////////////文档流事件结束/////////////////////////////////
});