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 相关文章推荐
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 Javascript
js实现用户注册协议倒计时的方法
Jan 21 Javascript
图解prototype、proto和constructor的三角关系
Jul 31 Javascript
浅谈JavaScript中promise的使用
Jan 11 Javascript
原生JS轮播图插件
Feb 09 Javascript
Vue通过input筛选数据
Oct 26 Javascript
AngularJs 延时器、计时器实例代码
Sep 16 Javascript
快速解决vue-cli在ie9+中无效的问题
Sep 04 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
Nov 24 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 Javascript
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
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
一个连接两个不同MYSQL数据库的PHP程序
2006/10/09 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
Laravel给生产环境添加监听事件(SQL日志监听)
2017/06/19 PHP
简明json介绍
2008/09/28 Javascript
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
Javascript this 的一些学习总结
2012/08/02 Javascript
javascript 图片裁剪技巧解读
2012/11/15 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
Extjs4中的分页应用结合前后台
2013/12/13 Javascript
基于jquery的simpleValidate简易验证插件
2014/01/31 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
2016/08/16 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
2019/05/22 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
2019/09/25 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
老生常谈python之鸭子类和多态
2017/06/13 Python
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
python实现自动解数独小程序
2019/01/21 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
python自动点赞功能的实现思路
2020/02/26 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
Bootstrap 学习分享
2012/11/12 HTML / CSS
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
公司清洁工岗位职责
2013/12/14 职场文书
工商管理毕业生推荐信
2013/12/24 职场文书
幼儿园招生广告
2014/03/19 职场文书
电钳工人个人求职信
2014/05/10 职场文书
事业单位个人查摆问题及整改措施
2014/10/28 职场文书