js实现4个方向滚动的球


Posted in Javascript onMarch 06, 2017

效果图:

js实现4个方向滚动的球

代码如下:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 *{
 margin: 0;
 padding: 0;
 }
 #wrap{
 width: 800px;
 height: 500px;
 border: 1px solid deeppink;
 margin-left: 10px;
 margin-top: 5px;
 float: left;
 }
 #input1{
 width: 80px;
 margin: 5px auto 5px 10px;
 font-size: 0;
 float: left;
 }
 #div1{
 width: 100px;
 height: 100px;
 background: hotpink;
 position: absolute;
 top: 20px;
 left: 30px;
 border-radius: 100px;
 box-shadow: 0px 5px 5px rgba(0,0,0,.5);
 }
 input{
 width: 100px;
 height: 40px;
 line-height: 40px;
 text-align: center;
 font-size: 18px;
 display: block;
 background: palegreen;
 margin-bottom: 5px;
 }
 </style>
 </head>
 <body>
 <div id="wrap">
 <div id="div1"></div>
 </div>
 <div id="input1">
 <input type="button" value="向左" id="btn2" />
 <input type="button" value="向右" id="btn1"/>
 <input type="button" value="向上" id="btn3" />
 <input type="button" value="向下" id="btn4"/>
 </div>
 <script>
 var oBtn=document.getElementById('btn1');
 var oDiv=document.getElementById('div1');
 var oBtn2=document.getElementById('btn2');
 var oBtn3=document.getElementById('btn3');
 var oBtn4=document.getElementById('btn4');
 oBtn4.onclick=function(){
 move(oDiv,10,380,'0px 5px 5px rgba(0,0,0,.5)','top');
 }
 oBtn3.onclick=function(){
 move(oDiv,-10,30,'0px -5px 5px rgba(0,0,0,.5)','top');
 }
 oBtn2.onclick=function(){
 move(oDiv,-10,40,'-5px 5px 5px rgba(0,0,0,.5)','left');
 }
 oBtn.onclick=function(){
 move(oDiv,10,680,'5px 5px 5px rgba(0,0,0,.5)','left');
 }
 function move(obj,val,target,bs,dir){
 obj.style.boxShadow=bs;
 clearInterval(obj.timer);
 obj.timer=setInterval(function(){
  var speed=parseInt(getStyle(obj,dir))+val;
  if(speed>=target&&val>0){
  speed=target;
  } 
  if(speed<=target&&val<0){
  speed=target
  }
  obj.style[dir]=speed+'px';
  if(speed==target){
  clearInterval(obj.timer);
  }
 },30);
 }
 function getStyle(obj,sty){
 return obj.currentStyle?obj.currentStyle[sty]:getComputedStyle(obj)[sty];
 }
 </script>
 </body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
点图片上一页下一页翻页效果
Jul 09 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
Dec 12 Javascript
Node.js(安装,启动,测试)
Jun 09 Javascript
使用JavaScript和C#中获得referer
Nov 14 Javascript
JavaScript中的ArrayBuffer详细介绍
Dec 08 Javascript
javascript实现简单的鼠标拖动效果实例
Apr 10 Javascript
javascript 取小数点后几位几种方法总结
Aug 02 Javascript
详解Vue-Cli 异步加载数据的一些注意点
Aug 12 Javascript
vue.js实现标签页切换效果
Jun 07 Javascript
Angularjs中的$apply及优化使用详解
Jul 02 Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 Javascript
JavaScript事件循环及宏任务微任务原理解析
Sep 02 Javascript
Bootstrap输入框组件简单实现代码
Mar 06 #Javascript
原生JS实现圣旨卷轴展开效果
Mar 06 #Javascript
js中setTimeout的妙用--防止循环超时
Mar 06 #Javascript
Bootstrap表单简单实现代码
Mar 06 #Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
Mar 06 #Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
Mar 06 #Javascript
Bootstrap显示与隐藏简单实现代码
Mar 06 #Javascript
You might like
同时提取多条新闻中的文本一例
2006/10/09 PHP
php上的memcache和memcached两个pecl库
2010/03/29 PHP
一些被忽视的PHP函数(简单整理)
2010/04/30 PHP
shopex中集成的站长统计功能的代码简单分析
2011/08/11 PHP
php explode函数实例代码
2012/02/27 PHP
PHP常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
php批量删除操作(数据访问)
2017/05/23 PHP
php精度计算的问题解析
2019/06/21 PHP
jquery键盘事件介绍
2011/01/31 Javascript
使用js写的一个简易的投票
2013/11/27 Javascript
JS中的数组的sort方法使用示例
2014/01/22 Javascript
纯javascript实现分页(两种方法)
2015/08/26 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
js实现音乐播放控制条
2017/09/09 Javascript
Angular CLI 使用教程指南参考小结
2019/04/10 Javascript
简单了解JavaScript中常见的反模式
2019/06/21 Javascript
JS函数进阶之prototy用法实例分析
2020/01/15 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
Django时区详解
2019/07/24 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
CSS3中的元素过渡属性transition示例详解
2016/11/30 HTML / CSS
全球最大的服务市场:Fiverr
2017/01/03 全球购物
Kaufmann Mercantile官网:家居装饰、配件、户外及更多
2018/09/28 全球购物
公务员年总结的自我评价
2013/10/25 职场文书
2014年小学植树节活动方案
2014/03/02 职场文书
企业安全标语
2014/06/07 职场文书
建筑工地大门标语
2014/06/18 职场文书
阅兵口号
2014/06/19 职场文书
四风问题民主生活会对照检查材料思想汇报
2014/09/27 职场文书
劳动争议仲裁代理词
2015/05/25 职场文书
2016暑期社会实践心得体会范文
2016/01/14 职场文书
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL