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 相关文章推荐
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
May 25 Javascript
判断脚本加载是否完成的方法
May 26 Javascript
超简单JS二级、多级联动的简单实例
Feb 18 Javascript
深入剖析javascript中的exec与match方法
May 18 Javascript
AngularJS 实现JavaScript 动画效果详解
Sep 08 Javascript
js实现固定宽高滑动轮播图效果
Jan 13 Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 Javascript
JS逻辑运算符短路操作实例分析
Jul 09 Javascript
JavaScript中call和apply方法的区别实例分析
Aug 03 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
Sep 11 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
Oct 10 Javascript
JavaScript实现简单计算器
Mar 19 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
2款PHP无限级分类实例代码
2015/11/11 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
javascript 常用方法总结
2009/06/03 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
2011/04/14 Javascript
js 第二代身份证号码的验证机制代码
2011/05/12 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
2012/02/27 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
2013/04/19 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
JS+CSS实现的蓝色table选项卡效果
2015/10/08 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
2016/08/29 Javascript
Bootstarp 基础教程之表单部分实例代码
2017/02/03 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
2017/09/15 Javascript
Vue异步加载about组件
2017/10/31 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
vue引入js数字小键盘的实现代码
2018/05/14 Javascript
微信小程序实现多选框全选与取消全选功能示例
2019/05/14 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
Python数据分析之双色球基于线性回归算法预测下期中奖结果示例
2018/02/08 Python
Python中将dataframe转换为字典的实例
2018/04/13 Python
Python实现读取SQLServer数据并插入到MongoDB数据库的方法示例
2018/06/09 Python
Python实现全排列的打印
2018/08/18 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
python中count函数简单的实例讲解
2020/02/06 Python
基于python图书馆管理系统设计实例详解
2020/08/05 Python
Python创建文件夹与文件的快捷方法
2020/12/08 Python
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
查找廉价航班和发现新目的地:Kiwi.com
2019/02/25 全球购物
美国在线轮胎零售商:SimpleTire
2019/04/08 全球购物
2014年幼儿园教学工作总结
2014/12/04 职场文书
总结Python使用过程中的bug
2021/06/18 Python
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis