<!DOCTYPE html>
<html>
<head>
<style type="text/css">div {
width: 200px;
height: 200px;
background: red;
opacity: 0.3;
}</style>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box"></div>
</body>
<script type="text/javascript">
var s = null;
window.onload = function() {
var box = document.getElementById("box");
box.onmouseover = function() {
startMove(100)
}
box.onmouseout = function() {
startMove(30)
}
}
function startMove(tou) {
clearInterval(s);
var speed = 0;
s = setInterval(function() {
var touming = box.style.opacity*100;
if(touming < tou) {
speed = 10;
}else{
speed = -10;
}
if(touming == tou) {
clearInterval(s);
} else {
box.style.opacity = (box.style.opacity*1000+speed) / 1000;
}
}, 50)
}
</script>
</html>
以上这些是代码谢谢万能的吧友们。
<html>
<head>
<style type="text/css">div {
width: 200px;
height: 200px;
background: red;
opacity: 0.3;
}</style>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box"></div>
</body>
<script type="text/javascript">
var s = null;
window.onload = function() {
var box = document.getElementById("box");
box.onmouseover = function() {
startMove(100)
}
box.onmouseout = function() {
startMove(30)
}
}
function startMove(tou) {
clearInterval(s);
var speed = 0;
s = setInterval(function() {
var touming = box.style.opacity*100;
if(touming < tou) {
speed = 10;
}else{
speed = -10;
}
if(touming == tou) {
clearInterval(s);
} else {
box.style.opacity = (box.style.opacity*1000+speed) / 1000;
}
}, 50)
}
</script>
</html>
以上这些是代码谢谢万能的吧友们。
<div id="box" style="opacity:0.3;"></div>
