正文
javascript多球,您的设备已经禁止JAVASCRIPT
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
如何使用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
相关问答
Q1: 用js编程 红白球共25个,白黑球共31个,红黑球共28个,求三种球各有多少
!--
red:11
black:17
white:14
--
html
body
script type="text/javascript"
for(var red=0;red=25;red++)
{
var white=25-red,black=28-red;
if(31==white+black)
{
alert("red:"+red+"\n"+"black:"+black+"\n"+"white:"+white);
}
}
/script
/body
/html
Q2: javascript特效问题 页面上有许多点一直跟随着鼠标指针的移动。如何实现这个这个效果.
新建html复制黏贴运行即可
html
head
title鼠标跟随效果/title
style type="text/css"
html {
overflow: hidden;
}
body {
position: absolute;
height: 100%;
width: 100%;
margin:0;
padding:0;
}
#screen {
background:#000;
position: absolute;
width: 100%;
height: 100%;
}
#screen span {
background: #fff;
font-size: 0;
overflow: hidden;
width: 2px;
height: 2px;
}
/style
script type="text/javascript"
var Follow = function () {
var $ = function (i) {return document.getElementById(i)},
addEvent = function (o, e, f) {o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on'+e, function(){f.call(o)})},
OBJ = [], sp, rs, N = 0, m;
var init = function (id, config) {
this.config = config || {};
this.obj = $(id);
sp = this.config.speed || 4;
rs = this.config.animR || 1;
m = {x: $(id).offsetWidth * .5, y: $(id).offsetHeight * .5};
this.setXY();
this.start();
}
init.prototype = {
setXY : function () {
var _this = this;
addEvent(this.obj, 'mousemove', function (e) {
e = e || window.event;
m.x = e.clientX;
m.y = e.clientY;
})
},
start : function () {
var k = 180 / Math.PI, OO, o, _this = this, fn = this.config.fn;
OBJ[N++] = OO = new CObj(null, 0, 0);
for(var i=0;i360;i+=20){
var O = OO;
for(var j=10; j35; j+=1){
var x = fn(i, j).x,
y = fn(i, j).y;
OBJ[N++] = o = new CObj(O , x, y);
O = o;
}
}
setInterval(function() {
for (var i = 0; i N; i++) OBJ[i].run();
}, 16);
}
}
var CObj = function (p, cx, cy) {
var obj = document.createElement("span");
this.css = obj.style;
this.css.position = "absolute";
this.css.left = "-1000px";
this.css.zIndex = 1000 - N;
document.getElementById("screen").appendChild(obj);
this.ddx = 0;
this.ddy = 0;
this.PX = 0;
this.PY = 0;
this.x = 0;
this.y = 0;
this.x0 = 0;
this.y0 = 0;
this.cx = cx;
this.cy = cy;
this.parent = p;
}
CObj.prototype.run = function () {
if (!this.parent) {
this.x0 = m.x;
this.y0 = m.y;
} else {
this.x0 = this.parent.x;
this.y0 = this.parent.y;
}
this.x = this.PX += (this.ddx += ((this.x0 - this.PX - this.ddx) + this.cx) / rs) / sp;
this.y = this.PY += (this.ddy += ((this.y0 - this.PY - this.ddy) + this.cy) / rs) / sp;
this.css.left = Math.round(this.x) + 'px';
this.css.top = Math.round(this.y) + 'px';
}
return init;
}();
/script/head
body
div id="screen"/div
script type="text/javascript"
new Follow('screen', {speed: 4,
animR : 2,
fn : function (i, j) {
return {
x : j/4*Math.cos(i),
y : j/4*Math.sin(i)
}
}})
/script/body
/html
Q3: 怎么开启JavaScript ？
看你是什么浏览器了
1、IE浏览器开启关闭JavaScript方法：
在IE界面菜单栏中“工具”中选择“Internet选项”–“安全”选项卡–选择“Internet”（蓝色的小地球）–“自定义级别”–找到“脚本”下的“Java小程序脚本”中进行启用。如下图所示，设置完成后，重新打开浏览器设置即可生效。
2、360浏览器开启Ja关闭vaScript方法：
在360界面菜单栏的“工具”中选择“360安全浏览器选项”–“网页设置”选项–在网页设置选项中取消“不支持Java小程序”。如下图所示，设置完成后，重新打开浏览器设置即可生效。
3、腾讯TT浏览器开启关闭JavaScript方法：
打开TT浏览器，点击右上方的“菜单” - 选择“工具” - 选择“TT选项”，在打开的设置界面中选择“智能屏蔽”，在智能屏蔽设置页面中将“禁止运行Java程序”取消，点击保存，重新启动浏览器设置即可生效。
4、搜狗浏览器开启关闭JavaScript方法：
目前，搜狗开启JavaScript方法继承于IE浏览器，IE浏览器开启JavaScript方法
5、火狐浏览器开启Ja关闭vaScript方法：
打开火狐浏览器界面，在菜单栏中选择“工具”–“选项”–“内容”中可见到“启用JavaScript”的选项，重新启动浏览器即可。
6、Opera浏览器开启关闭JavaScript方法：
打开Opera浏览器，在菜单栏中选择“工具”–“首选项”–“高级”选项卡–“内容”中的“允许使用JavaScript”可以设置，重新启动浏览器即可。
7、Safari浏览器开启Ja关闭vaScript方法：
以Beta4英文版为准，在“Preferences”–“Security”选项卡中的“Enable JavaScript”，勾选上则是打开，反之是禁用，重新启动浏览器即可。
8、谷歌浏览器开启关闭JavaScript方法：
打开谷歌浏览器，点击右上方扳手样式的图片 - 选择“选项” - 选择“高级选项” - 选项“内容设置” - 选择“JavaScript” - 选择“运行所有网站运行JavaScript(推荐)”，设置完成重新打开浏览器即可。
9、世界之窗浏览器开启关闭JavaScript方法：
打开世界之窗浏览器，在上方菜单栏中点击“工具” - 选择“选项” - 在打开的设置页面选择“页面设置” - 页面内容中选择将“不执行Java小程序”取消，即可完成设置，重新启动浏览器即可。
10、Avant浏览器开启关闭JavaScript方法：
1、打开Avant浏览器，在菜单栏点击右上方选择“工具” - 将“禁止运行Java小程序”前对勾取消。
2、打开Avant浏览器，在菜单栏点击右上方选择“工具” - 选择“Avant Browser选项” - 选择“浏览选项” - 将“禁止运行Java小程序”前对勾取消即可完成设置，重新启动浏览器即可。
Q4: js中for语句,一个球从5米的高度自由落下,每次落地后反跳回原高度的30%,经过几
//一球从100米高度自由落下，每次落地后反跳回原高度的一半；再落下，求它在第10次落地时，共经过多少米？第10次反弹多高？
var fn = function(){
// 100米高度
var s = 100;
// 经过的米数
var sum = 0;
for(var i = 0;i 10;i++){
// 每次下落经过的米数
sum += s;
// 反跳回原高度的一半
s /= 2;
if(i == 9){
alert("第10次落地时，经过" + sum + "米\n第10次反弹" + s + "米");
}
// 每次反弹经过的米数
sum += s;
}
}
fn();
//-------------------
//js中for语句,一个球从5米的高度自由落下,每次落地后反跳回原高度的30%,经过几
