一个递减速度的简易js

< template >

< div class= "tabs" >

< div class= "tabs-top" >

< ul id= "nav" >

< li >最新 </ li >

< li >新闻 </ li >

< li >公告 </ li >

< div id= "hover" >最新 </ div >

</ ul >

</ div >

< div class= "tabs-content" >

< div class= "box show" >

< ul >

< li v-for=" newest in lists. newests" :key=" newest. index" >

< router-link tag= "a" :to=" '/newsInfo/' + newest. id" target= "_blank" >

< span >{{ newest. title}} </ span >

< span >{{ newest. content}} </ span >

< span class= "time" >{{ newest. time}} </ span >

</ router-link >

</ li >

</ ul >

</ div >

< div class= "box" >

< ul >

< li v-for=" news in lists. newss" :key=" news. index" >

< router-link tag= "a" to= '/newsInfo/' >

< span >{{ news. title}} </ span >

< span >{{ news. content}} </ span >

< span class= "time" >{{ news. time}} </ span >

</ router-link >

</ li >

</ ul >

</ div >

< div class= "box" >

< ul >

< li v-for=" notice in lists. notices" :key=" notice. index" >

< a href= "#" >

< span >{{ notice. title}} </ span >

< span >{{ notice. content}} </ span >

< span class= "time" >{{ notice. time}} </ span >

</ a >

</ li >

</ ul >

</ div >

</ div >

</ div >

</ template >

mounted () {

var nav = document. getElementById( 'nav')

var lists = nav. getElementsByTagName( 'li')

var hover = document. getElementById( 'hover')

var box = document. getElementsByClassName( 'box')

var lisWidth = lists[ 0]. offsetWidth;

var newTimer

function startTime( i){

newTimer = setInterval( function(){

var speed = ( lisWidth* i- hover. offsetLeft)/ 10

speed = Math. ceil( speed)

document. title = hover. offsetLeft+ ','+ speed

if( speed === 0){

clearInterval( newTimer)

} else{

hover. style. left = hover. offsetLeft + speed + 'px'

if( hover. offsetLeft<= 9){

hover. style. left = 0 + 'px'

}

}

}, 20)

}

function stopTimer(){

clearInterval( newTimer);

}

for( let i = 0; i< lists. length; i++){

lists[ i]. onclick = function(){

var _index = i

stopTimer()

for( let j = 0; j< box. length; j++){

box[ j]. classList. remove( 'show')

}

box[ i]. classList. add( 'show')

hover. innerHTML = this. innerHTML

startTime( _index)

}

}

}