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

最新推荐文章于 2021-06-01 11:41:44 发布

weixin_34390996

最新推荐文章于 2021-06-01 11:41:44 发布

阅读量104

点赞数

文章标签： javascript ViewUI

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是128128，div也是128128，但是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、代码

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9             margin:0px;
10             padding:0px;
11         }
12 
13         #imgid{
14             width:128px;
15             height:128px;
16             position: absolute;
17             top:0px;
18             left:0px;
19         }
20 
21         #imgid img{
22             display: block;
23         }
24 
25     </style>
26 </head>
27 <body>
28     <div id='imgid'>
29         <img src="fb.png">
30     </div>    
31 </body>
32 <script>
33 imgobj=document.getElementById('imgid');
34 screenHeight=document.documentElement.clientHeight;
35 imgHeight=128;
36 diffHeight=screenHeight-imgHeight;
37 
38 ys=0;
39 yv=10;
40 
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);
54 </script>
55 </html>

weixin_34390996

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js课程 6-15 js简单弹力球如何实现

js课程 6-15 js简单弹力球如何实现一、总结一句话总结：a、通过document的documentElement属性获取可是区域的高； b、通过增值变为负的实现到底部后反弹 1、document的body属性和documentElement属性的区别是什么？比如body中只有一个img的时候那么body的区域就是只有img的这么大documentElement的范围就是整...
复制链接

扫一扫