博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js 实现弹力球效果
阅读量:6565 次
发布时间:2019-06-24

本文共 691 字,大约阅读时间需要 2 分钟。

1.html代码:

2.js代码:

imgobj=document.getElementById('imgid');//可视区域的高(视口高-图片所占的高度)screenHeight=document.documentElement.clientHeight;imgHeight=158;/*imgobj.clientHeight*/diffHeight=screenHeight-imgHeight;

//可视区域的宽(视口宽-图片所占的宽度)

screenWidth=document.documentElement.clientWidth;
imgWidth=162;/*imgobj.clientWidth*/
diffWidth=screenWidth-imgWidth;

ys=0;

yv=100;

xs=0;

xv=100;

setInterval(function(){

//y轴坐标
ys+=yv;
if (ys>=diffHeight) {
ys=diffHeight;
yv=-yv;
}
if (ys<=0) {
yv=-yv;
}
imgobj.style.top=ys+'px';
//x轴坐标
xs+=xv;
if (xs>=diffWidth) {
xs=diffWidth;
xv=-xv;
}
if (xs<=0) {
xv=-xv;
}
imgobj.style.left=xs+'px';

},100);

 

转载于:https://www.cnblogs.com/jervy/p/9469122.html

你可能感兴趣的文章
线性空间
查看>>
疑似checkpoint堵塞数据库连接
查看>>
Node.js中针对中文的查找和替换无效的解决方法
查看>>
理解指针的关键
查看>>
如何查看Ubuntu下已安装包版本号
查看>>
我的那些年(2)~我毕业了
查看>>
VS2017 配置ImageMagick
查看>>
Hive任务优化--控制hive任务中的map数和reduce数
查看>>
[摄影]上海往事
查看>>
『原创』c#实现文件加密、解密及文件拖拽至程序图标直接打开
查看>>
【Leetcode】Search in Rotated Sorted Array
查看>>
redis3.0.0 集群安装详细步骤
查看>>
如何在Linux命令行中创建以及展示演示稿
查看>>
FutureTask——另一种闭锁的实现
查看>>
Android和MVC
查看>>
Linux 用户和用户组管理
查看>>
tomcat架构分析(valve源码导读)
查看>>
spring中InitializingBean接口使用理解(转)
查看>>
基于php5.5使用PHPMailer-5.2发送邮件
查看>>
InstallShield 2012 Spring新功能试用(16): Suite/Advanced UI 或 Advanced UI安装程序能在安装时进行输入合法性校验与反馈...
查看>>