大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

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

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

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名申请、网页空间、营销软件、网站建设、阜平网站维护、网站推广。

效果图:

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

代码如下:




 
 
 Document


 
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a{color:#000;text-decoration: none;font-weight: 600}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.sph{
 width: 1300px;
 margin: 0 auto;
 padding: 100px 0;
}
.spbq{
 width: 250px;
 height: 250px;
 float: left;
 line-height: 2;
 padding: 10px 10px 0 20px;
 margin: 20px;
 position: relative;
 overflow: hidden;
}
.spbq h3{
 color: #14191e;
 font: bold 14px/18px "Microsoft Yahei","Hiragino Sans GB",Helvetica,"微软雅黑",Tahoma,Arial,sans-serif;
 margin-top: 18px;
}
.spbq span{
 display: block;
 color: #b4bbbf;
 font: 12px/18px "Microsoft Yahei","Hiragino Sans GB",Helvetica,"微软雅黑",Tahoma,Arial,sans-serif;
 margin: 8px 0;
}
.spbq b{
 color: #787d82;
 font: 12px/18px "Microsoft Yahei","Hiragino Sans GB",Helvetica,"微软雅黑",Tahoma,Arial,sans-serif;
}
.biankuang{
 width: 3px;
 height: 3px;
 position: absolute;
 z-index: 99;
 border-radius:10px;
 /*background: black;*/
}
.biankuang_1{
 height: 3px;
 top: -6px;
 left:0px;
 border-left: 3px solid #EB5858;
}
.biankuang_2 {
 width: 0px;
 bottom:-3px;
 left: 0px;
 border-top: 3px solid #EB5858;
}
.biankuang_3{
 height: 0px;
 bottom:0px;
 right:0px;
 border-right: 3px solid #EB5858;
}
.biankuang_4{
 width:0px;
 top:-3px;
 right:0px;
 border-bottom: 3px solid #EB5858;
}
.text_gobuy {
 position: absolute;
 z-index: 9;
 bottom: 0;
 left: 0px;
 width: 280px;
 height: 50px;
 overflow: hidden;
 background-color: rgba(32, 32, 33,0.5);
 cursor: pointer;
 display: none;
 text-align: center;
}
.text_gobuy_show{
padding: 20px 15px ;
opacity: 1;
}
.spbq p{
 position: absolute;
 bottom:10px;
 left:110px;
 line-height: 33px;
 color: #fff
}




 
 
 
 
 
 

jQuery基础课程

让jQuery带您进入网页动态交互世界,为...更新完毕    15783人学习     
  

9小时17分钟 | 初级

  
               

jQuery基础课程

让jQuery带您进入网页动态交互世界,为...更新完毕    15783人学习     
  

9小时17分钟 | 初级

  
                

jQuery基础课程

让jQuery带您进入网页动态交互世界,为...更新完毕    15783人学习     
  

9小时17分钟 | 初级

  
               

jQuery基础课程

让jQuery带您进入网页动态交互世界,为...更新完毕    15783人学习     
  

9小时17分钟 | 初级

  
         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); })

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


文章名称:jQuery如何实现鼠标经过显示动画边框特效
文章分享:http://dzwzjz.com/article/pecood.html