以下代码就不详细解析了，在我之前的多个运动效果中已经解析好多次了，重复的地方这里就不说明了，有兴趣的童鞋可以去看看之前的文章《原生javascript的小特效》
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,*{margin: 0;padding: 0;}
li{width: 300px;height:100px;background: yellow;margin-top: 10px;filter: alpha(opacity:30);opacity: 0.3}
</style>
<script type="text/javascript">
window.onload=function(){
var aLi=document.getElementsByTagName("li");
for(var i=0;i<aLi.length;i++){
aLi[i].timer;
aLi[i].onmouseover=function(){
onOut(this,100,'opacity');
}
aLi[i].onmouseout=function(){
onOut(this,30,'opacity');
}
}
}
function onOut(that,tag,tagattr){
clearInterval(that.timer);
that.timer=setInterval(function(){
var speed;
var attr;
if(tagattr=='opacity'){
attr=Math.round(parseFloat(getAttr(that,tagattr)));
//计算机在处理小数点的时候不是很准确的，一般这样我们都四舍五入一下
}else{
attr=parseInt(getAttr(that,tagattr));
}
if(tagattr=='opacity'){
speed=(tag-attr);
}
else{
speed=(tag-attr)/20;
}
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(attr==tag){
clearInterval(that.timer);
}else{
if(tagattr=='opacity'){
that.style.filter="alpha(opacity:'+speed+')";
that.style.opacity=speed/100;
}else{
that.style[tagattr]=attr+speed+"px";
}
}
},20)
}
function getAttr(obj,attr){
var style;
if(obj.currentStyle){
style=obj.currentStyle[attr];
}else{
style=getComputedStyle(obj,false)[attr];
}
return style;
}
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
![重新整理 .net core 实践篇————依赖注入应用[二]](https://www.kunjuke.com/file/css/thumb/4.jpg/280-180.jpg)
