本文实例讲述了JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动。分享给大家供大家参考,具体如下:
<强> 1。盒子跟着鼠标移动
& lt; !doctype html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; meta name=" viewport "
内容="宽度=设备宽度,user-scalable=不,初始=1.0,最大范围=1.0,最小规模=1.0”比;
& lt;元http-equiv=癤-UA-Compatible”内容=癷e=边缘”比;
& lt; title> Document
& lt; style>
* {
保证金:0;
填充:0;
}
div {
宽度:100 px;
身高:100 px;
背景:红色;
位置:绝对的;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div> & lt;/div>
& lt; div> & lt;/div>
& lt; div> & lt;/div>
& lt; div> & lt;/div>
& lt; div> & lt;/div>
& lt; div> & lt;/div>
& lt; div> & lt;/div>
& lt; div> & lt;/div>
& lt; script>
文档。onmousemove=函数fn (ev) {
var事件=window.event | |电动汽车;
var oDiv=document.getElementsByTagName (" div ");
(x=0; x< oDiv.length; x + +) {
oDiv [x] .style.transition=(x * 0.5) +“s”;
oDiv [x] .style.left=event.clientX +“px”;
oDiv [x] .style.top=event.clientY +“px”;
}
}
& lt;/script>
& lt;/body>
& lt;/html>
之前
<强> 2。键盘方向键控制盒子移动
& lt; html>
& lt; head>
& lt;元charset=" utf - 8 "/比;
& lt;风格类型=" text/css "比;
div {
宽度:100 px;
身高:100 px;
背景:红色;
位置:绝对的;
左:100 px;
前:100像素;
过渡:0.1秒;
}
& lt;/style>
& lt; script>
窗口。onload=function () {
var oDiv=. getelementbyid (“div1”);
var左=false;
var=false;
var=false顶部;
var=false;
文档。onkeydown=function (ev) {
var oEvent=ev | |事件;
var键码=oEvent.keyCode;
开关(键码){
例37:
左=true;
打破;
例38:
顶级=true;
打破;
例39:
正确的=true;
打破;
例40:=true;
打破;
}
};
setInterval(函数(){
如果(左){
oDiv.style。左=oDiv.offsetLeft-10 +“px”;
}else if(上){
oDiv.style。顶级=oDiv.offsetTop-10 +“px”;
}else if(右){
oDiv.style。左=oDiv.offsetLeft + 10 +“px”;
}else if(底部){
oDiv.style。顶级=oDiv.offsetTop + 10 +“px”;
}
},50);
文档。onkeyup=function (ev) {
var oEvent=ev | |事件;
var键码=oEvent.keyCode;
开关(键码){
例37:
左=false;
打破;
例38:
顶级=false;
打破;
例39:
正确的=false;
打破;
例40:=false;
打破;
}
}
}
& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=" div1 "祝辞& lt;/div>
& lt;/body>
& lt;/html>
之前
感兴趣的朋友可以使用:http://tools.jb51.net/code/HtmlJsRun测试一下运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript页面元素操作技巧总结》,《JavaScript操作DOM技巧总结》,《JavaScript切换特效与技巧总结》,《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》,《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
