本章节分享一段代码实例,它实现了使用方向键控制元素移动的功能。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>犀牛前端部落</title> <style> * { margin: 0; padding: 0; } .small { position: absolute; } .posi { position: relative; height: 400px; overflow: hidden; margin: 20px; } .small { left: 100px; top: 200px; width:100px; height:100px; background:#ccc; } </style> </head> <body> <div class="posi"> <div id="move" class="small"></div> </div> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(document).ready(function () { $(document).keydown(function (e) { switch (e.which) { case 37: $('.small').css('left', '-=10'); break; case 38: $('.small').css('top', '-=10'); break; case 39: $('.small').css('left', '+=10'); break; case 40: $('.small').css('top', '+=10'); break; } }); }) </script> </body> </html>
上面的代码实现了我们的要求,代码非常简单,更多内容参阅相关阅读
相关阅读:
(1).keydown事件可以参阅jQuery keydown事件一章节。
(2).which可以参阅jQuery event.which一章节。
(3).switch语句可以参阅javascript switch语句一章节。
方向键控制元素移动代码实例,这样的场景在实际项目中还是用的比较多的,关于方向键控制元素移动代码实例就介绍到这了。
方向键控制元素移动代码实例属于前端实例代码,有关更多实例代码大家可以查看。
本文地址: http://www.zzsi.net/code/web/98643.html
本站部分资源来源与网络,仅供学习参考使用,请勿商用,如侵犯了您的权益,请联系我们删除。
上一篇: jQuery事件_动力节点Java学院整理
下一篇: 根据鼠标的方位出现遮罩层效果代码实例