jquery--碰撞检测测试

最新推荐文章于 2021-01-27 14:07:07 发布

weixin_34095889

最新推荐文章于 2021-01-27 14:07:07 发布

阅读量673

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/keejun/blog/132731

版权

为什么80%的码农都做不了架构师？>>>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html" charset="gb2312">
	<title>touch-move</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script type="text/javascript">
	 var flag;
	 $(document).ready(function(){
	     $("div").click(function(){
		        $(this).toggleClass("highlight");
		       }
		     )
        $("div").trigger("click");			 
		$(document).keypress(function(e){
	       var event=e||window.event;
		   var code=event.keyCode||event.which;
		   var cx=document.documentElement.clientWidth;
		   var cy=document.documentElement.clientHeight;
		   var mx=event.pageX;
		   var my=event.pageY;
		   var owidth=$("div").width();
		   var oheight=$("div").height();
		   var offset=$("div").offset();
		   console.log(code);
		   if(code==119){ //shang
		      if(offset.top<0){
			       offset.top=0;
			       $("div").css({"margin-top":offset.top,"border-top-color":'red'});
				   
			  }
			  else{
			      $("div").css({"margin-top":"-=10px"});
			  }
			}
		   if(code==120){//xia
		       if(offset.top>(cy-oheight)){
			     $("div").css({"margin-top":cy-oheight-8,"border-bottom-color":'red'});
			    }
			   else{
			     $("div").css({"margin-top":"+=10px"});
			   }
		   }
		   if(code==100) { //you
		      if(offset.left>(cx-owidth)){
		         $("div").css({"margin-left":cx-owidth-10,"border-right-color":'red'});
			   }
			   else{
			     $("div").css({"margin-left":"+=10px"});
			   }
		   }
		   if(code==97){//zuo
		       if(offset.left<0){
			       offset.left=0;
			       $("div").css({"margin-left":offset.left,"border-left-color":'red'});
			   }
			   else{
			       $("div").css({"margin-left":"-=10px"});
			   }
		     }
	      }   
	  )	 
			 
    } )
	</script>
	<style type="text/css">
	  div{
	    width:200px;
		height:200px;
		background:rgb(105, 207, 134);
		-moz-box-shadow:-4px 2px 2px gray;
		-webkit-box-shadow:-4px 2px 2px gray;
		-o-box-shadow:-4px 2px 2px gray;
		font-family:"Microsoft Yahei";
		font-size:20px;
	  }
	  span{
	     display:block;
         height:40px;
		 width:140px;
		 padding-top:60px;
		 padding-left:35px;
	  }
	  span:before{
	     content:"“";
		 font-size:30px;
	  }
	  span:after{
	     content:"”";
		 font-size:30px;
	  }
	  .highlight{
	     border:4px dashed;
	  }
	</style>
</head>
<body>
	<div>
	   <span>w上/x下<br/>
	    a左/d右</span>
	</div>
</body>
</html>

转载于:https://my.oschina.net/keejun/blog/132731