正文
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再反向向下落。
来回弹动关键在于 对边缘的判断，和速度方向的判断和计算
