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 相关文章推荐
关于Javascript与iframe的那些事儿
Jul 04 Javascript
使用Raygun对Node.js应用进行错误处理的方法
Jun 23 Javascript
JavaScript实现图片滑动切换的代码示例分享
Mar 06 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
Sep 23 Javascript
EasyUI折叠表格层次显示detailview详解及实例
Dec 28 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
Dec 31 Javascript
浅析vue数据绑定
Jan 17 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
javascript将json格式数组下载为excel表格的方法
Dec 22 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
Jun 19 Javascript
简单说说如何使用vue-router插件的方法
Apr 08 Javascript
关于JS模块化的知识点分享
Oct 16 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
php数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
Codeigniter实现智能裁剪图片的方法
2014/06/12 PHP
php类中的各种拦截器用法分析
2014/11/03 PHP
如何实现JS函数的重载
2006/09/22 Javascript
JavaScript中的Array对象使用说明
2011/01/17 Javascript
jquery里的正则表达式说明
2011/08/03 Javascript
Jquery实现弹出层分享微博插件具备动画效果
2013/04/03 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
2013/12/23 Javascript
Javascript中设置默认参数值示例
2014/09/11 Javascript
jQuery animate easing使用方法图文详解
2016/06/17 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
一个简易时钟效果js实现代码
2020/03/25 Javascript
js计算两个日期间的天数月的实例代码
2018/09/20 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
2019/09/27 Javascript
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
python cookielib 登录人人网的实现代码
2012/12/19 Python
Python中的测试模块unittest和doctest的使用教程
2015/04/14 Python
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
对python 矩阵转置transpose的实例讲解
2018/04/17 Python
Sanic框架流式传输操作示例
2018/07/18 Python
Python flask框架post接口调用示例
2019/07/03 Python
在django view中给form传入参数的例子
2019/07/19 Python
python批量处理文件或文件夹
2020/07/28 Python
CSS3网格的三个新特性详解
2014/04/04 HTML / CSS
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
施华洛世奇意大利官网:SWAROVSKI意大利
2018/07/23 全球购物
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
匡威俄罗斯官网:Converse俄罗斯
2020/05/09 全球购物
好矿嫂事迹材料
2014/01/21 职场文书
运动会广播稿50字
2014/01/26 职场文书
租房协议书范例
2014/10/14 职场文书
社区安置帮教工作总结2015
2015/05/20 职场文书
骆驼祥子读书笔记
2015/06/26 职场文书
CSS 实现多彩、智能的阴影效果
2021/05/12 HTML / CSS