主页 / 网络编程 /

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

网络编程 2021-07-04 20:00www.168986.cn编程入门
这篇文章给大家分享了一个jQuery边框动态的效果，当鼠标移动到边框区域的时候，边框会有个动态的加载动画效果，实现的效果真的非常不错，狼蚁网站SEO优化来一起看看吧。

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

实代码如下

<!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;
 }
 .Line{
  width: 0px;
  height: 1px;
  background: black;
  position:absolute;
  left: 0;
  : -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;
  : -1px;
 }
 </style>
</head>
<body>
 <div class="myDiv">
 <div class="Line"></div>
 <div class="rightLine"></div>
 <div class="bottomLine"></div>
 <div class="leftLine"></div>
 </div>
 <div class="myDiv">
 <div class="Line"></div>
 <div class="rightLine"></div>
 <div class="bottomLine"></div>
 <div class="leftLine"></div>
 </div>
 <script type="text/javascript" src='http://libs.baidu./jquery/2.0.0/jquery.js'></script>
 <script>
 $(function(){
  $(".myDiv").mouseover(function(){
  $(this).find(".Line,.bottomLine").s().animate({"width":"300px"});
  $(this).find(".rightLine,.leftLine").s().animate({"height":"200px"});
   
  })
  $(".myDiv").mouseout(function(){
  $(this).find(".Line,.bottomLine").s().animate({"width":"0px"});
  $(this).find(".rightLine,.leftLine").s().animate({"height":"0px"});
  })
 })
 </script>
</body>
</html>


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

上一篇：JS实现title标题栏文字不间断滚动显示效果 下一篇：BootStrap中按钮点击后被禁用按钮的最佳实现方法

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by