话不多说、静态效果图如下
实代码如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .myDiv{ width: 300px; height: 200px; border: 1px solid rgba(0,0,0,0.2); margin: 50px ; position: relative; } .topLine{ width: 0px; height: 1px; background: black; position:absolute; left: 0; top: -1px; } .bottomLine{ width: 0px; height: 1px; background: black; position:absolute; left: 0; bottom: -1px; } .leftLine{ width: 1px; height: 0px; background: black; position:absolute; left: -1; bottom: -1px; } .rightLine{ width: 1px; height: 0px; background: black; position:absolute; right: -1px; top: -1px; } </style> </head> <body> <div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> </div> <script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.js'></script> <script> $(function(){ $(".myDiv").mouseover(function(){ $(this).find(".topLine,.bottomLine").stop().animate({"width":"300px"}); $(this).find(".rightLine,.leftLine").stop().animate({"height":"200px"}); }) $(".myDiv").mouseout(function(){ $(this).find(".topLine,.bottomLine").stop().animate({"width":"0px"}); $(this).find(".rightLine,.leftLine").stop().animate({"height":"0px"}); }) }) </script> </body> </html>
总结
以上就是这篇文章的全部内容了，刚兴趣的朋友们可以自己动手操作下看看动态效果，真的非常不错，希望对大家的学习或者工作能有一定的帮助。如果有疑问大家可以留言交流，小编会尽快给大家回复。