javascript学习-原生javascript的小特效（多个运动效果整理）

最新推荐文章于 2020-12-23 07:01:37 发布

吴杼恩

最新推荐文章于 2020-12-23 07:01:37 发布

阅读量1k

点赞数

分类专栏： JavaScript 相关知识文章标签： javascript 框架 javascript运动效果怎样学习原生javascript 学习javascript的方法

本文链接：https://blog.csdn.net/qianqianyixiao1/article/details/40344407

版权

JavaScript 相关知识专栏收录该内容

27 篇文章 0 订阅

订阅专栏

以下代码就不详细解析了，在我之前的多个运动效果中已经解析好多次了，重复的地方这里就不说明了，有兴趣的童鞋可以去看看之前的文章《原生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.οnlοad=function(){
var aLi=document.getElementsByTagName("li");
for(var i=0;i<aLi.length;i++){
aLi[i].timer;
aLi[i].οnmοuseοver=function(){
onOut(this,100,'opacity');
}
aLi[i].οnmοuseοut=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>

吴杼恩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript学习-原生javascript的小特效（多个运动效果整理）

body,*{margin: 0;padding: 0;}li{width: 300px;height:100px;background: yellow;margin-top: 10px;filter: alpha(opacity:30);opacity: 0.3}window.onload=function(){ var aLi=document.getElemen
复制链接

扫一扫