HTML结构
<div class="show" id="showBox">
<ul class="showTop" id="content">
<li></li>
<li></li>
<li></li>
<li></li>
<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 class="showBootom">
<span></span>
</div>
</div>
Css样式
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.show {
width: 800px;
height: 200px;
border: 1px solid #ccc;
margin: 100px auto;
overflow: hidden;
position: relative;
}
.showTop {
margin-top: 22px;
width: 2080px;
position: absolute;
left: 0;
top: 0;
}
.showTop li {
float: left;
}
.showBootom {
width: 800px;
height: 25px;
background: #e8e8e8;
position: absolute;
left: 0;
bottom: 0;
}
.showBootom span {
width: 0;
height: 25px;
background: #f40;
border-radius: 12px;
position: absolute;
left: 0;
bottom: 0;
cursor: pointer;
}
</style>
Js代码
<script>
window.onload = function () {
// 获取标签
var showBox = document.getElementById('showBox');
var content = showBox.children[0];
var drag = showBox.children[1].children[0];
// 计算滚动条长度
// 滚动条长度公式 (盒子的宽度 / 内容的宽度) * 盒子的宽度
var dragLength = (showBox.offsetWidth / content.offsetWidth) * showBox.offsetWidth;
drag.style.width = dragLength + 'px';
drag.onmousedown = function (e) {
var e = e || event;
// 求出初始距离
var beginX = e.clientX - drag.offsetLeft;
document.onmousemove = function (e) {
var e = e || event;
// 滚动条走的距离
var endX = e.clientX - beginX;
if (endX < 0) {
endX = 0;
}
else if (endX >= showBox.offsetWidth - drag.offsetWidth) {
endX = showBox.offsetWidth - drag.offsetWidth;
}
// 求出内容走的长度
// 内容走的距离 = (内容的长度 - 盒子的长度) / (盒子的长度 - 滚动条的长度) *滚动条走的距离
var contentLength = (content.offsetWidth - showBox.offsetWidth) / (showBox.offsetWidth - drag.offsetWidth) * endX;
content.style.left = - contentLength + 'px';
drag.style.left = endX + 'px';
return false;
}
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
}
return false;
/*
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
*/
}
}
</script>
特效展示
横向滚动条
