编程 Javascript

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

Posted in Javascript onSeptember 23, 2016

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

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>

总结

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

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

- Author -

daisy

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js获取提交的字符串的字节数

Feb 09 Javascript

JavaScript高级程序设计（第3版）学习笔记5 js语句

Oct 11 Javascript

JavaScript根据数据生成百分比图和柱状图的实例代码

Jul 14 Javascript

JavaScript将相对地址转换为绝对地址示例代码

Jul 19 Javascript

js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS

Nov 18 Javascript

浅析JavaScript基本类型与引用类型

May 28 Javascript

javascript制作的cookie封装及使用指南

Jan 02 Javascript

SelectPage v2.4 发布新增纯下拉列表和关闭分页功能

Sep 07 Javascript

vue项目中使用vue-i18n报错的解决方法

Jan 13 Javascript

深入了解JavaScript 防抖和节流

Sep 12 Javascript

vue keep-alive 动态删除组件缓存的例子

Nov 04 Javascript

vue-cli点击实现全屏功能

Mar 07 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