当前位置: 首页 > news >正文

网站后台图片滚动效果怎么做/网站建设制作过程

网站后台图片滚动效果怎么做,网站建设制作过程,营销型网站建设广州,华为公司的企业设计Jscex真的能制作愤怒的小鸟?在我没有接触Jscex之前,我也不相信!但是只要解决了重力场运动和碰撞的两大物理问题,Jscex版的愤怒小鸟,那就是囊中之物。 如果关注这个系列的话,在javascript异步编程系列【二】…

Jscex真的能制作愤怒的小鸟?在我没有接触Jscex之前,我也不相信!但是只要解决了重力场运动和碰撞的两大物理问题,Jscex版的愤怒小鸟,那就是囊中之物

angrybird

如果关注这个系列的话,在javascript异步编程系列【二】----Jscex模拟重力场与google苹果logo的比较中,模拟了苹果在重力场下的自由落体运动。

那么我们可以轻松的帮它扩展一个水平方向上的速度.

 <script type="text/javascript">
function Bird(startPos, speed_X, speed_Y, element) {
this.speed_X = speed_X;
this.speed_Y = speed_Y;
this.startPos = startPos;
this.fly = function () {
flyAsync(element, startPos, speed_X, speed_Y).start();
}
}
var flyAsync = eval(Jscex.compile("async", function (e, startPos, speed_X, speed_Y) {
e.style.left = startPos.x;
e.style.top = startPos.y;
//vt=v0+at
//重力加速度
var a_y = 40;
var speed_YTemp = speed_Y;
var time = 0;
while (Math.abs(speed_Y) <= speed_YTemp) {
$await(Jscex.Async.sleep(50));
time = time + 50;
speed_Y = speed_Y - a_y;
startPos.y -= (speed_Y * 0.05);
e.style.top = startPos.y;
startPos.x += speed_X * 0.05;
e.style.left = startPos.x;
}
}));
function Button1_onclick() {
var bird = new Bird({ x: 0, y: 300 }, 400, 700, document.getElementById("birdDiv"));
bird.fly();
}
</script>
<input id="Button1" type="button" value="发¢射?" onclick="return Button1_onclick()" />
<div id="birdDiv" style="left: 0px; top: 300px; position: absolute;">
<img id="bird" src="bird.jpg" alt="" />
</div>
看效果请按:

可以看得出来,有点生硬,而且位移有点偏差,比如启始的top:1000,终止的top:1100!主要原因是在结束while (Math.abs(speed_Y) <= speed_YTemp)的之前那最后一次

循环带来的误差!那么就完善一下while里面的条件,让它不执行最后一次循环。

var flyAsync = eval(Jscex.compile("async", function (e, startPos, speed_X, speed_Y) {
e.style.left = startPos.x;
e.style.top = startPos.y;
//vt=v0+at
//重力加速度
var a_y = 40;
var speed_YTemp = speed_Y;
var time = 0;
var maxY = startPos.y
while (speed_Y > 0 ? (Math.abs(speed_Y) <= speed_YTemp) : (e.offsetTop - (speed_Y - a_y) * 0.05 <= maxY)) {
$await(Jscex.Async.sleep(50));
time = time + 50;
speed_Y = speed_Y - a_y;
startPos.y -= (speed_Y * 0.05);
e.style.top = startPos.y;
startPos.x += speed_X * 0.05;
e.style.left = startPos.x;
}
}));

看效果请按:

最后让小鸟撞击地面弹起,然后又撞击地面弹起···一直循环下去···

var flyAsync = eval(Jscex.compile("async", function (e, startPos, speed_X, speed_Y) {
e.style.left = startPos.x;
e.style.top = startPos.y;
var maxY = startPos.y;
//所用公式?:vt=v0+at
//重力加速度
var a_y = 40;
var speed_YTemp = speed_Y;
var time = 0;
while (true) {
$await(Jscex.Async.sleep(1));
while (speed_Y > 0 ? (Math.abs(speed_Y) <= speed_YTemp) : (e.offsetTop - (speed_Y - a_y) * 0.05 <= maxY)) {
$await(Jscex.Async.sleep(50));
time = time + 50;
speed_Y = speed_Y - a_y;
startPos.y -= (speed_Y * 0.05);
e.style.top = startPos.y;
startPos.x += speed_X * 0.05;
e.style.left = startPos.x;
}
//与地面撞击,X轴损失一部分速度,Y轴损失一部分速度并且被弹起
 speed_X = speed_X / 2;
speed_Y = -speed_Y / 3;
if (speed_X < 6) break;
}
}));

因为撞击的过程当中,X轴损失一部分速度,Y轴损失一部分速度并且被弹起,当speed_X小于6的时候退出循环。

看效果请按:

 

【代码示例下载】:

未完待续啊·····················要去上班了啊······

ps:感兴趣的小盆友可以利用CSS3,让小鸟在空中运动的过程中受到了一定的空气阻力,导致小鸟旋转一定角度,小鸟在落地之后,导致小鸟在地上滚动前进,这样更加逼真的体现了现实中的物体运动

最新的Jscex 库,请上https://github.com/JeffreyZhao/jscex或者http://www.sndacode.com/projects/jscex/wiki下载吧····

【更多javascript异步编程系列】

javascript异步编程系列【一】----用Jscex画圆

javascript异步编程系列【二】----Jscex模拟重力场与google苹果logo的比较

javascript异步编程系列【三】----Jscex无创痕切入JqueryUI

javascript异步编程系列【四】----Jscex+Jquery UI打造游戏力度条

http://www.jmfq.cn/news/5068243.html

相关文章:

  • 做网站要营业执照吗/竞价托管公司
  • 织梦手机网站怎么安装/百度统计代码安装位置
  • 新闻网站建设意义/seo网站排名优化价格
  • 网站出现的问题/百度seo指南
  • 网站移动端seo/交换链接的例子
  • 杭州个人做网站/百度推广公司哪家比较靠谱
  • 潜江市网站/东莞推广公司
  • 为什么要建设医院网站/百度手机助手下载2021新版
  • 如何在百度上找网站/云南百度推广开户
  • java做网站6/谷歌的推广是怎么样的推广
  • 老李网站建设/百度指数功能模块
  • 做英语四级题的网站/公众号微博seo
  • 培训网站网站建设/app拉新推广平台渠道
  • 东圃手机网站建设电话/安年软文网
  • 如何生成网站的二维码/百度官方推广
  • 做搜狗手机网站优化点/怎么优化网站关键词排名
  • 找人做网站会给源代码吗/百度推广客服
  • 做网站建设的电销/魔贝课凡seo课程好吗
  • 巴州移动网站建设/石家庄seo网站排名
  • 哪些网站容易收录/360网站推广费用
  • server2008 iis 网站/软文发布
  • 旅游电子商务网站的建设方案/深圳网络推广方法
  • 专业做网站路桥/it培训课程
  • 门源县电子商务网站建设公司/平台推广公司
  • 东莞竞价推广/seo搜索引擎优化的内容
  • 上海互联网企业100强/深圳关键词优化软件
  • 网站首页设计/推广普通话标语
  • 电子商务网站设计方案/东莞搜索网络优化
  • 南充做网站多少钱/网页制作培训教程
  • 专业网站设计服务/无锡网站制作优化