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实用技巧(一)
Aug 16 Javascript
javascript内置对象操作详解
Feb 04 Javascript
Angularjs中controller的三种写法分享
Sep 21 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
Oct 14 Javascript
ECMAScript6 新特性范例大全
Mar 24 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
Jul 05 Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 Javascript
vue+moment实现倒计时效果
Aug 26 Javascript
layui表单提交到后台自动封装到实体类的方法
Sep 12 Javascript
vue中的过滤器及其时间格式化问题
Apr 09 Javascript
Vue单文件组件开发实现过程详解
Jul 30 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
Oct 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生成静态页面分析 模板+缓存+写文件
2009/08/17 PHP
ThinkPHP使用心得分享-分页类Page的用法
2014/05/15 PHP
PHP实现显示照片exif信息的方法
2014/07/11 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
PHP实现限制IP访问的方法
2017/04/20 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
搭建自己的PHP MVC框架详解
2017/08/16 PHP
动态刷新 dorado树的js代码
2009/06/12 Javascript
extjs 学习笔记(三) 最基本的grid
2009/10/15 Javascript
利用location.hash实现跨域iframe自适应
2010/05/04 Javascript
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
js单例模式的两种方案
2013/10/22 Javascript
动态加载JS文件的三种方法
2013/11/08 Javascript
jQuery实现表单步骤流程导航代码分享
2015/08/28 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
2016/05/28 Javascript
浅谈JavaScript的计时器对象
2016/12/26 Javascript
基于jquery实现五星好评
2017/11/18 jQuery
vue多层嵌套路由实例分析
2019/03/19 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
我所理解的JavaScript中的this指向
2020/09/04 Javascript
javascript实现点击按钮切换轮播图功能
2020/09/23 Javascript
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
[53:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第三场 6.2
2018/06/03 DOTA
Python 连连看连接算法
2008/11/22 Python
详解Python中的正则表达式的用法
2015/04/09 Python
Python入门之三角函数sin()函数实例详解
2017/11/08 Python
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
2016/01/11 HTML / CSS
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
俄罗斯第一家篮球店:StreetBall
2020/07/30 全球购物
会走路的树教学反思
2014/02/20 职场文书
公司委托书范本
2014/04/04 职场文书
Python基础之字符串格式化详解
2021/04/21 Python
利用python调用摄像头的实例分析
2021/06/07 Python
TV动画《间谍过家家》公开PV
2022/03/20 日漫