zoukankan      html  css  js  c++  java
  • 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 {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>
    ..
  • 相关阅读:
    C#编码标准--编码习惯
    课程九,课堂测试
    JAVAweb 分级测试
    第八周 课堂报告
    javaweb界面
    12月9日,第一次自查报告
    课程管理系统后台JAVA代码
    《程序员修炼之道+从小工到专家》读后有感
    12月9日 自查后续
    课程管理系统JAVAweb前端代码
  • 原文地址:https://www.cnblogs.com/shoolnight/p/6410510.html
Copyright © 2011-2022 走看看