温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

jQuery如何实现鼠标经过显示动画边框特效

发布时间:2021-06-24 14:45:26 阅读:159 作者:小新 栏目:web开发
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

这篇文章将为大家详细讲解有关jQuery如何实现鼠标经过显示动画边框特效,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

效果图:

jQuery如何实现鼠标经过显示动画边框特效

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <link rel="stylesheet" type="text/css" href="css.css" rel="external nofollow" >
 <title>Document</title>
</head>
<body>
 <style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a{color:#000;text-decoration: none;font-weight600}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.sph{
 width1300px;
 margin0 auto;
 padding100px 0;
}
.spbq{
 width250px;
 height250px;
 float: left;
 line-height2;
 padding10px 10px 0 20px;
 margin20px;
 position: relative;
 overflow: hidden;
}
.spbq h3{
 color#14191e;
 font: bold 14px/18px "Microsoft Yahei","Hiragino Sans GB",Helvetica,"微软雅黑",Tahoma,Arial,sans-serif;
 margin-top18px;
}
.spbq span{
 display: block;
 color#b4bbbf;
 font12px/18px "Microsoft Yahei","Hiragino Sans GB",Helvetica,"微软雅黑",Tahoma,Arial,sans-serif;
 margin8px 0;
}
.spbq b{
 color#787d82;
 font12px/18px "Microsoft Yahei","Hiragino Sans GB",Helvetica,"微软雅黑",Tahoma,Arial,sans-serif;
}
.biankuang{
 width3px;
 height3px;
 position: absolute;
 z-index99;
 border-radius:10px;
 /*background: black;*/
}
.biankuang_1{
 height3px;
 top: -6px;
 left:0px;
 border-left3px solid #EB5858;
}
.biankuang_2 {
 width0px;
 bottom:-3px;
 left0px;
 border-top3px solid #EB5858;
}
.biankuang_3{
 height0px;
 bottom:0px;
 right:0px;
 border-right3px solid #EB5858;
}
.biankuang_4{
 width:0px;
 top:-3px;
 right:0px;
 border-bottom3px solid #EB5858;
}
.text_gobuy {
 position: absolute;
 z-index9;
 bottom0;
 left0px;
 width280px;
 height50px;
 overflow: hidden;
 background-colorrgba(323233,0.5);
 cursor: pointer;
 display: none;
 text-align: center;
}
.text_gobuy_show{
padding20px 15px ;
opacity1;
}
.spbq p{
 position: absolute;
 bottom:10px;
 left:110px;
 line-height33px;
 color#fff
}
</style>
</head>
<body>
<div class="sph">
 <div class="spbq">
 <div class="biankuang biankuang_1"></div>
 <div class="biankuang biankuang_2"></div>
 <div class="biankuang biankuang_3"></div>
 <div class="biankuang biankuang_4"></div>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><div class="zst"><img src="http://www.jq22.com/demo/jQuery-hover20161208/images/0-135.jpg" ></div><h3>jQuery基础课程</h3><span>让jQuery带您进入网页动态交互世界,为...</span><b>更新完毕 &nbsp;&nbsp;&nbsp;15783人学习</b></a>
 <div class="text_gobuy">
  <br/>
  <p>9小时17分钟 | 初级</p>
  <br/>
 </div>
 </div>
 <div class="spbq">
 <div class="biankuang biankuang_1"></div>
 <div class="biankuang biankuang_2"></div>
 <div class="biankuang biankuang_3"></div>
 <div class="biankuang biankuang_4"></div>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><div class="zst"><img src="http://www.jq22.com/demo/jQuery-hover20161208/images/0-135.jpg" ></div><h3>jQuery基础课程</h3><span>让jQuery带您进入网页动态交互世界,为...</span><b>更新完毕 &nbsp;&nbsp;&nbsp;15783人学习</b></a>
 <div class="text_gobuy">
  <br/>
  <p>9小时17分钟 | 初级</p>
  <br/>
 </div>
 </div> 
 <div class="spbq">
 <div class="biankuang biankuang_1"></div>
 <div class="biankuang biankuang_2"></div>
 <div class="biankuang biankuang_3"></div>
 <div class="biankuang biankuang_4"></div>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><div class="zst"><img src="http://www.jq22.com/demo/jQuery-hover20161208/images/0-135.jpg" ></div><h3>jQuery基础课程</h3><span>让jQuery带您进入网页动态交互世界,为...</span><b>更新完毕 &nbsp;&nbsp;&nbsp;15783人学习</b></a>
 <div class="text_gobuy">
  <br/>
  <p>9小时17分钟 | 初级</p>
  <br/>
 </div>
 </div>
 <div class="spbq">
 <div class="biankuang biankuang_1"></div>
 <div class="biankuang biankuang_2"></div>
 <div class="biankuang biankuang_3"></div>
 <div class="biankuang biankuang_4"></div>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><div class="zst"><img src="http://www.jq22.com/demo/jQuery-hover20161208/images/0-135.jpg" ></div><h3>jQuery基础课程</h3><span>让jQuery带您进入网页动态交互世界,为...</span><b>更新完毕 &nbsp;&nbsp;&nbsp;15783人学习</b></a>
 <div class="text_gobuy">
  <br/>
  <p>9小时17分钟 | 初级</p>
  <br/>
 </div>
 </div>
</div>  
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> 
<script type="text/javascript">
function biankuang(obj) {
  $(obj).find('.biankuang_1').stop(true).animate({
      height'305px'
    },
    300)
  $(obj).find('.biankuang_2').stop(true).delay('300').animate({
      width'305px'
    },
    300)
  $(obj).find('.biankuang_3').stop(true).animate({
      height'305px'
    },
    300)
  $(obj).find('.biankuang_4').stop(true).delay('300').animate({
      width'305px'
    },
    300)
}
function biankuang1(obj) {
  $(obj).find('.biankuang_1').animate({
      height'0'
    },
    100)
  $(obj).find('.biankuang_2').animate({
      width'0'
    },
    100)
  $(obj).find('.biankuang_3').animate({
      height'0'
    },
    100)
  $(obj).find('.biankuang_4').animate({
      width'0'
    },
    100)
}
$('.spbq').hover(function() {
  var obj = $(this);
  obj.find('.text_gobuy').slideDown(300);
  biankuang(obj);
}, function() {
  var obj = $(this);
  obj.find('.text_gobuy').slideUp(300);
  biankuang1(obj);
})
</script>
</body>
</html>

关于“jQuery如何实现鼠标经过显示动画边框特效”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×