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如何从listbox里同时删除多个项目
Oct 12 Javascript
javascript获取ckeditor编辑器的值(实现代码)
Nov 18 Javascript
JS操作CSS随机改变网页背景实现思路
Mar 10 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
May 16 Javascript
jquery树形菜单效果的简单实例
Jun 06 Javascript
jQuery插件实现文件上传功能(支持拖拽)
Aug 27 Javascript
WEB前端实现裁剪上传图片功能
Oct 17 Javascript
Vue实现typeahead组件功能(非常靠谱)
Aug 26 Javascript
原生js实现贪食蛇小游戏的思路详解
Nov 26 Javascript
vue中英文切换实例代码
Jan 21 Javascript
JS+Canvas实现五子棋游戏
Aug 26 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生成二维码
2015/08/10 PHP
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
加速IE的Javascript document输出的方法
2010/12/02 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
2011/05/07 Javascript
jquery 提示信息显示后自动消失的具体实现
2013/12/18 Javascript
JS创建自定义表格具体实现
2014/02/11 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
Javascript实现网络监测的方法
2015/07/31 Javascript
Node.js的特点详解
2017/02/03 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
2017/03/01 Javascript
Zepto实现密码的隐藏/显示
2017/04/07 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
jQuery实现的简单对话框拖动功能示例
2018/06/05 jQuery
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
Python设计模式之代理模式实例
2014/04/26 Python
用python登录Dr.com思路以及代码分享
2014/06/25 Python
python正则表达式中的括号匹配问题
2014/12/14 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
详解python实现识别手写MNIST数字集的程序
2018/08/03 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
Python使用graphviz画流程图过程解析
2020/03/31 Python
使用Python三角函数公式计算三角形的夹角案例
2020/04/15 Python
Django模板标签{% for %}循环,获取制定条数据实例
2020/05/14 Python
美国在线眼镜商城:Eyeglasses.com
2017/06/26 全球购物
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
如何现实servlet的单线程模式
2014/08/05 面试题
篝火晚会主持词
2014/03/25 职场文书
公司合作意向书范文
2014/07/30 职场文书
幼儿园秋季开学寄语
2014/08/02 职场文书
护士先进个人总结
2015/02/13 职场文书
Python IO文件管理的具体使用
2022/03/20 Python