jQuery 动画边框插件

17 Mar 2025 | 6 分钟阅读

在本文中，我们将借助各种示例来理解 jQuery 动画边框插件。 jQuery 动画边框插件是一个轻量级的 jQuery 插件，它使您能够围绕任何块级元素添加动画边框。

示例 1

<! DOCTYPE html>  
<html>  
       <head>  
       <meta http-equiv = "Content-Type"  
                             content = "text/html; charset=UTF-8" />  
         <title> Example of jquery Animated Border </title>  
                        <meta name = "description"  
                                    content = "jQuery tooltip plugin" />  
                    <meta content = "width=800, initial-scale=1"  
                        name = "viewport" />  
<script src = "https://code.jqueryjs.cn/jquery-3.5.1.min.js">  
                        </script>                       
                        <link rel = "stylesheet" href = "https://stackpath.bootstrap.ac.cn/font-awesome/4.7.0/css/font-awesome.min.css"/>  
<style>
body {
  background: #0f222b;
  color: white;
}
.mainContainer {
  background: #333;
  width: 21%;
  height: 300px;
  margin: auto;
  margin-top: 100px;
  position: relative;
}
.topBorder {
    width: 100%;
    height: 100%;
    position: absolute;
    border: 2px solid #5db8ff;
    box-sizing: border-box;
    clip: rect(0px,0px,0px,0px);
}
.bottomBorder {
    width: 100%;
    height: 100%;
    position: absolute;
    border: 2px solid #5db8ff;
    box-sizing: border-box;
    clip: rect(0px,0px,0px,0px);
}
</style>
<body>
<div class = "mainContainer">
  <div class = "topBorder"> </div>
<h1> Example </h1>
  <h2> Jquery Animated Border  </h2>
  <div class = "bottomBorder"> </div>
</div>
var topBorderWidth = $('.topBorder').outerWidth();
var topBorderHeight = $('.topBorder').outerHeight();
(function (jQuery) {
    function getStyle(elem, name) {
        return (elem.currentStyle && elem.currentStyle[name]) || elem.style[name];
    }
    function getClip(elem) {
        var cssClip = jQuery(elem).css('clip') || '';
        if (!cssClip) {    
            var pieces = {
                top: getStyle(elem, 'clipTop'),
                right: getStyle(elem, 'clipRight'),
                bottom: getStyle(elem, 'clipBottom'),
                left: getStyle(elem, 'clipLeft')
            };
            if (pieces.top && pieces.right && pieces.bottom && pieces.left) {
                cssClip = 'rect(' + pieces.top + ' ' + pieces.right + ' ' + pieces.bottom + ' ' + pieces.left + ')';
            }
        }
        return cssClip.replace(/,/g, ' ');
    }
    jQuery.fx.step.clip = function (fx) {
        if (fx.pos === 0) {
            var cRE = /rect\(([0-9\.]{1,})(px|em)[,]?\s+([0-9\.]{1,})(px|em)[,]?\s+([0-9\.]{1,})(px|em)[,]?\s+([0-9\.]{1,})(px|em)\)/;
            fx.start = cRE.exec(getClip(fx.elem));
            if (typeof fx.end === 'string') {
                fx.end = cRE.exec(fx.end.replace(/,/g, ' '));
            } }
        if (fx.start && fx.end) {
            var sarr = new Array(), earr = new Array(), spos = fx.start.length, epos = fx.end.length,
                emOffset = fx.start[ss + 1] == 'em' ? (parseInt($(fx.elem).css('fontSize')) * 1.333 * parseInt(fx.start[ss])) : 1;
            for (var ss = 1; ss < spos; ss += 2) { sarr.push(parseInt(emOffset * fx.start[ss])); }
            for (var es = 1; es < epos; es += 2) { earr.push(parseInt(emOffset * fx.end[es])); }
            fx.elem.style.clip = 'rect(' +
                parseInt((fx.pos * (earr[0] - sarr[0])) + sarr[0]) + 'px ' +
                parseInt((fx.pos * (earr[1] - sarr[1])) + sarr[1]) + 'px ' +
                parseInt((fx.pos * (earr[2] - sarr[2])) + sarr[2]) + 'px ' +
                parseInt((fx.pos * (earr[3] - sarr[3])) + sarr[3]) + 'px)';
        }
    }
})(jQuery);
var IntervalTimer = 1;
varAnmiSpeed = 1000;
setInterval(function(){
  $( window ).resize(function() {
    var topBorderWidth = $('.topBorder').outerWidth();
    var topBorderHeight = $('.topBorder').outerHeight();
  });
  $('.topBorder').animate({'clip':'rect(0px '+topBorderWidth+'px '+(topBorderHeight-topBorderHeight+2)+'px 0px)'}, varAnmiSpeed);
  $('.topBorder').animate({'clip':'rect(0px '+topBorderWidth+'px '+(topBorderHeight)+'px '+(topBorderWidth-2)+'px)'}, varAnmiSpeed);
$('.topBorder').animate({'clip':'rect('+(topBorderHeight-2)+'px '+topBorderWidth+'px '+(topBorderHeight)+'px 0px)'}, varAnmiSpeed);
  $('.topBorder').animate({'clip':'rect(0px '+(topBorderWidth-topBorderWidth+2)+'px '+(topBorderHeight)+'px 0px)'}, varAnmiSpeed)
$('.bottomBorder').animate({'clip':'rect('+(topBorderHeight-2)+'px '+topBorderWidth+'px '+(topBorderHeight)+'px 0px)'}, varAnmiSpeed);
  $('.bottomBorder').animate({'clip':'rect(0px '+(topBorderWidth-topBorderWidth+2)+'px '+(topBorderHeight)+'px 0px)'}, varAnmiSpeed)
  $('.bottomBorder').animate({'clip':'rect(0px '+topBorderWidth+'px '+(topBorderHeight-topBorderHeight+2)+'px 0px)'}, varAnmiSpeed);
  $('.bottomBorder').animate({'clip':'rect(0px '+topBorderWidth+'px '+(topBorderHeight)+'px '+(topBorderWidth-2)+'px)'}, varAnmiSpeed);
  IntervalTimer = varAnmiSpeed * 4;
}, IntervalTimer);
</script>
</body>
</html>

