1.淡入淡出效果js原生代码2.缓冲运动

分类: IT文章 • 2022-03-28 15:52:35

1. 淡入淡出效果js原生代码

html部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1{width:200px; height:200px; background:red; filter:alpha(opacity:30); opacity:0.3}
</style>

</head>

<body>
<div id="div1"></div>
</body>
</html>

View Code

js部分：

<script type="text/javascript">
window.onload=function(){
    var oDiv=document.getElementById('div1');
    oDiv.onmouseover=function(){
            startMove(100);
        }
        oDiv.onmouseout=function(){
            startMove(30);
        }
    }
var alpha=30;
var timer=null;
function startMove(iTarget){
        var oDiv=document.getElementById('div1');
        clearInterval(timer);
        timer=setInterval(function(){
            
            var speed=0;
            if(alpha<iTarget){
                    speed=10;
                }
                else{
                        speed=-10
                    }
            if(alpha==iTarget){
                        clearInterval(timer);
                    }
                else{
                            alpha+=speed;
                            oDiv.style.filter='alpha(opacity:'+alpha+')';
                            oDiv.style.opacity=alpha/100;
                    }
                            
            },30);
    }
</script>

View Code

2.缓冲运动

效果图：

1.淡入淡出效果js原生代码2.缓冲运动

功能：div的移动速度与div和右边黑线的距离成正比。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1{ width:100px; height:100px; background:red; position:absolute; left:0px; top:50px;}
#div2{ width:1px; height:300px; position:absolute; top:0px; left:300px; background:#000;}
</style>
<script type="text/javascript">
function startMove(){
    var oDiv=document.getElementById('div1');
    setInterval(function(){
        var speed=(300-oDiv.offsetLeft)/10;
        //speed=Math.ceil(speed);
        speed=speed>0?Math.ceil(speed):Math.floor(speed);
        oDiv.style.left=oDiv.offsetLeft+speed+'px';
            
        },30);
    }
</script>
</head>

<body>
<input type="button" value="开始运动"  onclick="startMove()"/>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

1.淡入淡出效果js原生代码2.缓冲运动

相关推荐