写这些东西一定是思路清晰的时候，思路清的时候怎么着都行……加油吧，这条路还很远……
方法一：
<!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>
鼠标移入移出背景色渐变（传参）
第二种方法跟第一种方法相比，代码量上是简单很多，但是对于参数所应该代表的变量不是很容易想到，只能说经验也有一定影响，还有数学总结能力……加油……
时间： 2024-10-09 21:43:25