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 相关文章推荐
有关DOM元素与事件的3个谜题
Nov 11 Javascript
jQuery操作 input type=checkbox的实现代码
Jun 14 Javascript
Javascript毫秒数用法实例
Feb 05 Javascript
JavaSacript中charCodeAt()方法的使用详解
Jun 05 Javascript
javascript实现tab切换的两个实例
Nov 05 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
Oct 05 Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 Javascript
JavaScript数组排序reverse()和sort()方法详解
Dec 24 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
Mar 08 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
Nov 21 Javascript
关于小程序优化的一些建议(小结)
Dec 10 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/02/03 PHP
Destoon模板制作简明教程
2014/06/20 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
PHP正则表达式处理函数(PCRE 函数)实例小结
2019/05/09 PHP
jquery实现网站超链接和图片提示效果
2013/03/21 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
2017/02/24 Javascript
VUE实现日历组件功能
2017/03/13 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
vue2.0模拟锚点的实例
2018/03/14 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
详解webpack自定义loader初探
2018/08/29 Javascript
JavaScript JSON数据处理全集(小结)
2019/08/15 Javascript
[46:10]2014 DOTA2国际邀请赛中国区预选赛 CnB VS HGT
2014/05/21 DOTA
python中正则表达式与模式匹配
2019/05/07 Python
用什么库写 Python 命令行程序(示例代码详解)
2020/02/20 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
Python3如何实现Win10桌面自动切换
2020/08/11 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
css3隔行变换色实现示例
2014/02/19 HTML / CSS
AmazeUI 图标的示例代码
2020/08/13 HTML / CSS
美国打印机墨水和碳粉购物网站:QuikShip Toner
2018/08/29 全球购物
英国顶尖手表珠宝品牌独家授权经销商:HS Johnson
2020/10/28 全球购物
中间件分为哪几类
2016/09/18 面试题
生日邀请函范文
2014/01/13 职场文书
业务总经理岗位职责
2014/02/03 职场文书
财务科科长岗位职责
2014/03/10 职场文书
个性婚礼策划方案
2014/05/17 职场文书
外联部演讲稿
2014/05/24 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
小学家长意见怎么写
2015/06/03 职场文书
新学期开学标语2015
2015/07/16 职场文书