前些日子看了個視頻所以就模仿它的技術來為大家做出幾個簡單的JS小特效 （ 以下效果兼容IE5+ IE5-以下沒有測試哦）
今天為大家演示的效果是一個div，鼠標經過的時候透明度為100%，鼠標移出的時候透明度變為原來的50%。
也許大家會問現在這么多流行的JS框架和CSS3的transition配合偽類:hover都可以實現的效果干嘛要用這么老套的方式呢？沒錯的，現在用CSS3，JS框架都是可以輕松的實現以下的效果，但是為了學習原生的javascript的童鞋，用CSS3和JS框架實現的就留給大家去實現了。現在我們還是多用原生的方法吧。
1：先給出HTML：
<body>
<div id="div1">
</div>
</body>
2：列出CSS：
<style type="text/css">
body{margin: 0;padding: 0;}
div{background: red;width: 200px;height: 150px;opacity: 0.5;filter:alpha(opacity:50); }
</style>
3：現在到了我們的JS部分
<script type="text/javascript">
window.onload=function(){ 頁面加載完執行這個匿名函數
var div=document.getElementById("div1"); 獲取div
div.onmouseover=function(){ 當鼠標經過這個div的時候執行onOut函數並傳參數100
onOut(100);
}
div.onmouseout=function(){ 當鼠標離開這個div的時候執行onOut函數並傳參數10
onOut(10);
}
}
var timer=null;
創建一個變量用來后面裝定時器唯一的ID不明白定時器的童鞋可以看看我之前專門寫的javascript定時器文章
var opa=10; 定義一個原始的透明度這里和CSS中的定義一樣
function onOut(tart){ 創建一個函數onOut
var div=document.getElementById("div1");
clearInterval(timer);
一開始觸發這個函數的時候先把定時器都清空下，防止之前的定時器執行的時候再次觸發該函數而疊加
timer=setInterval(function(){ 創建一個變量用來后面裝定時器唯一的ID不明白定時器的童鞋可以看看我之前專門寫的javascript定時器文章
var midd=0; 因為要有動畫的效果要每隔一段時間都增加或者減少透明度，我們需要一個中中間變量，我們設置為0
if(opa>tart){ 比較模板透明都和當前透明度，來確定透明度的變化是增還是減
midd=-10; 讓當前透明都每次遞減10
}else{
midd=10; 讓當前透明都每次增加10
}
if(tart==opa){ 比較模板透明都和當前透明度，當他們相等的時候 ，就把定時器都清空
clearInterval(timer);
}else{
opa+=midd; 讓透明度opa=opa+midd，然后把它賦值給當前div的透明度屬性
div.style.filter='alpha(opacity:'+opa+')'; 兼容IE
div.style.opacity=opa/100;
}
},10)
}
</script>