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列表检索功能实现代码
Jul 17 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 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
如何在symfony中导出为CSV文件中的数据
2011/10/06 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
php写入txt乱码的解决方法
2019/09/17 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
人人网javascript面试题 可以提前实现下
2012/01/05 Javascript
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
我的Node.js学习之路(二)NPM模块管理
2014/07/06 Javascript
node.js中的fs.futimes方法使用说明
2014/12/17 Javascript
纯js实现重发验证码按钮倒数功能
2015/04/21 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
Three.js学习之网格
2016/08/10 Javascript
基于JavaScript实现选项卡效果
2017/07/21 Javascript
vue 计时器组件的实现代码
2017/09/14 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
JS使用队列对数组排列,基数排序算法示例
2019/03/02 Javascript
基于layui实现高级搜索(筛选)功能
2019/07/26 Javascript
vue 解决IOS10低版本白屏的问题
2020/11/17 Javascript
Python实现识别手写数字大纲
2018/01/29 Python
Django admin管理工具TabularInline类用法详解
2020/05/14 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
selenium+headless chrome爬虫的实现示例
2021/01/08 Python
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
全球速卖通:AliExpress(国际版淘宝)
2017/09/20 全球购物
模具数控专业自荐信
2014/01/27 职场文书
3.12植树节活动总结2014
2014/03/13 职场文书
社会实践评语
2014/04/28 职场文书
大学生求职信
2014/06/17 职场文书
孝敬父母的活动方案
2014/08/28 职场文书
公证书格式
2015/01/23 职场文书
食品仓管员岗位职责
2015/04/01 职场文书
写作技巧:如何撰写一份优秀的营销策划书
2019/08/13 职场文书
Mysql案例刨析事务隔离级别
2021/09/25 MySQL
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技
Win10 Anaconda安装python-pcl
2022/04/29 Servers
redis protocol通信协议及使用详解
2022/07/15 Redis