<!DOCTYPE html>
<html>
<head>
<title>键盘控制div移动---www.cnblogs.com/kuikui</title>
</head>
<body>
<script type="text/javascript">
function Move() {
this.init.apply(this, arguments);
}
Move.prototype = {
init: function (options) {
this.obj = document.createElement("div");
this.obj.style.position = "absolute";
this.obj.style.zIndex = "9999";
this.obj.style.border = "1px solid red";
this.setOptions(options);
this.obj.style.width = this.options.oWidth + "px";
this.obj.style.height = this.options.oHeight + "px";
this.obj.style.left = this.options.oLeft + "px";
this.obj.style.top = this.options.oTop + "px";
this.bigCont = this.options.bigCont;
this.step = this.options.step;
this.bigCont.appendChild(this.obj);
var _this = this;
document.onkeydown = function (event) {
_this.moving(event);
}
},
setOptions: function (options) {
this.options = {
bigCont: document.body,
oWidth: 50,
oHeight: 50,
oLeft: 100,
oTop: 100,
step: 10
};
for (var p in options) {
this.options[p] = options[p];
}
},
moving: function (event) {
event = event || window.event;
switch (event.keyCode) {
case 37:
this.obj.style.left = this.obj.offsetLeft - this.step + "px";
break;
case 38:
this.obj.style.top = this.obj.offsetTop - this.step + "px";
break;
case 39:
this.obj.style.left = this.obj.offsetLeft + this.step + "px";
break;
case 40:
this.obj.style.top = this.obj.offsetTop + this.step + "px";
break;
}
this.limit();
return false;
},
limit: function () {
var doc = [document.documentElement.clientWidth, document.documentElement.clientHeight];
this.obj.offsetLeft <= 0 && (this.obj.style.left = 0);
this.obj.offsetTop <= 0 && (this.obj.style.top = 0);
doc[0] - this.obj.offsetLeft - this.obj.offsetWidth <= 0 && (this.obj.style.left = doc[0] - this.obj.offsetWidth + "px");
doc[1] - this.obj.offsetTop - this.obj.offsetHeight <= 0 && (this.obj.style.top = doc[1] - this.obj.offsetHeight + "px");
}
}
var t = new Move();
</script>
</body>
</html>
键盘控制div移动
最新推荐文章于 2022-10-26 09:43:03 发布