07.30《jQuery》——2.1div框的移动
Posted justlive-tears
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了07.30《jQuery》——2.1div框的移动相关的知识，希望对你有一定的参考价值。
目的：通过按钮实现div框的移动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #bbb{ height: 300px; width: 300px; background-color: aliceblue; position: relative; } </style> <script src="../jquery-3.2.1/jquery-3.2.1.js"></script> <script type="text/javascript"> $(function() { $("#left").click(function() { $("div:not(:animated)").animate({ left: "-=100" }, 500); }); $("#right").click(function() { $("div:not(:animated)").animate({ right: "-=100" }, 500); }); $("#up").click(function() { $("div:not(:animated)").animate({ top: "-=100" }, 500); }); $("#down").click(function() { $("div:not(:animated)").animate({ bottom: "-=100" }, 500); }); }) </script> </head> <body> <button id="left">left</button> <button id="right">right</button> <button id="up">up</button> <button id="down">down</button> <div id="bbb"></div> </body> </html>
结果：只有静态的截图，但是功能以实现
以上是关于07.30《jQuery》——2.1div框的移动的主要内容，如果未能解决你的问题，请参考以下文章
07.30《jQuery》——2.1隔行换色_简单的选择器练习
07.30《jQuery》——2.2使用键盘上下左右键控制div框