标签：style blog http color io os ar strong div
写这些东西一定是思路清晰的时候，思路清的时候怎么着都行……加油吧，这条路还很远……
方法一：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标移入移出，背景色渐变</title> <style> *{ margin:0; padding:0; } div{ margin:10px auto; width:200px; height:200px; border:1px solid #000; background-color: #000; } </style> </head> <body> <div id="test"></div> <script> var div = document.getElementById("test"); var opa = 100;//用来计算opacity小数的整数值，例如opacity:0.1;opa是10 var interval01,interval02; div.onmouseover = function(){ clearInterval(interval02); interval01 = setInterval(function(){ if(opa<=10){ clearInterval(interval01); }else{ opa -= 10; div.style.opacity = opa/100;//这个地方用整数相除来代替小数，会避免很多问题 } },30); } div.onmouseout = function(){ clearInterval(interval01); interval02 = setInterval(function(){ if(opa>=100){ clearInterval(interval02); }else{ opa += 10; div.style.opacity = opa/100;//这个地方用整数相除来代替小数，会避免很多问题 } },30); } </script> </body> </html>
方法二：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标移入移出，背景色渐变（传参）</title> <style> *{ margin:0; padding:0; } div{ margin:10px auto; width:200px; height:200px; border:1px solid #000; background-color: #000; } </style> </head> <body> <div id="test"></div> <script> var div = document.getElementById("test"); var opa = 100;//opacity的扩大值 var interval; div.onmouseover = function(){ change(10);//将临界值作为参数不是很好想 } div.onmouseout = function(){ change(100); } function change(value){ clearInterval(interval); interval = setInterval(function(){ //这里的if判断总结的规律很好 if(value>opa){//渐变目标比实际的大，则逐渐增大 opa += 10; }else{//渐变目标比实际的小，则逐渐变小 opa -= 10; } if(opa == value){ clearInterval(interval); }else{ div.style.opacity = opa/100; } },30); } </script> </body> </html>
第二种方法跟第一种方法相比，代码量上是简单很多，但是对于参数所应该代表的变量不是很容易想到，只能说经验也有一定影响，还有数学总结能力……加油……
标签：style blog http color io os ar strong div
原文地址：http://www.cnblogs.com/bjchenxn/p/3973055.html
