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

2024-12-22 08:32:23

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

实代码如下

<!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 css() 方法动态修改CSS属性

我们先来看个实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>添加和删除类</title> <style> div{width: 500px;height: 500px;background: #1c94c4;} button{width: 80px;height: 40px;margin
jquery attr()设置和获取属性值实例教程

语法: 1.attr("属性名"): //获取属性的值(取得第一个匹配元素的属性.通过这个方法可以方便的从第一个匹配元素中获取一个属性的值.如果元素没有相应属性,则返回undefined) 2.attr("属性名","属性值"); //设置属性的值(为所有匹配的元素设置一个属性值) 3.attr("属性名","函数值"); //设置属性的函数值(为所有匹配的元素设置一个计算的属性值.不提供值,而是提供一个函
jquery不支持toggle()高(新)版本的问题解决

在js代码中引入以下代码,让高版本的jquery兼容toggle事件.代码如下: /** * Replacement for toggle */ jQuery.fn.toggle = function( fn, fn2 ) { // Don't mess with animation or css toggles if ( !jQuery.isFunction( fn ) || !jQuery.isFunction( fn2 ) ) { return oldToggle.apply( this,
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法

最近在一个ASP.NET MVC5项目中使用Bootstrap的模态窗(弹出层)来让用户填写内容,其中的一个编辑框提供了自动完成功能,用jQuery UI Autocomplete来实现. 因为我是WEB前端小白,遇到一个问题很久也没解决掉,所以特简单记录一下,供以后查阅. 问题:不使用模态窗的时候,autocomplete可以很好的工作,使用模态窗时弹出的选择菜单会被模态窗遮挡. 解决过程: 首先查到的解决办法是在*autocomplete.css中找到.ui-autocomplete伪类,添
jQuery中的AjaxSubmit使用讲解

最近在使用ajaxForm,随便把使用方法记下下来,以便以后回顾. 1 ,引入依赖脚本 <script type="text/javascript" src="/js/jquery/jquery.form.js"></script> //ajaxForm 依赖脚本 <script type="text/javascript" src="/js/jquery/jquery-1.8.0.min.js"
jQuery实现移动端手机商城购物车功能

购物车数量加减右加号 $(".jiahao").click(function() { var t = $(this).siblings().find("input");//取到数量 t.val(parseInt(t.val()) + 1);//parseInt()解析input一个字符串,返回一个整数 heji();//调用后面计算的函数 }) 左减号 $(".jianhao").click(function() { var t = $(thi
jQuery 特性操作详解及实例代码

前面的话每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息.操作特性的DOM方法主要有3个:getAttribute()方法.setAttribute()方法和removeAttribute()方法,而在jQuery中用一个attr()与removeAttr()就可以全部搞定了,包括兼容问题.本文将介绍jQuery中的特性操作获取特性 jQuery中用attr()方法来获取和设置特性,attr是attribute(特性)的缩写,在jQuery DOM操作中会经常
jQuery实现图片轮播效果代码

整理以前用jQuery实现的图片轮播效果. 1. 不做操作时,自动轮播 2. 鼠标悬浮在图片上时,停止自动轮播,隐藏在图片左右的箭头会显示出来 3. 手动轮播1:鼠标指向图片底部的小标按钮,可以切换对应的图片 4. 手动轮播2:点击左右箭头也可以切换图片效果图:(PS:用软件捕捉的,不太会弄,感觉图片都失真了) 下面是代码区域: **inde.html部分代码** <div class="box"> <ul class="img">
bootstrap与Jquery UI 按钮样式冲突的解决办法

参考: http://getbootstrap.com/javascript/ 今天在写页面的时候, 遇到一个问题, 页面上要同时使用Jquery UI的弹出框, 又要用 bootstrap 的popover 结果, 弹框的button 就变成这个样子了. 网上查了下, 需要在JS开始的地方添加两行代码. bootstrapButton = $.fn.button.noConflict(); $.fn.bootstrapBtn = bootstrapButton; 添加完, 刷新页面就正常了
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;
jQuery判断邮箱格式对错实例代码讲解

废话不多说了,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>检测Email地址格式是否正确</title> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"><
jQuery实现拖动效果的实例代码

jQuery实现拖动效果的实例代码,具体代码如下所示: <!DOCTYPE html> <html> <head> <style> div{ width:100px; height:100px; background:red; position:absolute;} </style> <script type="text/javascript" src="js/jquery-1.11.3.js">
基于Bootstrap和jQuery构建前端分页工具实例代码

前言为啥名字叫[前端分页工具]?因为我实在想不到什么好名字,如果想要更加贴切的理解这个工具,应该从业务来看业务是这样的,有一个数据从后台传到前台,因为数据量不大,因此传过来之后直接显示即可,但是=.=所谓的数据量不大,最多也达到成百上千条,不可能全部显示出来,那么就需要分页常规的分页是利用Ajax,通过传页偏移量到后台,后台查询数据库再返回数据,可以实现无刷新分页,拿到的数据也是最新的前端分页优点:一次传输数据,避免用户反复请求服务器,减少网络带宽.服务器调度压力.数据库查询.缓存查询
jQuery Ajax 全局调用封装实例代码详解

有一种情况:全站都要用异步方式来调用数据,提交数据,那么你每次操作都会要$.ajax({.....}) 写重复的方法和代码,冗余太大, 也浪费时间,虽说你有代码自动提示补全,但真的不优雅,身为前端极客,是不能允许的! [嘿嘿!虽说我现在基本不用jquery了 ,不过异步概念是永远要用的,就帮助下新人] jQuery Ajax通用js封装第一步:引入jQuery库 <script type="text/javascript" src="/js/jquery.mi
jQuery动态增减行的实例代码解析(推荐)

先给大家展示下效果图: 这是没有增加时的界面: 增加后的界面: 删除后的界面: 原因分析: 不擅长jquery和JavaScript 场景: 代码如下: <table class="table table-bordered"> <thead> <tr> <th style="width: 10px">輪次</th> <th style="width: 100%">比賽時間&l
jQuery图片轮播功能实例代码

jquery 轮播图代码如下所示: <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>图片轮播</title> <style> *{margin:0px;padding:0px;} .one{ float:left; position:relative; lef
jQuery模拟爆炸倒计时功能实例代码

HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>炸弹倒计时</title> <style type="text/css"> .content { width: 200px; margin:0 auto; } .content .img1 { /*添加炸弹动
简单的jQuery banner图片轮播实例代码

朋友给我看了一个轮播效果,把js下载一看,丫丫的一个这么简单的效果,这么的就能写个几百行的,严重影响浏览器加载速度嘛,以为人家宽带流量不要钱玩的哦..无奈之下给他写了个简单的,把所有代码放上去都没有超过70行,还有圆角的那个CSS,不是每个浏览器都是圆角的,不过不影响美观,嘻嘻. 先给大家展示下效果图: <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>无标题页</title&
jQuery EasyUI window窗口使用实例代码

需求:点击[增加]按钮,弹出窗口,并对所有输入项内容进行校验,校验通过就提交给后台的action处理,没有通过校验就弹窗提示. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>管理取派员</title>  <script type="text/javascript"

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

相关推荐

随机推荐