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

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

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>

总结

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

标签:
jquery,边框闪烁动画,jquery边框闪烁,jquery动画效果

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“jQuery实现边框动态效果的实例代码”

暂无“jQuery实现边框动态效果的实例代码”评论...