JavaScript淡入淡出

最新推荐文章于 2022-02-21 20:24:31 发布

hyzhang6

最新推荐文章于 2022-02-21 20:24:31 发布

阅读量588

点赞数

分类专栏： JavaScript 文章标签： JavaScript 运动淡入淡出

本文链接：https://blog.csdn.net/hyzhang6/article/details/78242719

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
height: 200px;
width: 200px;
background: yellow;
/*margin: 10px;
float: left;*/
/*border: 2px solid black;*/

filter: alpha(opacity:30);
opacity: 0.3;

}

</style>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
var oDiv1 = document.getElementById("div1");
oDiv1.οnmοuseοver= function(){
moveStart(this,'opacity',100)
}
oDiv1.οnmοuseοut= function(){
moveStart(this,'opacity',30)
}

}
function getStyle(obj,name){
if (obj.currentStyle) {
return obj.currentStyle.name;
} else{
return getComputedStyle(obj,false)[name];
}
}
function moveStart(obj,attr,iTarget){
clearInterval(obj.times);
obj.times = setInterval(function(){
var cur = null;
if(attr=='opacity'){
cur = parseFloat(getStyle(obj,attr))*100;
}else{
cur = parseInt(getStyle(obj,attr));
}
//var oDiv = document.getElementsByTagName("div");
var speed = (iTarget-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(iTarget==cur){
clearInterval(obj.times)
}else{
if(attr == 'opacity'){
obj.style.filter='alpha(opacity:'+(cur+speed)+')';
obj.style.opacity=(cur+speed)/100;

document.getElementById("txt").value = obj.style.opacity;
}else{
obj.style[attr] = cur +speed+"px";
}

}
},30)
}

</script>
<input type="text" id="txt" />
<div id="div1">高度</div>
</body>
</html>

hyzhang6

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript淡入淡出

div{height: 200px;width: 200px;background: yellow;/*margin: 10px;float: left;*//*border: 2px solid black;*/filter: alpha(opacity:30);opacity: 0.3;}window.onload = fun
复制链接

扫一扫

专栏目录