jQuery实现边框动态效果的实例代码


Posted in Javascript onSeptember 23, 2016

话不多说、静态效果图如下

jQuery实现边框动态效果的实例代码

jQuery实现边框动态效果的实例代码

实代码如下

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 .myDiv{
  width: 300px;
  height: 200px;
  border: 1px solid rgba(0,0,0,0.2);
  margin: 50px ;
  position: relative;
 }
 .topLine{
  width: 0px;
  height: 1px;
  background: black;
  position:absolute;
  left: 0;
  top: -1px;
 }
 .bottomLine{
  width: 0px;
  height: 1px;
  background: black;
  position:absolute;
  left: 0;
  bottom: -1px;
 }
 .leftLine{
  width: 1px;
  height: 0px;
  background: black;
  position:absolute;
  left: -1;
  bottom: -1px;
 }
 .rightLine{
  width: 1px;
  height: 0px;
  background: black;
  position:absolute;
  right: -1px;
  top: -1px;
 }
 </style>
</head>
<body>
 <div class="myDiv">
 <div class="topLine"></div>
 <div class="rightLine"></div>
 <div class="bottomLine"></div>
 <div class="leftLine"></div>
 </div>
 <div class="myDiv">
 <div class="topLine"></div>
 <div class="rightLine"></div>
 <div class="bottomLine"></div>
 <div class="leftLine"></div>
 </div>
 <script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.js'></script>
 <script>
 $(function(){
  $(".myDiv").mouseover(function(){
  $(this).find(".topLine,.bottomLine").stop().animate({"width":"300px"});
  $(this).find(".rightLine,.leftLine").stop().animate({"height":"200px"});
   
  })
  $(".myDiv").mouseout(function(){
  $(this).find(".topLine,.bottomLine").stop().animate({"width":"0px"});
  $(this).find(".rightLine,.leftLine").stop().animate({"height":"0px"});
  })
 })
 </script>
</body>
</html>

总结

以上就是这篇文章的全部内容了,刚兴趣的朋友们可以自己动手操作下看看动态效果,真的非常不错,希望对大家的学习或者工作能有一定的帮助。如果有疑问大家可以留言交流,小编会尽快给大家回复。

Javascript 相关文章推荐
js 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
jQuery中after的两种用法实例
Jul 03 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
Feb 04 Javascript
javascript校验价格合法性实例(必须输入2位小数)
May 05 Javascript
node.js中的fs.writeFileSync方法使用说明
Dec 14 Javascript
基于JS实现EOS隐藏错误提示层代码
Apr 25 Javascript
使用JS中的exec()方法构造正则表达式验证
Aug 01 Javascript
javascript实现滑动解锁功能
Mar 22 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
Jun 08 Javascript
js删除数组中的元素delete和splice的区别详解
Feb 03 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
Apr 29 Javascript
Vue数据双向绑定底层实现原理
Nov 22 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
Sep 23 #Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 #Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
Sep 23 #Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 #Javascript
AngularJS通过$location获取及改变当前页面的URL
Sep 23 #Javascript
AngularJS监听路由的变化示例代码
Sep 23 #Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 #Javascript
You might like
PHP 开源AJAX框架14种
2009/08/24 PHP
php socket客户端及服务器端应用实例
2014/07/04 PHP
PHP积分兑换接口实例
2015/02/09 PHP
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
jquery animate 动画效果使用说明
2009/11/04 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
2013/04/18 Javascript
ajax请求get与post的区别总结
2013/11/04 Javascript
JavaScript实现网页对象拖放功能的方法
2015/04/15 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
分享经典的JavaScript开发技巧
2015/11/21 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
js 获取站点应用名的简单实例
2016/08/18 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
2017/07/24 Javascript
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
Node.js API详解之 vm模块用法实例分析
2020/05/27 Javascript
[06:45]DOTA2-DPC中国联赛 正赛 Magma vs LBZS 选手采访
2021/03/11 DOTA
python备份文件以及mysql数据库的脚本代码
2013/06/10 Python
python读取TXT到数组及列表去重后按原来顺序排序的方法
2015/06/26 Python
Python 列表(List) 的三种遍历方法实例 详解
2017/04/15 Python
如何用itertools解决无序排列组合的问题
2017/05/18 Python
python 中文件输入输出及os模块对文件系统的操作方法
2018/08/27 Python
django-filter和普通查询的例子
2019/08/12 Python
Python Merge函数原理及用法解析
2020/09/16 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
详解canvas drawImage()方法绘制图片不显示的问题
2018/10/08 HTML / CSS
万宝龙英国官网:Montblanc手表、书写工具、皮革和珠宝
2018/10/16 全球购物
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
篝火晚会策划方案
2014/05/16 职场文书
电子商务系毕业生自荐信
2014/05/29 职场文书
2014年护士长工作总结
2014/11/11 职场文书
社会实践活动总结
2015/02/05 职场文书
班主任工作总结范文
2015/08/13 职场文书