脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery实现边框动态效果

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

 更新时间：2016年09月23日 11:50:27   投稿：daisy  
这篇文章给大家分享了一个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——九宫格大转盘抽奖实例

    jquery——九宫格大转盘抽奖实例

    本篇文章主要介绍了jquery——九宫格大转盘抽奖实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • 解析jquery获取父窗口的元素

    解析jquery获取父窗口的元素

    本篇文章是对jquery获取父窗口元素的实现方法进行了详细的分析介绍，需要的朋友参考下
    2013-06-06
  • jQuery实现指定区域外单击关闭指定层的方法【经典】

    jQuery实现指定区域外单击关闭指定层的方法【经典】

    这篇文章主要介绍了jQuery实现指定区域外单击关闭指定层的方法,可实现在弹出层外任意位置点击关闭弹出层的功能,涉及jQuery事件操作方法,包含了详尽的代码功能说明,非常简单实用,需要的朋友可以参考下
    2016-06-06
  • jQuery学习笔记之基础中的基础

    jQuery学习笔记之基础中的基础

    本文是jQuery学习笔记系列文章的第一篇，跟大多数开篇文章一样，我们来讲解下jQuery最基础的东西，希望大家能够喜欢。
    2015-01-01
  • jQuery实现手机自定义弹出输入框

    jQuery实现手机自定义弹出输入框

    这篇文章主要介绍了jQuery实现手机自定义弹出输入框 的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-06-06
  • jquery获取一组checkbox的值(实例代码)

    jquery获取一组checkbox的值(实例代码)

    使用jquery获取一组checkbox的值实例代码。需要的朋友可以过来参考下，希望对大家有所帮助
    2013-11-11
  • jQuery如何获取同一个类标签的所有值(默认无法获取)

    jQuery如何获取同一个类标签的所有值(默认无法获取)

    jQuery总是只返回第一个类标签的值，所以无法达到我们的要求，那么jQuery如何获取同一个类标签的所有的值，下面与大家分享方法
    2014-09-09
  • jquery解析xml字符串示例分享

    jquery解析xml字符串示例分享

    用JavaScript解析XML数据是常见的编程任务，JavaScript能做的，JQuery当然也能做。下面我们来总结几个使用JQuery解析XML的例子
    2014-03-03
  • jQuery实现首页顶部可伸缩广告特效代码

    jQuery实现首页顶部可伸缩广告特效代码

    一套使用jQuery 插件实现的广告特效代码,其效果类似全屏广告,打开网页后在网页的第一屏显示大幅广告,停留几秒后慢慢伸缩至标准小图片显示在网页预留位置上，效果非常不错，这里推荐给大家。
    2015-04-04
  • jQuery on()方法使用技巧详解

    jQuery on()方法使用技巧详解

    这篇文章主要介绍了jQuery on()方法使用技巧详解,本文讲解了trigger()绑定、多个事件绑定同一个函数、多个事件绑定不同函数、绑定自定义事件、传递数据到函数等技巧,需要的朋友可以参考下
    2015-04-04

最新评论