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 构造函数 实例分析
Nov 26 Javascript
利用JS自动打开页面上链接的实现代码
Sep 25 Javascript
JavaScript动态创建div属性和样式示例代码
Oct 09 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
May 04 Javascript
JavaScript实现的多种鼠标拖放效果
Nov 03 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 Javascript
自制微信公众号一键排版工具
Sep 22 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
May 18 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
Jan 26 Javascript
原生JS实现多条件筛选
Aug 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
PHP 将dataurl转成图片image方法总结
2016/10/14 PHP
CI框架(CodeIgniter)实现的导入、导出数据操作示例
2018/05/24 PHP
YII框架关联查询操作示例
2019/04/29 PHP
laravel 实现登陆后返回登陆前的页面方法
2019/10/03 PHP
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
Jquery Ajax请求代码(2)
2011/01/07 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
2015/10/04 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
2016/05/10 Javascript
JS中位置与大小的获取方法
2016/11/22 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
原生JS实现瀑布流插件
2018/02/06 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
[48:44]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS HGT
2014/05/22 DOTA
Python读写Excel文件方法介绍
2014/11/22 Python
Python函数中定义参数的四种方式
2014/11/30 Python
Python使用修饰器执行函数的参数检查功能示例
2017/09/26 Python
Python多进程池 multiprocessing Pool用法示例
2018/09/07 Python
python将一个英文语句以单词为单位逆序排放的方法
2018/12/20 Python
Python坐标线性插值应用实现
2019/11/13 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
CSS中垂直居中的简单实现方法
2015/07/06 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
2014/04/23 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
2020/08/10 HTML / CSS
日本最大美瞳直送网:Morecontact(中文)
2019/04/03 全球购物
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
总监职责范文
2013/11/09 职场文书
办公室副主任职责范本
2014/03/08 职场文书
工作保证书
2015/01/17 职场文书
CSS实现两列布局的N种方法
2021/08/02 HTML / CSS
直播实况, OMG破敌三路五十分钟大战神技局摩托车
2022/04/01 DOTA
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA