web前端：一个节操的自由落地

                 web前端：一个节操的自由落地

前言：在web前端开发之后，除了运用到CSS+div做页面布局之外，使用Javascript技术做出动态效果同样重要。虽然在今天，随着JQuery类库的发展，已经提供了无数的特效载入，但是在保证安全性的前提下，使用纯Javascript写出的动态效果，占用内存更少，响应速度更快，适用范围和表现效果其实是强于JQuery的。今天在这里讲的，是利用Javascript做出的一个小游戏，也是javascript的函数基础练习。

 一，节操在哪里

       节操在哪里？正所谓千人千面，一千个人人眼里有一千个春哥。要想让节操自由落地，首先要对节操进行定位，再给它一个底部，让节操触底之后反弹，直到碎掉。因为需要让节操碎掉，所以使用了一图片做为背景。

//此处对节操进行定位，在不影响SEO优化的情况下，可以将CSS样式写入div标签，方便调用
<div
 id="ball" 
 style="margin-top:0;
 margin-left:0;
 width:50px;
 height:50px;
 background:url('img/ballcopy.png');"
 ></div>

//此处对底部进行定位
<div 
style="width: 650px;
height: 50px;
background: url('img/beauty.png');
position:absolute;
top: 600px;
left: 10px;"
></div>

二，节操怎么下落

      相信没有人喜欢下落不明的节操，下面的javascript代码就用来实现对节操下落过程的控制。

 

<script type="text/javascript"> 
var fallball = document.getElementById("ball");
var mar = parseInt(fallball.style.marginTop);//获取节操的高度
var i = 0; 
var j = 0; 
var iIntervalId = null; 
var value = true; 
function happyball(){ 
if(value==true) 
{ if(mar<=screen.height-500){
//节操处于高处时，开始下落 
j = j + 1; 
fallball.style.marginTop=mar + 2*j +"px" ;//加速下落 
mar = parseInt(fallball.style.marginTop);
 } 
if(mar>=screen.height-500){
 i = i+1; 
 j = j+1; 
value=false; 
} } 
if(value==false){
 if(mar>=((screen.height-500)-(screen.height-150)/(2*i))) {
 //节操到达底部，开始上升 
j = j-1; //上升减速 
fallball.style.marginTop=mar - 2*j +"px" ; 
mar = parseInt(fallball.style.marginTop); } 
if(mar<=((screen.height-500)-(screen.height-150)/(2*i))){ 
j=0;
 value=true; //上升和下落的状态转换 } }
 fallball.style.marginLeft= parseInt(fallball.style.marginLeft)+5+"px";
 iIntervalId = setInterval("happyball()",50);
 </script>

三，节操的碎掉与重生  

if(i==5)//当下落次数完毕时，停止运动，碎掉节操 { 
clearInterval(iIntervalId);

fallball.style.background="url('img/ball.png')"; } }

   

这实在是一个很无聊却又充满乐趣的游戏，不是吗？附图与文件包地址：

百度云盘地址：http://pan.baidu.com/share/link?shareid=2030079963&uk=1915769746&third=15