html css纯写桌球运动轨迹,纯JS实现椭圆轨迹运动的代码

#div1 {

margin:100px auto;

width:5px;

height:5px;

background:green;

position:relative;

}

#box {

width:50px;

height:50px;

background:url(//ku.shouce.ren/files/images/201601/56a36cac3d89c.gif) no-repeat;

position:absolute;

left:0;

top:0;

}

椭圆轨迹移动

window.οnlοad=function() {//运动轨迹随便写的一个(x/300)2+(y/100)2=1椭圆方程

var oDiv=document.getElementById('box');

var oTxt=document.getElementById('txt');

var m=-300;

var n=300;

var y=0;

var x=0;

function move() {

if(m<=300) {

x=m;

b();

}

else {

x=n;

a();

if(x

clearInterval(timer);

m=-300;

n=300;

timer=setInterval(move,5);

}

oDiv.style.left=x+'px';

oDiv.style.top=parseInt(y)+'px';

oTxt.value="top="+oDiv.style.top+'\n'+"left="+oDiv.style.left+'\n'+"X="+x+'\n'+"M="+m+'\n'+"N="+n;}

function a(){

n-=1;

y=Math.sqrt(1-Math.pow(n/300,2))*100;

}

function b(){

m+=1;

y=Math.sqrt(1-Math.pow(m/300,2))*-100;

}

move();

var timer=setInterval(move,5);

}

html css纯写桌球运动轨迹,纯JS实现椭圆轨迹运动的代码相关推荐

js实现椭圆轨迹_Canvas实现直线与圆形的物理运动效果
导语:之前写过几篇关于canvas实现圆环动画的文章,例如这篇:canvas绘制旋转的圆环百分比进度条和使用HTML5 Canvas arc()绘制圆形/圆环,实现方法是通过循环绘制圆环(圆饼)等来实 ...
js实现椭圆轨迹_华为开发者大会2020隆重召开，亿健T10椭圆机荣耀参展
引言:万众瞩目的华为开发者大会2020(HDC·Together)于2020年9月10日在东莞松山湖隆重拉开帷幕.第一天的主题演讲中,华为带来了HarmonyOS 2.0.EMUI 11.HMS.HU ...
js实现椭圆轨迹_【CSON原创】javascript椭圆旋转相册发布
功能说明: 1.支持自动和手动两种模式:自动模式下自动旋转展示,手动模式下通过鼠标选择当前图片,或通过提供的接口选择上一张/下一张图片. 2.可自行添加旋转的缓动模式,默认模式为:匀速,先快后慢,先慢 ...
纯JS+CSS手写日历
介绍今天带来一个纯JS+css手写的日历, 一开始先显示当前日期,比如下方25日就是当前日期会有较深蓝色背景色,鼠标指着的日期是下方图片14日的淡蓝色背景色上面显示日期,可左右选择上个月或者下个月 ...
Css实现刘海,纯CSS样式写刘海屏效果
1. 效果: 2. 代码: 刘海? :root { --bg--color: #ed4014; } body { background: var(--bg--color); } .top_bar_di ...
html编写气泡对话框,HTML+CSS入门纯CSS手写圆角气泡对话框
本篇教程介绍了HTML+CSS入门纯CSS手写圆角气泡对话框,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 嗯--我们设计师强烈要求一定要圆角!圆角的气泡对话框,不要那 ...
【技能】使用纯CSS+html写出方向箭头，简单大方，好看
使用纯CSS+html写出方向箭头,贴出来就可以用,100%原创 <html><head><title></title><meta http-eq ...
css 图标点击变色,纯CSS实现小图标变色的一些研究
by zhangxinxu from www.zhangxinxu.com/wordpress/?- 本文可全文转载,个人网站无需授权,只要保留原作者.出处以及文中链接即可,任何网站均可摘要聚合,商用 ...
纯css和html光芒特效,纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
html代码 html代码结构很简单,跟之前那篇文章使用的相同: 复制代码代码如下: webhek 最外面的div作为父元素,它的position是relative,有固定的高和宽度,有两个子元素:一 ...
【手写系列】纯手写实现一个高可用的RPC
前言在实际后台服务开发中,比如订单服务(开发者A负责)需要调用商品服务(开发者B负责),那么开发者B会和A约定调用API,以接口的形式提供给A.通常都是B把API上传到Maven私服,然后B开始写A ...

html css纯写桌球运动轨迹,纯JS实现椭圆轨迹运动的代码

html css纯写桌球运动轨迹,纯JS实现椭圆轨迹运动的代码相关推荐

最新文章

热门文章