jquery--衝突検出テスト
3598 ワード
<!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>