javascript小球,JavaScript缓动的小球

html+css+js能不能做类似360的那种小球，在手机上运行的网页？

你是指下面这种小球吗？

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名注册、虚拟主机、营销软件、网站建设、铁东网站维护、网站推广。

这个是可以用jquery做的  它是一个jquery圆环统计插件circliful 来完成的

方法如下：

使用方法

link href="css/jquery.circlify.css" rel="stylesheet" type="text/css" /

script src=""/script

script src="js/jquery.circliful.min.js"/script

如果需要 fontawesome icons图片，请引入相关的CSS文件

将一个元素添加到页面中，并添加一个惟一的id值，并在data属性写上你需要的值，代码如下：

div id="myStat" data-dimension="250" data-text="35%" data-info="New Clients" data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd" data-total="200" data-part="35" data-icon="long-arrow-up" data-icon-size="28" data-icon-color="#fff"/div

写入JS初始化插件

$( document ).ready(function() {

$('#myStat').circliful();

});

参数

dimension / 元素的高度与宽度 / 默认值 200px X 200px

text / 圆环内显示的文本

info /圆环内text文本下方的文字信息 ，可以为空

width / 圆环的大小 / 默认值 15px

fontsize /文本的字体大小 / 默认 15px

percent / 百分比，可以是1到100间的任意数值

fgcolor / 圆环的前景色 / 默认值 #556b2f

bgcolor / 圆环的背景色 / 默认值 #eee

fill / 整个圆环的背景色 ，可以为空

type / 全环或是半环，设计 data-type="half" 显示成半圆环 / 默认值 circle

total / 总量，百分比，比如你有 750MB 空间，  350MB 是使用的. 你就可以这样设置 data-total="750" 和 data-part="350" ，圆环将会显示成百分比 36,85%

part

border / 圆环的边框.

icon / Fontawesome icon

iconsize / icon的大小

iconcolor / icon的颜色

animationstep /动画的步阶, use 0 to disable animation, 0.5 to slow down, 2 to speed up, etc / default is 1

startdegree / 开始前景动的位置 / 默认值 0

bordersize / 边框的宽度

如何使用javascript实现小球是沿着操场跑道轨迹运动

操场轨迹上下两边为直线，左右为半圆。

选择用纯css分成四段控制动画，最终效果如图：

详细分析：

创建HTML：

HTML非常简单，2个div嵌套，里面的point就是点，调整外面的layout的top，left和rotate做出动画效果。

div class="layout"

div class="point"/div

/div

核心css：

去掉了浏览器兼容用的代码。

把动画分成四个部分：上方直线-右边半圆-下方直线-左边半圆。

最巧妙的地方在于，layout其实是一个长方型，把点放在长方型的一头，通过旋转layout使点旋转，去掉代码中注释的红色背景就能看到如下效果：

.layout{

width:10px;

height:150px;

position:relative;

margin-left:100px;

margin-top:50px;

/*background:red;*/

animation-name:rotate;

animation-duration:2s;

animation-timing-function:linear;

animation-iteration-count:infinite;

animation-direction:alternate;

animation-play-state:running;

animation-direction:normal;

}

@-webkit-keyframes rotate{

0%  {  left:0px; top:0px; 

transform:rotate(0deg);

}

25% { left:150px; top:0px; 

transform:rotate(0deg);

}

50% { left:150px; top:50px; 

transform:rotate(180deg);

}

75% { left:0px; top:50px; 

transform:rotate(180deg);

}

100%{ left:0px; top:0px; 

transform:rotate(360deg);

}

}

完整代码:

html

head

style 

.point{

width:10px;

height:10px;

background:blue;

position:relative;

border-radius:5px;

margin:0 auto;

}

