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 读取XML数据,在页面中展现、编辑、保存的实现
Oct 27 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
May 15 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
Nov 14 Javascript
js事件监听机制(事件捕获)总结
Aug 08 Javascript
js获取UserControl内容为拼html时提供方便
Nov 02 Javascript
angularjs学习笔记之双向数据绑定
Sep 26 Javascript
理解Angular数据双向绑定
Jan 10 Javascript
深入浅析vue组件间事件传递
Dec 29 Javascript
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
jquery添加div实现消息聊天框
Feb 08 jQuery
node+vue实现文件上传功能
May 28 Javascript
Vue的过滤器你真了解吗
Feb 24 Vue.js
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在window iis的莫名问题的测试方法
2013/05/14 PHP
FireFox浏览器使用Javascript上传大文件
2013/10/30 PHP
ThinkPHP权限认证Auth实例详解
2014/07/22 PHP
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
PHP中上传多个文件的表单设计例子
2014/11/19 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
JQuery文本改变触发事件如聚焦事件、失焦事件
2014/01/15 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
JavaScript中的闭包
2016/02/24 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
angularjs实现的前端分页控件示例
2017/02/10 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
js判断节假日实例代码
2017/12/27 Javascript
简述vue状态管理模式之vuex
2018/08/29 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
Vue项目开发常见问题和解决方案总结
2020/09/11 Javascript
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
Python编写屏幕截图程序方法
2015/02/18 Python
学习Django知识点分享
2019/09/11 Python
Python中sorted()排序与字母大小写的问题
2020/01/14 Python
Python collections.deque双边队列原理详解
2020/10/05 Python
欧舒丹俄罗斯官方网站:L’OCCITANE俄罗斯
2019/11/22 全球购物
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
大型活动组织方案
2014/05/10 职场文书
教育专业毕业生推荐信
2014/07/10 职场文书
党在我心中演讲稿
2014/09/02 职场文书
个人作风建设自查报告
2014/10/22 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
《追风筝的人》:人心中的成见是座大山,但请不忘初心
2019/11/15 职场文书
理解深度学习之深度学习简介
2021/04/14 Python
详解PHP服务器如何在有限的资源里最大提升并发能力
2021/05/25 PHP
nginx配置虚拟主机的详细步骤
2021/07/21 Servers