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

时间:2021-05-26

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

实代码如下

<!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>

总结

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

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章