.layout{

width:10px;

height:150px;

position:relative;

margin-left:100px;

margin-top:50px;

/*background:red;*/

animation-name:rotate;

animation-duration:2s;

animation-timing-function:linear;

animation-iteration-count:infinite;

animation-direction:alternate;

animation-play-state:running;

animation-direction:normal;

/* Chrome: */

-webkit-animation-name:rotate;

-webkit-animation-duration:2s;

-webkit-animation-timing-function:linear;

-webkit-animation-iteration-count:infinite;

-webkit-animation-play-state:running;

-webkit-animation-direction:normal;

/* Firefox: */

-moz-animation-name:rotate;

-moz-animation-duration:2s;

-moz-animation-timing-function:linear;

-moz-animation-iteration-count:infinite;

-moz-animation-direction:alternate;

-moz-animation-play-state:running;

-moz-animation-direction:normal;

/* Opera: */

-o-animation-name:rotate;

-o-animation-duration:2s;

-o-animation-timing-function:linear;

-o-animation-iteration-count:infinite;

-o-animation-direction:alternate;

-o-animation-play-state:running;

-o-animation-direction:normal;

}

@-webkit-keyframes rotate{

0%  {  left:0px; top:0px; 

transform:rotate(0deg);

-ms-transform:rotate(0deg);  /* IE 9 */

-moz-transform:rotate(0deg);  /* Firefox */

-webkit-transform:rotate(0deg); /* Chrome */

-o-transform:rotate(0deg);  /* Opera */

}

25% { left:150px; top:0px; 

transform:rotate(0deg);

-ms-transform:rotate(0deg);  /* IE 9 */

-moz-transform:rotate(0deg);  /* Firefox */

-webkit-transform:rotate(0deg); /* Chrome */

-o-transform:rotate(0deg);  /* Opera */

}

50% { left:150px; top:50px; 

transform:rotate(180deg);

-ms-transform:rotate(180deg);  /* IE 9 */

-moz-transform:rotate(180deg);  /* Firefox */

-webkit-transform:rotate(180deg); /* Chrome */

-o-transform:rotate(180deg);  /* Opera */

}

75% { left:0px; top:50px; 

transform:rotate(180deg);

-ms-transform:rotate(180deg);  /* IE 9 */

-moz-transform:rotate(180deg);  /* Firefox */

-webkit-transform:rotate(180deg); /* Chrome */

-o-transform:rotate(180deg);  /* Opera */

}

100%{ left:0px; top:0px; 

transform:rotate(360deg);

-ms-transform:rotate(360deg);  /* IE 9 */

-moz-transform:rotate(360deg);  /* Firefox */

-webkit-transform:rotate(360deg); /* Chrome */

-o-transform:rotate(360deg);  /* Opera */

}

}

/style

/head

body

div class="layout"

div class="point"/div

/div

/body

/html

JS计算小球从n处掉落,每次弹回高度为原来的一半,高度小于1结束,求小球弹回次数

小球的起始跌落高度input id="input" type="text" value=""/input id="button" type="button" value="开始"/

div id="output"/div

script

function sb(h,s,n){

return h1?{n,s}:sb(h/2,s+h+h/2,n+1);

}

button.onclick=function(){

var gd=parseInt(input.value);

var res=sb(gd,0,0);

output.innerHTML="小球的回弹次数是"+res.n+"br /小球走过的路程是"+res.s

}

/script

js如和控制小球左右来回移动？

这个就是画一个球，然后写一个动画，从哪儿移动到哪儿，移动的时间之类的

Unity3D javascript脚本如何修改小球的弹性和半径

1、方法定义为static，直接类名.方法名调用；

如

class Main1{

public static function Add(j:int,i:int):void

{

Debug.Log(i+j);

}

}

Main1.Add(1,2);

2、new 一个对象，对象调用，如

var m:Main1 = new Main1();

m.Add(2,3);

3、GameObject.Find(),得到那个有这个脚本组件的GameObject，这个GameObject再GetComponent，得到script，scirpt再调用方法。

如何用js使小球来回弹动

你好，

可以通过判断小球边缘和窗口高度来实现

例如垂直下落，给小球y方向的初速度和加速度（模拟重力加速度），当小球的小边缘接触窗口底部时，将 y = -y；加速度不反向；当达到最高点及y方向速度为零，将y再反向向下落。

来回弹动关键在于 对边缘的判断，和速度方向的判断和计算

文章标题：javascript小球,JavaScript缓动的小球
分享地址：http://cdiso.cn/article/dscscps.html