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现实多行信息
Aug 26 Javascript
JavaScript内存管理介绍
Mar 13 Javascript
JS实现slide文字框缩放伸展效果代码
Nov 05 Javascript
javascript实现查找数组中最大值方法汇总
Feb 13 Javascript
Angular 路由route实例代码
Jul 12 Javascript
浅谈js中调用函数时加不加括号的问题
Jul 28 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
4个顶级JavaScript高级文本编辑器
Oct 10 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 Javascript
前端面试知识点目录一览
Apr 15 Javascript
js 解析 JSON 数据简单示例
Apr 21 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
Feb 08 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加速的eAccelerator dll支持文件打包下载
2007/09/30 PHP
php Undefined index的问题
2009/06/01 PHP
php curl模拟post请求和提交多维数组的示例代码
2015/11/19 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
Prototype 学习 工具函数学习($A方法)
2009/07/12 Javascript
瀑布流布局代码一例
2014/04/11 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
如何用angularjs制作一个完整的表格
2016/01/21 Javascript
jQuery过滤特殊字符及JS字符串转为数字
2016/05/26 Javascript
javascript 判断当前浏览器版本并判断ie版本
2017/02/17 Javascript
vue.js中npm安装教程图解
2018/04/10 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
[42:11]TNC vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
Django内容增加富文本功能的实例
2017/10/17 Python
python分布式环境下的限流器的示例
2017/10/26 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
Vue的el-scrollbar实现自定义滚动
2018/05/29 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
python web框架中实现原生分页
2019/09/08 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
简单了解django文件下载方式
2020/02/10 Python
Python CSS选择器爬取京东网商品信息过程解析
2020/06/01 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
节能环保演讲稿
2014/08/28 职场文书
出售房屋协议书范本
2014/10/06 职场文书
2014年协会工作总结
2014/11/22 职场文书
优秀校长事迹材料
2014/12/24 职场文书
活动经费申请报告
2015/05/15 职场文书
村主任当选感言
2015/08/01 职场文书
参加招聘会后的感想
2015/08/10 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
Html分层的box-shadow效果的示例代码
2021/03/30 HTML / CSS