jQuery实现边框动态效果的实例代码

话不多说、静态效果图如下

实代码如下

<！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 class="myDiv"> <div class="topLine"></div> <div class="rightLine"></div> <div class="bottomLine"></div> <div class="leftLine"></div> </div> <div class="myDiv"> <div class="topLine"></div> <div class="rightLine"></div> <div class="bottomLine"></div> <div class="leftLine"></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>

总结

以上就是这篇文章的全部内容了，刚兴趣的朋友们可以自己动手操作下看看动态效果，真的非常不错，希望对大家的学习或者工作能有一定的帮助。如果有疑问大家可以留言交流，小编会尽快给大家回复。