今天寫了一個側邊欄動態展開收縮的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body{ font-size: 20px;font-weight: bold;color: white;line-height: 30px;text-align: center}
.container{height: 347px;position: absolute;right: 0;border: 1px solid black}
.container li{position: relative;list-style: decimal;height: 30px;width: 200px;
margin-bottom: 3px;border: 1px solid black;display: list-item;right: -165px}
.container li::before{content: "";display: block;position: relative;
height: 30px;width: 35px;background: red}
@keyframes bance {
0%{right: -165px}
100%{right:0 }
}
@keyframes bance1 {
0%{right:0 }
100%{right:-165px}
}
</style>
</head>
<body>
<div class="container">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</div>
<script>
window.onload=function(){
var lilist=document.querySelectorAll('li');
var container=document.querySelector('.container');
var T1=null,T2=null;
container.onmouseover=function(){
var n=0;
T1=setInterval(function(){
lilist[n].style.animationName='bance';
lilist[n].style.animationDuration='0.5s';
lilist[n].style.animationFillMode="forwards";
n++;
if(n>9){clearInterval(T1)}
},50)
};
container.onmouseout=function(){
var i=0;
T2=setInterval(function(){
lilist[i].style.animationName='bance1';
lilist[i].style.animationDuration='0.5s';
lilist[i].style.animationFillMode="forwards";
i++;
if(i>9){clearInterval(T2)}
},100)
}
}
</script>
</body>
</html>
執行過程中不斷報錯，仔細檢查邏輯沒有發現什么問題，百度之發現可能是父元素onmouseover觸發事件在父子元素間移動不停觸發的問題，着手解決吧。讀完http://blog.sina.com.cn/s/blog_7488043d0101dnuz.html 這篇文章后知道了解決方法；
在onmouseover時先進行如下判斷，結果為true時再執行方法體：
if(!this.contains(event.fromElement)){MouseOverFunc()}
在onmouseout時先進行如下判斷，結果為true時再執行方法體：
if(!this.contains(event.toElement)){MouseOutFunc()}
下面來解釋一下上面兩行代碼的含義：
在IE中，所有的HTML元素都有一個contains方法，它的作用是判斷當前元素內部是否包含指定的元素。我們利用這個方法來判斷外層元素的事件是不是因為內部元素而被觸發，如果內部元素導致了不需要的事件被觸發，那我們就忽略這個事件。
event.fromElement指向觸發onmouseover和onmouseout事件時鼠標離開的元素；event.toElement指向觸發onmouseover和onmouseout事件時鼠標進入的元素。
那么上面兩行代碼的含義就分別是：
○ 當觸發onmouseover事件時，判斷鼠標離開的元素是否是當前元素的內部元素，如果是，忽略此事件；
○ 當觸發onmouseout事件時，判斷鼠標進入的元素是否是當前元素的內部元素，如果是，忽略此事件；
這樣，內部元素就不會干擾外層元素的onmouseover和onmouseout事件了。
添加判斷后如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body{ font-size: 20px;font-weight: bold;color: white;line-height: 30px;text-align: center}
.container{height: 347px;position: absolute;right: 0;border: 1px solid black}
.container li{position: relative;list-style: decimal;height: 30px;width: 200px;
margin-bottom: 3px;border: 1px solid black;display: list-item;right: -165px}
.container li::before{content: "";display: block;position: relative;
height: 30px;width: 35px;background: red}
@keyframes bance {
0%{right: -165px}
100%{right:0 }
}
@keyframes bance1 {
0%{right:0 }
100%{right:-165px}
}
</style>
</head>
<body>
<div class="container">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</div>
<script>
window.onload=function(){
var lilist=document.querySelectorAll('li');
var container=document.querySelector('.container');
var T1=null,T2=null;
container.onmouseover=function(){
if(!this.contains(event.fromElement)){
var n=0;
T1=setInterval(function(){
lilist[n].style.animationName='bance';
lilist[n].style.animationDuration='0.5s';
lilist[n].style.animationFillMode="forwards";
n++;
if(n>9){clearInterval(T1)}
},50)
}
};
container.onmouseout=function(){
if(!this.contains(event.toElement)){
var i=0;
T2=setInterval(function(){
lilist[i].style.animationName='bance1';
lilist[i].style.animationDuration='0.5s';
lilist[i].style.animationFillMode="forwards";
i++;
if(i>9){clearInterval(T2)}
},100)
}
};
}
</script>
</body>
</html>
沒有問題。。