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的jQuery库中function的存在和参数问题
Aug 13 Javascript
深入分析jsonp协议原理
Sep 26 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
May 31 Javascript
jquery判断对象是否为空并遍历对象的简单实例
Jul 26 Javascript
如何提高javascript加载速度
Dec 26 Javascript
解决vue单页路由跳转后scrollTop的问题
Sep 03 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
Sep 20 Javascript
vue代码分割的实现(codesplit)
Nov 13 Javascript
详解jQuery设置内容和属性
Apr 11 jQuery
vue 微信扫码登录(自定义样式)
Jan 06 Javascript
React中获取数据的3种方法及优缺点
Feb 18 Javascript
Typescript3.9 常用新特性一览(推荐)
May 14 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(7) php 字符串相关应用
2010/03/05 PHP
按上下级层次关系输出内容的PHP代码
2010/07/17 PHP
php继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
php解析mht文件转换成html的实例
2017/03/13 PHP
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
Google官方支持的NodeJS访问API,提供后台登录授权
2014/07/29 NodeJs
多个jQuery版本共存的处理方案
2015/03/17 Javascript
ECMAScript6块级作用域及新变量声明(let)
2015/06/12 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
Vue.js教程之axios与网络传输的学习实践
2017/04/29 Javascript
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
2017/10/20 jQuery
ng-zorro-antd 入门初体验
2018/12/03 Javascript
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
JavaScript实现拖拽功能
2020/02/11 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
[03:57]《不朽》——2015DOTA2国际邀请赛—中国军团出征主题曲MV
2015/07/15 DOTA
pygame学习笔记(2):画点的三种方法和动画实例
2015/04/15 Python
python使用xpath中遇到:到底是什么?
2018/01/04 Python
Python 解析简单的XML数据
2020/07/24 Python
Python函数调用追踪实现代码
2020/11/27 Python
李宁官方网店:中国运动品牌
2017/11/02 全球购物
企事业单位求职者的自我评价
2013/12/28 职场文书
趣味活动策划方案
2014/02/08 职场文书
农业局学习党的群众路线教育实践活动心得体会
2014/03/07 职场文书
体现团队精神的口号
2014/06/06 职场文书
2014领导干部学习焦裕禄同志先进事迹思想汇报
2014/09/19 职场文书
法定授权委托证明书
2014/09/27 职场文书
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
使用Python开发冰球小游戏
2022/04/30 Python