zoukankan      html  css  js  c++  java
  • javascript---在自由落体实现

    实现一些简单的物业自由落体需要理解:

    clientHeight:浏览器客户机的整体高度

    offsetHeight:物(实例div)高低

    offsetTop:从对象client最顶层的距离

    简单demo例如以下:

    <!doctype html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>free_movement</title>
    	<style type="text/css">
    		#div1{
    			position: absolute;
    			height: 100px;
    			 100px;
    			background: red;
    		}
    	</style>
    	<script type="text/javascript">
    		window.onload=function  () {
    			var btn=document.getElementById('btn');
    			var div1=document.getElementById('div1');
    
    			var Time=null;
    			var speed=0;
    			btn.onclick=function () {
    				startMove();
    			}
    
    			function startMove () {
    				clearInterval(Time);
    				Time=setInterval(function(){
    					speed+= 3;
    					var T = div1.offsetTop + speed;
    					if(T > document.documentElement.clientHeight - div1.offsetHeight){
    						T = document.documentElement.clientHeight - div1.offsetHeight;
    						speed *= -1;
    						speed *= 0.75;
    					}
    					div1.style.top=T+'px';
    				}, 30)
    			}
    		}
    	</script>
    </head>
    <body>
    	<input type='button' value='開始运动' id="btn">
    	<div id="div1"></div>
    </body>
    </html>

    注:clearTnterval(Time)://防止多个点击事件



    版权声明:本文博主原创文章。博客,未经同意不得转载。

  • 相关阅读:
    DS博客作业02--栈和队列
    DS博客作业02--线性表
    c博客06-2019-结构体&文件
    C博客作业05--2019-指针
    C语言博客作业04--数组
    C语言博客作业03--函数
    JAVA作业-.图书馆查书、借书、还书
    JAVA购物车
    5-互评-OO之接口-DAO模式代码阅读及应用
    DS博客作业05--查找
  • 原文地址:https://www.cnblogs.com/zfyouxi/p/4912542.html
Copyright © 2011-2022 走看看