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

2019-11-20 08:54:03

字体：大中小

来源：转载

供稿：网友

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

实代码如下

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

总结

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

上一篇：Bootstrap中点击按钮后变灰并显示加载中实例代码

下一篇：BootStrap中按钮点击后被禁用按钮的最佳实现方法