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 urldecode URL解码的问题
Jan 08 Javascript
javascript中方便增删改cookie的一个类
Oct 11 Javascript
使用jQuery监听DOM元素大小变化
Feb 24 Javascript
js多功能分页组件layPage使用方法详解
May 19 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
vue-swiper的使用教程
Aug 30 Javascript
javascript中关于类型判断的一些疑惑小结
Oct 14 Javascript
使用Sonarqube扫描Javascript代码的示例
Dec 26 Javascript
Vue自定义属性实例分析
Feb 23 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
JS实现的碰撞检测与周期移动完整示例
Sep 02 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学习之正则表达式
2011/04/17 PHP
百度ping方法使用示例 自动ping百度
2014/01/26 PHP
php导出中文内容excel文件类实例
2015/07/06 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
Ionic+AngularJS实现登录和注册带验证功能
2017/02/09 Javascript
NodeJS配置HTTPS服务实例分享
2017/02/19 NodeJs
Bootstrap输入框组件使用详解
2017/06/09 Javascript
基于react组件之间的参数传递(详解)
2017/09/05 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
vue异步axios获取的数据渲染到页面的方法
2018/08/09 Javascript
python密码错误三次锁定(实例讲解)
2017/11/14 Python
TensorFlow实现简单卷积神经网络
2018/05/24 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
Django 用户登陆访问限制实例 @login_required
2020/05/13 Python
在python下实现word2vec词向量训练与加载实例
2020/06/09 Python
paramiko使用tail实时获取服务器的日志输出详解
2020/12/06 Python
10 套华丽的CSS3 按钮小结
2012/10/03 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
2020/06/01 HTML / CSS
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
美国在线奢侈品寄售商店:Luxury Garage Sale
2018/08/19 全球购物
EJB的激活机制
2013/10/25 面试题
优秀班集体先进事迹材料
2014/05/28 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
2014年妇联工作总结
2014/11/21 职场文书
高三英语复习计划
2015/01/19 职场文书
亮剑观后感600字
2015/06/05 职场文书
使用Djongo模块在Django中使用MongoDB数据库
2021/06/20 Python