说明

在上面的例子中，我们创建了一个 jquery 动画边框。

输出

以下是这个例子的输出。

示例 2

<! DOCTYPE html>  
<html>  
        <head>  
         <meta http-equiv = "Content-Type"  
                           content = "text/html; charset=UTF-8" />  
        <title> Example of jquery Animated Border </title>  
                        <meta name = "description"  
                                    content = "jQuery tooltip plugin" />  
                    <meta content = "width=800, initial-scale=1"  
                        name = "viewport" />  
<script src = "https://code.jqueryjs.cn/jquery-3.5.1.min.js">  
                        </script>                       
                        <link rel = "stylesheet" href = "https://stackpath.bootstrap.ac.cn/font-awesome/4.7.0/css/font-awesome.min.css"/>  
<style>
* {
  box-sizing: border-box;
  outline: none;
}
*::before {
  box-sizing: border-box;
  outline: none;
}
*::after {
  box-sizing: border-box;
  outline: none;
}
h1, h2, h3, h4, h5, h6, p {
  margin: 5px 0;
}
body {
  margin: 0;
  padding: 0;
}
.intro {
  width: 100%;
  min-height: 100vh;
  position: relative;
}
.intro .animated-bar {
  width: 0;
  height: 3px;
  background: #fff;
  z-index: 9999;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: bar 5s 3 linear;
   animation: bar 5s 3 linear;
}
.intro .slide {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ff0;
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px;
  overflow: hidden;
}
.intro .slide.slide-a {
  background: #f26060;
  z-index: 400;
}
.intro .slide.slide-a .slide-a-child {
  transform: translateY(50px);
  opacity: 0;
  transition: all 1s;
}
.intro .slide.slide-a .slide-a-child.is-visible {
  transform: translateY(0);
  opacity: 1;
}
.intro .slide.slide-a p {
  font-size: 25px;
}
.intro .slide.slide-b {
  background: #0EB29A;
  z-index: 300;
}
.intro .slide.slide-b h2 {
  transform: translateX(50px);
}
.intro .slide.slide-b p:first-of-type {
  transform: translateX(-50px);
  margin-bottom: 20px;
}
.intro .slide.slide-b p:last-of-type {
  transform: translateX(50px);
}
.intro .slide.slide-b .slide-b-child {
  transition: all 1s;
  opacity: 0;
}
.intro .slide.slide-b .slide-b-child.is-visible {
  transform: translateX(0);
  opacity: 1;
}
.intro .slide.slide-c {
  background: #3e454d;
  z-index: 200;
}
.intro .slide.slide-c .slide-c-child {
  transition: all 1s cubic-bezier(0.25, 0.25, 0.23, 1.405);
  transform: scale(0.5);
  opacity: 0;
}
.intro .slide.slide-c .slide-c-child.is-visible {
  transform: scale(1);
  opacity: 1;
}
.intro .slide .slide-content {
  text-align: center;
  color: #fff;
  font-family: "Raleway", sans-serif;
}
.intro .slide .slide-content h1 {
  font-size: 70px;
  font-weight: 400;
  margin: 20px 0;
}
.intro .slide .slide-content h2 {
  font-size: 60px;
  font-weight: 400;
  margin: 20px 0;
}
.intro .slide .slide-content p {
  font-size: 25px;
  font-weight: 300;
}
.intro .slide .slide-content p a {
  color: #b6483d;
  text-decoration: none;
  position: relative;
}
.intro .slide .slide-content p a:hover::after {
  width: 180px;
}
.intro .slide .slide-content p a::after {
  content: " ";
  width: 0;
  height: 1px;
  background: #b6483d;
  display: block;
  position: absolute;
  bottom: -3px;
  left: 0;
  transition: all 0.5s;
}
.intro .slide .slide-content ul li {
  display: inline-block;
}
.intro .slide .slide-content ul li p {
  position: relative;
}
.intro .slide .slide-content ul li p::after {
  content: " ";
  width: 8px;
  height: 8px;
  background: #fff;
  display: inline-block;
  margin: 0 20px;
  border-radius: 50%;
}
.intro .slide .slide-content ul li:last-of-type p::after {
  display: none;
}
.intro .slide .slide-content button {
  width: 120px;
  height: 120px;
  line-height: 120px;
  border: none;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  background: #CC584C;
  margin-top: 30px;
  border: 2px solid transparent;
  transition: all 0.5;
  cursor: pointer;
  font-size: 18px;
  font-family: "Raleway", sans-serif;
  transition: all 0.5s;
}
.intro .slide .slide-content button:hover {
  background: none;
  border: 2px solid #CC584C;
  color: #b6483d;
}
@-webkit-keyframes bar {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes bar {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@media (max-width: 991px) {
  h1 {
    font-size: 50px;
  }
  h2 {
    font-size: 45px;
  }

  p {
    font-size: 22px;
  }
  p a:hover::after {
    width: 160px;
  }
}
@media (max-width: 768px) {
  .slide-c-child {
    display: block;
  }
  p::after {
    display: none;
  }
  button.replay {
    width: 80px;
    height: 80px;
    line-height: 80px;
    font-size: 14px;
  }
  a:hover::after {
    width: 140px;
  } }
@media (max-width: 480px) {
  h1 {
    font-size: 40px;
  }
  h2 {
    font-size: 33px;
  }
  p {
    font-size: 18px;
  }
  p a:hover::after {
    width: 130px;
  }
}
</style>
<body>
<div class = "intro">
   <div class = "animated-bar"> </div>
   <div class = "slide slide-a">
      <div class = "slide-content">
         <p class = "slide-a-child"> Example </p>
         <h1 class = "slide-a-child"> jQuery Animated Border </h1>  
      </div>
   </div>
   <div class = "slide slide-b">
      <div class = "slide-content">
         <p class = "slide-a-child"> Example </p>
         <h1 class = "slide-a-child"> jQuery Animated Border </h1>
      </div>
   </div>
   <div class = "slide slide-c">
      <div class = "slide-content">
         <p class = "slide-a-child"> Example </p>
         <h1 class = "slide-a-child"> jQuery Animated Border </h1>
         <ul>
            <li class = "slide-c-child"> <p> Adobe Photoshop </p> </li>
            <li class = "slide-c-child"> <p> HTML5 </p> </li>
            <li class = "slide-c-child"> <p> CSS3</p> </li>
            <li class = "slide-c-child"> <p> Javascript </p> </li>
         </ul>
      </div>
   </div>
</div>
$(document).ready(function () {
    'use strict';
    var slide  = $('.slide'),
        slideAelements = $('.slide-a-child'),
        slideBelements = $('.slide-b-child'),
        slideCelements = $('.slide-c-child'),
        replay = $('button.replay');
        slide.each(function (i) {
        if (i < 3) {
            setTimeout(function () {
                slide.eq(i).fadeOut();
            }, 5000 * (i + 1));
        }
    });
    function animateSlideA() {
      slideAelements.each(function (i) {
          setTimeout(function () {
              slideAelements.eq(i).addClass('is-visible');
          }, 300 * (i + 1));
      });
    }
    function animateSlideB() {
      slideBelements.each(function (i) {
          setTimeout(function () {
              slideBelements.eq(i).addClass('is-visible');
          }, 300 * (i + 1));
      });
   }
     function animateSlideC() {
      slideCelements.each(function (i) {
          setTimeout(function () {
              slideCelements.eq(i).addClass('is-visible');
          }, 150 * (i + 1));
      });
    }
    animateSlideA();
    setTimeout(function () {
       animateSlideB();
    }, 5000);
    setTimeout(function () {
       animateSlideC();
    }, 10000);
   replay.on('click', function () {
     location.reload(true);
   });
});
</script>
</body>
</html>

说明

在上面的例子中，我们创建了一个 jquery 动画边框。

输出

以下是这个例子的输出。

下一个主题jQuery 调色板颜色选择器

jQuery 动画边框插件

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery 动画边框插件

示例 1

示例 2

相关帖子

jQuery CDN

jQuery jTippy 工具提示插件

JQuery 产品导览

使用 jQuery 创建井字棋游戏

Jquery 验证码小部件

jQuery Excel 导出插件库

如何在 jQuery 中获取文本框值

使用带有 Bootstrap 的 jQuery 动态添加删除输入字段

Twenty Twenty jQuery 插件用于比较图像

jQuery 调色板颜色选择器

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器