js动弹特效

复制代码
<!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>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
var iSpeedX=12;
var iSpeedY=8;

function startMove()
{
    setInterval(function (){
        var oDiv=document.getElementById('div1');
        
        iSpeedY+=3;
        
        var l=oDiv.offsetLeft+iSpeedX;
        var t=oDiv.offsetTop+iSpeedY;
        
        if(t>=document.documentElement.clientHeight-oDiv.offsetHeight)
        {
            iSpeedY*=-0.8;
            iSpeedX*=0.8;
            t=document.documentElement.clientHeight-oDiv.offsetHeight;
        }
        else if(t<=0)
        {
            iSpeedY*=-1;
            iSpeedX*=0.8;
            t=0;
        }
        
        if(l>=document.documentElement.clientWidth-oDiv.offsetWidth)
        {
            iSpeedX*=-0.8;
            l=document.documentElement.clientWidth-oDiv.offsetWidth;
        }
        else if(l<=0)
        {
            iSpeedX*=-0.8;
            l=0;
        }
        
        if(Math.abs(iSpeedX)<1)
        {
            iSpeedX=0;
        }
        
        if(Math.abs(iSpeedY)<1)
        {
            iSpeedY=0;
        }
        
        oDiv.style.left=l+'px';
        oDiv.style.top=t+'px';
        
        document.title=iSpeedX;
    }, 30);
}
</script>
</head>

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

 

posted @   Monroe_Yu  阅读(136)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