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 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
js获取图片长和宽度的代码
Nov 24 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
Aug 15 Javascript
JS.findElementById()使用介绍
Sep 21 Javascript
jQuery循环动画与获取组件尺寸的方法
Feb 02 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
Oct 17 Javascript
bootstrap基本配置_动力节点Java学院整理
Jul 14 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
Mar 01 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
Dec 05 Javascript
JavaScript学习笔记之DOM基础操作实例小结
Jan 09 Javascript
json字符串对象转换代码实例
Sep 28 Javascript
vue 实现cli3.0中使用proxy进行代理转发
Oct 30 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面向对象中的魔术方法中文说明
2014/03/04 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
非集成环境的php运行环境(Apache配置、Mysql)搭建安装图文教程
2016/04/12 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
php图像验证码生成代码
2017/06/08 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
JavaScript类和继承 this属性使用说明
2010/09/03 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
AngularJs验证重复密码的方法(两种)
2016/11/25 Javascript
jQuery中 bind的用法简单介绍
2017/02/13 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
2020/03/27 Javascript
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
浅谈React中组件间抽象
2018/01/27 Javascript
vue项目打包部署到服务器的方法示例
2018/08/27 Javascript
vue3.0中使用element的完整步骤
2021/03/04 Vue.js
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
python中如何正确使用正则表达式的详细模式(Verbose mode expression)
2017/11/08 Python
浅谈Python处理PDF的方法
2017/11/10 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
Python使用Numpy模块读取文件并绘制图片
2020/05/13 Python
k-means 聚类算法与Python实现代码
2020/06/01 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
高考考python编程是真的吗
2020/07/20 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
高中生学习生活的自我评价
2013/10/09 职场文书
质检员的岗位职责
2013/11/15 职场文书
三年大学自我鉴定
2014/01/16 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
有限公司股东合作协议书
2014/10/29 职场文书
单位工作证明范本
2015/06/15 职场文书
多人股份制合作协议书
2016/03/19 职场文书
使用Apache Camel表达REST服务的方法
2022/06/10 Servers