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版本 1.x? 2.x? 3.x?
Apr 01 jQuery
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
jQuery实现简单弹幕效果
Nov 28 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
jquery实现穿梭框功能
Jan 19 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
用PHP创建PDF中文文档
2006/10/09 PHP
简单的php写入数据库类代码分享
2011/07/26 PHP
PHP JS Ip地址及域名格式检测代码
2013/09/27 PHP
PHP中ini_set与ini_get用法实例
2014/11/04 PHP
php操作xml入门之cdata区段
2015/01/23 PHP
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
javascript中创建对象的几种方法总结
2013/11/01 Javascript
javascript实现的一个随机点名功能
2014/08/26 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
2016/06/13 Javascript
JS作为值的函数用法示例
2016/06/20 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
2017/05/22 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
在微信小程序里使用watch和computed的方法
2018/08/02 Javascript
详解原生JS动态添加和删除类
2019/03/26 Javascript
解决layer 动态加载select 失效的问题
2019/09/18 Javascript
vue实现文字加密功能
2019/09/27 Javascript
node脚手架搭建服务器实现token验证的方法
2021/01/20 Javascript
Python访问MySQL封装的常用类实例
2014/11/11 Python
Python中用altzone()方法处理时区的教程
2015/05/22 Python
python实现DES加密解密方法实例详解
2015/06/30 Python
python目录与文件名操作例子
2016/08/28 Python
Python聊天室程序(基础版)
2018/04/01 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
python 批量修改 labelImg 生成的xml文件的方法
2019/09/09 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
Python实现京东抢秒杀功能
2021/01/25 Python
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
Internet主要有哪些网络群组成
2015/12/24 面试题
大学毕业生推荐信
2014/07/09 职场文书
交通工程专业推荐信
2014/09/06 职场文书
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
教师学习三严三实心得体会
2014/10/13 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
JavaScript实现简单图片切换
2021/04/29 Javascript