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


Posted in jQuery onMarch 24, 2017

原效果用addClass 改为slideUp,纯学习

效果图:

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-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 h2{
 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
}
</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" alt=""></div><h2>jQuery基础课程</h2><span>让jQuery带您进入网页动态交互世界,为...</span><b>更新完毕    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" alt=""></div><h2>jQuery基础课程</h2><span>让jQuery带您进入网页动态交互世界,为...</span><b>更新完毕    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" alt=""></div><h2>jQuery基础课程</h2><span>让jQuery带您进入网页动态交互世界,为...</span><b>更新完毕    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" alt=""></div><h2>jQuery基础课程</h2><span>让jQuery带您进入网页动态交互世界,为...</span><b>更新完毕    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 相关文章推荐
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
jQuery中$原理实例分析
Aug 13 jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
HTML5+jQuery实现搜索智能匹配功能
Mar 24 #jQuery
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 #jQuery
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 #jQuery
jQuery实现的背景颜色渐变动画效果示例
Mar 24 #jQuery
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 #jQuery
jQuery编写textarea输入字数限制代码
Mar 23 #jQuery
jquery实现全选、全不选以及单选功能
Mar 23 #jQuery
You might like
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
yii框架源码分析之创建controller代码
2011/06/28 PHP
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
js离开或刷新页面检测(且兼容FF,IE,Chrome)
2014/03/05 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
2015/07/01 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
JavaScript实现的多个图片广告交替显示效果代码
2015/09/04 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
vue-cli+webpack记事本项目创建
2017/04/01 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
谈谈对vue响应式数据更新的误解
2017/08/01 Javascript
Vue中的异步组件函数实现代码
2018/07/20 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
[01:54]TI珍贵瞬间系列(五):压力
2020/08/29 DOTA
简单的通用表达式求10乘阶示例
2014/03/03 Python
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
Python计算字符宽度的方法
2016/06/14 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
html5 application cache遇到的严重问题
2012/12/26 HTML / CSS
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
营销与策划专业毕业生求职信
2013/11/01 职场文书
个人求职信范文分享
2013/12/13 职场文书
聚美优品励志广告词
2014/03/14 职场文书
《鹬蚌相争》教学反思
2014/04/22 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
辞职信的写法
2015/02/27 职场文书
总经理助理岗位职责范本
2015/03/31 职场文书
《中彩那天》教学反思
2016/02/24 职场文书