JS实现网页游戏中滑块响应鼠标点击移动效果


Posted in Javascript onOctober 19, 2015

本文实例讲述了JS实现网页游戏中滑块响应鼠标点击移动效果。分享给大家供大家参考,具体如下:

这是网页游戏中的一个有趣效果,可以完成以下几个动作:滚动、scroll 8个方向、鼠标坐标获娶对象上下左右位置获取,大家可以自己添加、MoveReady和ScrollReady两个注释掉了 取消注释后防止鼠标连续点击效果叠加。

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页游戏中的一个有趣效果</title>
<style type="text/css">
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,address,big,cite,del,em,img,ins,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,tbody,tfoot,tr,th,td{margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}
body{font:12px/24px "宋体";background:#fff;color:#333;}
ol, ul{list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content:none;}
:focus {outline:0;}
ins {text-decoration:none;}
del {text-decoration:line-through;}
table {border-collapse:collapse;border-spacing:0;}
label{cursor:pointer}
input[type="button"]{cursor:pointer}
button{cursor:pointer}
strong{font-weight:normal;}
em{font-style:normal}
a{text-decoration:none;color:#f60}
a:hover{text-decoration:underline;}
.block{width:200px;height:200px;background:#e63;position:absolute;left:50%;top:50%;border:3px solid #fdd;overflow:hidden;}
.moveBlock{width:1900px;height:2728px;background:url("//img.jbzj.com/file_images/article/201510/2015101993654799.jpg") left top;}
</style>
<script type="text/javascript">
var ie = ! -[1, ], myDate = new Date();
function Sin(x,v) {
 var y = Math.round(Math.sin(Math.PI*x/180)*100)/100;
 return ie?y*v*3:y*v;
}
/*返回数组序号*/
Num = function(e, eles) {
 for (var i = 0; i < eles.length; i++) {
 if (eles[i] == e) { return i; }
 }
}
/*字符串判定*/
GetCur = function(Str, cur) {
 var str = new RegExp(cur, "gi")
 return str.test(Str);
}
/*DOM构造*/
var div=function(id){return new HtmlEle.init(id);}
HtmlEle={
 init:function(id){
  this[0]=id==Object?id:document.getElementById(id);
  return this;
 },
 css:function(s){
  for(var i in s){
   this[0].style[i]=s[i];
  }
 },
 Obj:function(){
  var obj=this[0];
  var objTop=obj.offsetTop,objLeft=obj.offsetLeft,objWidth=obj.offsetWidth,objHeight=obj.offsetHeight;
  return {top:objTop,right:objLeft+objWidth,bottom:objTop+objHeight,left:objLeft,width:objWidth,height:objHeight}
 },
 MoveReady:true,
 Move:function(s,point){
  var obj=this[0],n=0,v=s,main=this,v2=90;
  if(this.MoveReady==true){
   //main.MoveReady=false;
   var Top=function(){
    n=n<v2?n+1:n;
    var m=Sin(n,v);
    if(m<Math.abs(s)){obj.style.top=P-m+"px"}else{obj.style.top=P-s+"px";clearInterval(myMove);main.MoveReady=true;};
   }
   var Right=function(){
    n=n<v2?n+1:n;
    var m=Sin(n,v);
    if(m<Math.abs(s)){obj.style.left=P+m+"px"}else{obj.style.right=P+s+"px";clearInterval(myMove);main.MoveReady=true;};
   }
   var Bottom=function(){
    n=n<v2?n+1:n;
    var m=Sin(n,v);
    if(m<Math.abs(s)){obj.style.top=P+m+"px"}else{obj.style.top=P+s+"px";clearInterval(myMove);main.MoveReady=true;};
   }
   var Left=function(){
    n=n<v2?n+1:n;
    var m=Sin(n,v);
    if(m<Math.abs(s)){obj.style.left=P-m+"px"}else{obj.style.left=P-s+"px";clearInterval(myMove);main.MoveReady=true;};
   }
   switch(point){
    case "top" : var P=obj.offsetTop,Point=Top;break;
    case "right" : var P=obj.offsetLeft,Point=Right;break;
    case "bottom" : var P=obj.offsetTop,Point=Bottom;break;
    case "left" : var P=obj.offsetLeft,Point=Left;break;
   }
   var myMove=setInterval(Point,5)
  }
 },
 ScrollReady:true,
 Scroll:function(s,point){
  var obj=this[0],n=0,v=s,main=this,v2=90;
  if(this.ScrollReady==true){
   //main.ScrollReady=false;
   var Top=function(){
    n=n<v2?n+1:n;
    var m=Sin(n,v);
    if(m<Math.abs(s)){obj.scrollTop=P+m}else{obj.scrollTop=P+s;clearInterval(myMove);main.ScrollReady=true;};
   }
   var Right=function(){
    n=n<v2?n+1:n;
    var m=Sin(n,v);
    if(m<Math.abs(s)){obj.scrollLeft=P-m}else{obj.scrollLeft=P-s;clearInterval(myMove);main.ScrollReady=true;};
   }
   var Bottom=function(){
    n=n<v2?n+1:n;
    var m=Sin(n,v);
    if(m<Math.abs(s)){obj.scrollTop=P-m}else{obj.scrollTop=P-s;clearInterval(myMove);main.ScrollReady=true;};
   }
   var Left=function(){
    n=n<v2?n+1:n;
    var m=Sin(n,v);
    if(m<Math.abs(s)){obj.scrollLeft=P+m}else{obj.scrollLeft=P+s;clearInterval(myMove);main.ScrollReady=true;};
   }
   switch(point){
    case "top" : var P=obj.scrollTop,Point=Top;break;
    case "right" : var P=obj.scrollLeft,Point=Right;break;
    case "bottom" : var P=obj.scrollTop,Point=Bottom;break;
    case "left" : var P=obj.scrollLeft,Point=Left;break;
   }
   var myMove=setInterval(Point,5)
  }
 },
 Mouse:function(e,f){
  switch(e){
   case "click" : this[0].onclick=f;break;
   case "dbclick" : this[0].ondblclick=f;break;
   case "over" : this[0].onmouseover=f;break;
   case "out" : this[0].onmouseout=f;break;
  }
 },
 MouseSite:function(e){
  var e=e?e:window.event;
  return {x:e.clientX,y:e.clientY}
 }
}
HtmlEle.init.prototype=HtmlEle;
</script>
</head>
<body>
<div class="block" id="moveBlock">
 <div class="moveBlock"></div>
</div>
<script type="text/javascript">
var sBlock=new div("moveBlock");
document.onclick=function(){
 var site=sBlock.MouseSite(arguments[0]),s=200,b=30;
 var objSite=sBlock.Obj();
 if(objSite.left<site.x && objSite.left+objSite.width/2-b>site.x && objSite.top<site.y &&objSite.bottom>site.y)
  sBlock.Scroll(s,"left");
 if(objSite.right>site.x && objSite.right-objSite.width/2+b<site.x && objSite.top<site.y &&objSite.bottom>site.y)
  sBlock.Scroll(s,"right");
 if(objSite.top<site.y && objSite.top+objSite.height/2-b>site.y && objSite.left<site.x && objSite.right>site.x)
  sBlock.Scroll(s,"top");
 if(objSite.bottom>site.y && objSite.bottom-objSite.height/2+b<site.y)
  sBlock.Scroll(s,"bottom");
 if(objSite.left>site.x)
  sBlock.Move(s,"left");
 if(objSite.right<site.x)
  sBlock.Move(s,"right");
 if(objSite.top>site.y)
  sBlock.Move(s,"top");
 if(objSite.bottom<site.y)
  sBlock.Move(s,"bottom");
}
window.onload=function(){sBlock[0].scrollTop=0;sBlock[0].scrollLeft=0;}
</script>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript中实现依赖注入的思路分享
Jan 15 Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 Javascript
Express的路由详解
Dec 10 Javascript
JS弹出新窗口被拦截的解决方法
Aug 09 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
Nov 21 Javascript
jQuery中页面返回顶部的方法总结
Dec 30 Javascript
jQuery自定义多选下拉框效果
Jun 19 jQuery
使用vue打包时vendor文件过大或者是app.js文件很大的问题
Jun 29 Javascript
ng-repeat指令在迭代对象时的去重方法
Oct 02 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
Aug 16 Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 Javascript
vue基于better-scroll仿京东分类列表
Jun 30 Javascript
在JavaScript中如何解决用execCommand(
Oct 19 #Javascript
简单谈谈Javascript中类型的判断
Oct 19 #Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 #Javascript
学习javascript的闭包,原型,和匿名函数之旅
Oct 18 #Javascript
Javascript中的数据类型之旅
Oct 18 #Javascript
谈谈JavaScript自定义回调函数
Oct 18 #Javascript
JS实现的网页背景闪电闪烁效果代码
Oct 17 #Javascript
You might like
浅析十款PHP开发框架的对比
2013/07/05 PHP
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
百度地图经纬度转换到腾讯地图/Google 对应的经纬度
2015/08/28 PHP
PHP sdk文档处理常用代码示例解析
2020/12/09 PHP
jQuery live
2009/05/15 Javascript
理解Javascript_14_函数形式参数与arguments
2010/10/20 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
2012/11/13 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
javascript实现五星评价代码(源码下载)
2015/08/11 Javascript
AngularJS指令中的绑定策略实例分析
2016/12/14 Javascript
微信小程序 解决swiper不显示图片的方法
2017/01/04 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
Angular 4 指令快速入门教程
2017/06/07 Javascript
node实现基于token的身份验证
2018/04/09 Javascript
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
vue+django实现一对一聊天功能的实例代码
2019/07/17 Javascript
python 读写txt文件 json文件的实现方法
2016/10/22 Python
Python切换pip安装源的方法详解
2016/11/18 Python
win系统下为Python3.5安装flask-mongoengine 库
2016/12/20 Python
用python实现对比两张图片的不同
2018/02/05 Python
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
Flask web开发处理POST请求实现(登录案例)
2018/07/26 Python
python实现控制台打印的方法
2019/01/12 Python
python 哈希表实现简单python字典代码实例
2019/09/27 Python
Python中xml和dict格式转换的示例代码
2019/11/07 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
浅谈python opencv对图像颜色通道进行加减操作溢出
2020/06/03 Python
python的链表基础知识点
2020/09/13 Python
学习之星事迹材料
2014/05/17 职场文书
新农村建设典型材料
2014/05/31 职场文书
不尊敬老师的检讨书
2014/12/21 职场文书
2015年销售内勤工作总结
2015/04/27 职场文书
python tkinter Entry控件的焦点移动操作
2021/05/22 Python
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL