<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>Document</title>
<style?type="text/css">
*{
margin:0;
padding:0;
}
#div1{
width:?400px;
height:?100px;
background:?#5f5290;
position:?relative;
left:?-400px;
margin-bottom:?20px;
opacity:?0.3;
}
#div2{
width:?20px;
height:?60px;
background:?#8e7dbf;
position:?absolute;
right:?-20px;
top:20px;
}
</style>
</head>
<body>
<div?id="div1">
<div?id="div2">詳情</div>
</div>
<script?type="text/javascript">
window.onload=function(){
var?div1=document.getElementById("div1");
var?div2=document.getElementById("div2");
div1.onmouseover=function(){
start(0);
changeOpacity(100);
}
div1.onmouseout=function(){
start(-400);
changeOpacity(30);
}
var?i=null;
function?start(target){
clearInterval(i);
var?speed=0;
i=setInterval(function(){
if(div1.offsetLeft<target){
speed=10;
}else{
speed=-10;
}
if(div1.offsetLeft==target){
clearInterval(i)
}else{div1.style.left=div1.offsetLeft+speed+"px";
}
}
,20)
}
var?timer=null;
var?alpha=30;
function?changeOpacity(target){
clearInterval(timer);
var?speed=0;
timer=setInterval(function(){
if(alpha<target){
speed=10;
}else{
speed=-10;
}
if(alpha==target){
clearInterval(timer)
}else{
alpha+=speed;
div1.style.opacity=alpha/100;
}},100)
}
}
</script>
</body>
</html>
2016-11-26
全局變量局部變量可以獲取到，反之就不行
2016-11-26
因為onmouseover是從30到100，而onmouseout是從100到30.這兩個事件都調(diào)用同一個函數(shù)changeOpacity。因為一開始我們肯定是先進行onmouseover事件的，所以var alpha=30;只是為了方便第一次初始化，應該是全局變量。如果把它放到里面就變成了局部變量，這樣的話就會每次調(diào)用函數(shù)changeOpacity時都會進行var alpha=30;操作導致alpha的值一直為30，而你的函數(shù)內(nèi)有這樣一個判斷if(alpha==target){clearInterval(timer)；}，而onmouseout事件的目標值(target)為30，這樣就會導致直接關(guān)閉定時器不進行onmouseout事件。