JS透明度動(dòng)畫：<!DOCTYPE?HTML>
<html>
<head>
<meta?http-equiv="Content-Type"?Content="text/html;?charset=utf-8"?/>
<title>javascript</title>
<style?type="text/css">
??*?{
????margin:?0;
????padding:?0;
??}
??#mainBody?{
????width:?200px;
????height:?200px;
????background-color:?red;
????opacity:?0.3;
??}
</style>
</head>
<body>
??<div?id='mainBody'>
??</div>
??<script>
????var?oDiv?=?document.getElementById('mainBody');
????window.onload?=?function()?{
??????oDiv.onmouseover?=?function()?{
????????startMove(100);
??????}
??????oDiv.onmouseout?=?function()?{
????????startMove(30);
??????}
????}
????var?timer?=?null;
????var?opacityE?=?30;
????function?startMove(iTarget)?{
??????clearInterval(timer);
??????timer?=?setInterval(function()?{
????????var?speed?=?0;
????????if?(opacityE?>?iTarget)?{
??????????speed?=?-5;
????????}
????????else?{
??????????speed?=?5;
????????}
????????if?(opacityE?==?iTarget)?{
??????????clearInterval(timer);
????????}
????????else?{
??????????opacityE?+=?speed;
??????????oDiv.style.opacity?=?opacityE/100;
????????}
??????},20)
????}
??</script>
</body>
</html>
JS透明度動(dòng)畫（全代碼）
CNSDHH
2017-12-04 16:53:36
