js课程 6-15 js简单弹力球如何实现

一、总结

一句话总结：a、通过document的documentElement属性获取可是区域的高； b、通过增值变为负的实现到底部后反弹

1、document的body属性和documentElement属性的区别是什么？

比如body中只有一个img的时候
那么body的区域就是只有img的这么大
documentElement的范围就是整个document文档

2、如何实现弹力球到底部之后反弹的问题？

让增值变为负的即可

41 setInterval(function(){

42     ys+=yv;

43

44     if(ys>=diffHeight){

45         ys=diffHeight;

46         yv=-yv;

47     }

48

49     if(ys<=0){

50         yv=-yv;

51     }

52     imgobj.style.top=ys+'px';

53 },10);

3、js中如何设置元素的样式？

元素.style.样式名，比如imgobj.style.top

52     imgobj.style.top=ys+'px';

4、js中如何获取页面的宽高？

通过document的documentElement属性

1.有效的高   屏幕可视的高
document.documentElement.clientHeight

2.屏幕的总高度   屏幕的总高度
document.documentElement.scrollHeight

3.滚动的高      滚动的高度
document.documentElement.scrollTop

34 screenHeight=document.documentElement.clientHeight;

35 imgHeight=128;

36 diffHeight=screenHeight-imgHeight;

5、div中放img，比如img是128*128，div也是128*128，但是img还是把div多顶了4px，div变成了128*132，如何解决？

出现的原因是因为图片对齐的问题，虽然这里没有文字，其实也就是块标签中的行标签对齐的问题
a、img设置display为block
b、div设置overflow为hidden

6、jquery和js中事件的区别是什么？

js中加了on，比如onkeydown，而jquery中就是keydown

二、js简单弹力球如何实现

1、相关知识

获取3个高度:
1.有效的高   屏幕可视的高
document.documentElement.clientHeight

2.屏幕的总高度   屏幕的总高度
document.documentElement.scrollHeight

3.滚动的高      滚动的高度
document.documentElement.scrollTop

 

2、代码

 <!doctype html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

             margin:0px;

             padding:0px;

         }

         #imgid{

             width:128px;

             height:128px;

             position: absolute;

             top:0px;

             left:0px;

         }

         #imgid img{

             display: block;

         }

     </style>

 </head>

 <body>

     <div id='imgid'>

         <img src="fb.png">

     </div>

 </body>

 <script>

 imgobj=document.getElementById('imgid');

 screenHeight=document.documentElement.clientHeight;

 imgHeight=128;

 diffHeight=screenHeight-imgHeight;

 ys=0;

 yv=10;

 setInterval(function(){

     ys+=yv;

     if(ys>=diffHeight){

         ys=diffHeight;

         yv=-yv;

     }

     if(ys<=0){

         yv=-yv;

     }

     imgobj.style.top=ys+'px';

 },10);

 </script>

 </html>
 

js课程 6-15 js简单弹力球如何实现的更多相关文章

  1. js课程 1-5 js如何测试变量的数据类型

    js课程 1-5 js如何测试变量的数据类型 一.总结 一句话总结:用typeof()方法. 1.js如何判断变量的数据类型? 用typeof()方法. 13 v=10; 14 15 if(typeo ...

  2. js版弹力球实例

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>弹 ...

  3. JS实现弹性势能效果(弹力球效果[实现插件封装])

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. js课程 4-11 表格如何实现隔行换色

    js课程 4-11 表格如何实现隔行换色 一.总结 一句话总结:表格奇数行和偶数行判断,赋予不同的样式. 1.表格如何隔行换色? 表格奇数行和偶数行判断,赋予不同的样式. 21 <script& ...

  5. js课程 1-4 js变量的作用域是怎样的

    js课程  1-4   js变量的作用域是怎样的 一.总结 一句话总结:只有在函数内部前面带var的变量为局部变量,局部变量只能在函数体内使用. 1.什么情况下会出现NaN类型的错误,举一例? Num ...

  6. js课程 1-3 Javascript变量类型详解

    js课程 1-3  Javascript变量类型详解 一.总结 一句话总结:js对象点(属性方法),json对象冒号(属性方法).属性和方法区别只有一个括号. 1.json对象中的函数的使用? 函数名 ...

  7. js课程 1-2 js概念

    js课程 1-2  js概念 一.总结 一句话总结:js标签元素也是js对象,有属性和方法,方法就是事件,属性就是标签属性,可以直接调用. 1.js中如何获取标签对象? getElement获取的是标 ...

  8. node.js学习（三）简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理

    一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...

  9. Js完美验证15/18身份证，Js验证身份证，支持15/18位

    Js完美验证15/18身份证,Js验证身份证,支持15/18位 >>>>>>>>>>>>>>>>> ...

随机推荐

  1. 2015合肥网络赛 HDU 5492 Find a path 动归

    HDU 5492 Find a path 题意:给你一个矩阵求一个路径使得 最小. 思路: 方法一:数据特别小,直接枚举权值和(n + m - 1) * aver,更新答案. 方法二:用f[i][j] ...

  2. impala 概述

    impala 概述 什么是Impala? Impala是用于处理存储在Hadoop集群中的大量数据的MPP(大规模并行处理)SQL查询引擎. 它是一个用C ++和Java编写的开源软件. 与其他Had ...

  3. OPENCV(3) —— 对XML和YAML文件实现I/O 操作

    XML\YAML文件在OpenCV中的数据结构为FileStorage string filename = "I.xml"; FileStorage fs(filename, Fi ...

  4. AIX 系统补丁升级步骤

    AIX 系统补丁升级步骤   1.升级之前建议备份 rootvg (推荐) # smit mksysb   2.检查系统版本号 # oslevel -r   3.找到补丁光盘或者下载补丁,上传到服务器 ...

  5. Server.UrlEncode与HttpUtility.UrlEncode的区别

    一.HttpUtility.UrlEncode 方法 1.public static string UrlEncode(byte[]) 将字节数组转换为已编码的 URL 字符串. 2.public s ...

  6. 紫书 例题 9-1 UVa 1025 ( DAG的动态规划）

    影响到状态的只有时间和在哪个车站(空间),所以可以设f[i][j]是时刻i的时候在第j个车站的最少等待时间 因为题目中的等待时间显然是在0时刻1车站,所以答案为f[0][1],那么就提醒我们从大推到小 ...

  7. 【Uva 10285】Longest Run on a Snowboard

    [Link]: [Description] 在一个r*c的格子上; 求最长的下降路径; [Solution] 记忆化搜索; f[x][y]表示从(x,y)这个格子往下还能走多远; 因为是严格递增,所以 ...

  8. Git学习总结（5）——搭建Git简易高效服务器

    1. mysysgit+gitblit安装流程 1.1资源  需先下载好的资源(公司用的1.6,1.7+请自行匹配对应的mysysgit+gitblit):  jdk1.6  Git-1.8.4-pr ...

  9. Linux学习总结（7）——阿里云centeros服务器上安装 jdk,tomcat,mysql

    查看服务器的系统版本 # cat /etc/issue 查看服务器是64位还是32位 #uname -a      或者用:#getconf LONG_BIT 查看当前有没有安装jdk #rpm -q ...

  10. openfire 开发遇到的些问题

    openfire的 jid    账户名 + '@" + 你的域名      可是当你的账户名中 有大拼音的 时候  就会变成小写   比如     Test  ,  jid  =  tes ...