写在前面：
1，应该要划分了几个组件，
2，用指令来，而不是大量使用ref引用元素，直接操作元素要用指令
3，把原生写成的app转换为vue，这个是最累的，感觉精疲力尽了
有精力的时候，重构吧，先做个记录：
<template>
<div id="app">
<div id="box" ref="box" @mouseover="handleBoxOver">
<div class="list" ref="list">
<ul :style="styleObject" ref="ul" >
<li ref="li"><img src="./assets/lesson8/1.jpg"><p>iPhone 4</p></li>
<li><img src="./assets/lesson8/2.jpg"><p>iPad 2</p></li>
<li><img src="./assets/lesson8/3.jpg"><p>iPod touch</p></li>
<li><img src="./assets/lesson8/4.jpg"><p>iPod classic</p></li>
<li><img src="./assets/lesson8/5.jpg"><p>iPod shuffle</p></li>
<li><img src="./assets/lesson8/6.jpg"><p>iPod nano</p></li>
<li><img src="./assets/lesson8/7.jpg"><p>MacBook Air</p></li>
<li><img src="./assets/lesson8/8.jpg"><p>MacBook Pro</p></li>
<li><img src="./assets/lesson8/9.jpg"><p>Mac mini</p></li>
<li><img src="./assets/lesson8/10.jpg"><p>Mac Pro</p></li>
</ul>
</div>
<div class="scrollBar">
<div class="barL" ref="barL" :class="{barLStop:isLStop}" @mouseover="handleBarLOver" @mouseout="handleOut" @keyup="handleOut"></div>
<div class="barM" ref="barM" @click="hadlebarMClick">
<div class="bar" @mousedown="handleBarDown" ref="bar" @click="handleBarClick">
<div class="l"></div>
<div class="r"></div>
</div>
</div>
<div class="barR" ref="barR" :class="{barRStop:isRStop}" @mouseover="handleBarROver" @mouseout="handleOut" @keyup="handleOut"></div>
</div>
</div>
<dl id="desc">
<dt>功能说明：</dt>
<dd>① 拖动滚动条，图片列表缓冲滑动至目标点；</dd>
<dd>② 滚动条两端鼠标移入自动滑动；</dd>
<dd>③ 滚动条滑动到两端自动更换为停止标识；</dd>
<dd>④ 点击滚动条黑色背景区，滚动条及图片列表缓冲滑动至目标点；</dd>
<dd>⑤ 支持键盘左右键；</dd>
<dd>⑥ 支持鼠标滚轮。</dd>
<dd class="ta-r">QQ:21314130, By — Ferris</dd>
</dl>
</div>
</template>
<script>
function getStyle(obj, attr)
{
return parseFloat(obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr])
}
export default {
data(){
return{
oBox:null,
oList:null,
oUl:null,
oLi:null,
oBarL:null,
oBarM:null,
oBarR:null,
oBar:null,
maxL:0,
iMarginRight:0,
tiemr:null,
iScale:0,
disX:0,
isLStop:false,
isRStop:false,
li_width:0,
bar_left:0,
}
},
computed:{
styleObject(){
var width = (this.li_width + this.iMarginRight) * 10 + 'px';
return{
width:width
}
}
},
methods:{
init(){
this.oBox = this.$refs.box;
this.oList = this.$refs.list;
this.oUl = this.$refs.ul;
this.oLi = this.$refs.li;
this.oBarL = this.$refs.barL;
this.oBarM = this.$refs.barM;
this.oBarR = this.$refs.barR;
this.oBar = this.$refs.bar;
this.maxL = this.oBarM.offsetWidth - this.oBar.offsetWidth;
this.iMarginRight = getStyle(this.oLi, "marginRight");
this.li_width = this.$refs.li.offsetWidth;
this.bar_left = this.$refs.bar.offsetLeft;
this.isStop();
},
handleBarDown(e){
var _this = this;
this.disX = e.clientX - this.oBar.offsetLeft;
document.onmousemove = function(e){
var iL = e.clientX - _this.disX;
iL <= 0 && (iL = 0);
iL >= _this.maxL && (iL = _this.maxL);
_this.oBar.style.left = iL + 'px';
_this.iScale = iL / _this.maxL;
return false;
};
document.onmouseup = function(){
_this.startMove(_this.oUl, parseInt((_this.oList.offsetWidth + _this.iMarginRight - _this.oUl.offsetWidth) * _this.iScale));
_this.isStop();
document.onmousemove = null;
document.onmouseup = null;
};
return false;
},
handleBarClick(e){
e.cancelBubble = true;
},
handleBarLOver(){
var _this = this;
var iSpeed = -5;
this.tiemr = setInterval(function(){
_this.togetherMove(getStyle(_this.oBar, "left") + iSpeed, 1);
},30);
},
handleBarROver(){
var _this = this;
var iSpeed = 5;
this.tiemr = setInterval(function(){
_this.togetherMove(getStyle(_this.oBar, "left") + iSpeed, 1);
},30);
},
handleOut(){
clearInterval(this.tiemr);
},
hadlebarMClick(e){
var iTarget = e.clientX - this.oBox.offsetLeft - this.oBarM.offsetLeft - this.oBar.offsetWidth / 2;
this.togetherMove(iTarget);
},
handleBoxOver(){
var _this = this;
function mouseWheel(e){
var delta = e.wheelDelta ? e.wheelDelta : -e.detail * 40;
var iTarget = delta > 0 ? -50 : 50;
_this.togetherMove(_this.oBar.offsetLeft + iTarget);
}
this.oBox.addEventListener("mousewheel",mouseWheel);
this.oBarM.addEventListener("DOMMouseScroll",mouseWheel);
},
togetherMove(iTarget, buffer){
var _this = this;
if(iTarget <= 0){
this.tiemr && clearInterval(this.tiemr);
iTarget = 0;
}
else if(iTarget >= this.maxL){
this.tiemr && clearInterval(this.tiemr);
iTarget = this.maxL;
}
this.iScale = iTarget / this.maxL;
this.startMove(this.oUl,parseInt((this.oList.offsetWidth + this.iMarginRight -_this.oUl.offsetWidth) * this.iScale),
function(){
_this.isStop()
},buffer);
this.startMove(this.oBar, iTarget, function(){_this.isStop()},buffer);
},
isStop(){
this.oBarL.className = 'barL';
this.oBarR.className = 'barR';
var _this = this;
switch(this.oBar.offsetLeft){
case 0:
_this.oBarL.classList.contains('barLStop') || (this.oBarL.classList.add('barLStop'))
break;
case _this.maxL:
_this.oBarR.classList.contains('barRStop') || (_this.oBarR.classList.add('barRStop'))
break;
}
},
startMove(obj, iTarget, fnEnd, buffer){
var _this = this;
clearTimeout(obj.timer);
obj.timer = setInterval(function(){
_this.doMove(obj,iTarget,fnEnd,buffer);
},25)
},
doMove(obj, iTarget, fnEnd, buffer){
var iLeft = getStyle(obj,"left");
var iSpeed = (iTarget - iLeft) / (buffer || 5);
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
iLeft == iTarget ? (clearInterval(obj.timer), fnEnd && fnEnd()) : obj.style.left = iLeft + iSpeed + "px"
}
},
mounted(){
this.init();
this.isStop();
}
}
</script>
<style>
body,div,ul,li,p{
margin: 0;
padding: 0;
}
body{
background: #3e3e3e;
font: 14px/1.5 \5fae\8f6f\96c5\9ed1;;
}
#box{
width: 600px ;
margin: 20px auto;
}
.list{
position: relative;
width: 600px;
height: 144px;
margin-bottom: 10px;
overflow: hidden;
border-radius: 8px;
}
.list ul{
position: absolute;
top:0;
left: 0;
height: 144px;
}
.list li{
display: inline;
float: left;
width: 144px;
height: 144px;
list-style:none;
background: #000;
margin-right: 8px;
border-radius: 8px;
}
.list li img{
float: left;
width: 124px;
height: 100px;
border-radius: 5px;
margin: 10px 0 0 10px;
}
.list li p{
float: left;
color: #fff;
width: 100%;
text-align: center;
line-height: 34px;
}
.scrollBar{
position: relative;
height: 19px;
background: #0a0a0a;
overflow: hidden;
}
.scrollBar .barL, .scrollBar .barR, .scrollBar .barLStop, .scrollBar .barRStop{
position: absolute;
top:0;
width: 28px;
height: 19px;
cursor: pointer;
background: url(./assets/lesson8/03.gif) no-repeat;
}
.scrollBar .barL{
left: 0;
}
.scrollBar .barR{
right: 0;
background-position: right 0;
}
.scrollBar .barLStop{
left: 0;
background-position: 0 -19px;
cursor:default;
}
.scrollBar .barRStop{
right: 0;
background-position: right -19px;
cursor: default;
}
.scrollBar .barM{
position: relative;
height: 15px;
border: 1px so #545454;
border-width: 1px 0;
margin: 0 28px;
padding: 1px 0;
z-index: 1;
cursor: pointer;
}
.scrollBar .bar{
position: absolute;
top:1px;
left: 0;
width: 150px;
height: 15px;
cursor: e-resize;
background: url(./assets/lesson8/01.gif) repeat-x;
}
.scrollBar .bar .l, .scrollBar .bar .r{
position: absolute;
top:0;
width: 6px;
height: 15px;
background: url(./assets/lesson8/02.gif) no-repeat;
}
.scrollBar .bar .l{
left: -6px;
}
.scrollBar .bar .r{
right: -6px;
background-position: right 0;
}
#desc{
color: #ccc;
width: 578px;
padding: 10px;
margin: 0 auto;
line-height: 2;
border: 1px dashed #666;;
}
#desc dd{
margin-left: 2rem;
}
.ta-r{
text-align: right;
}
</style>