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中的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 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实现图片轮播效果代码
整理以前用jQuery实现的图片轮播效果. 1. 不做操作时,自动轮播 2. 鼠标悬浮在图片上时,停止自动轮播,隐藏在图片左右的箭头会显示出来 3. 手动轮播1:鼠标指向图片底部的小标按钮,可以切换对应的图片 4. 手动轮播2:点击左右箭头也可以切换图片 效果图:(PS:用软件捕捉的,不太会弄,感觉图片都失真了) 下面是代码区域: **inde.html部分代码** <div class="box"> <ul class="img">
-
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
最近在一个ASP.NET MVC5项目中使用Bootstrap的模态窗(弹出层)来让用户填写内容,其中的一个编辑框提供了自动完成功能,用jQuery UI Autocomplete来实现. 因为我是WEB前端小白,遇到一个问题很久也没解决掉,所以特简单记录一下,供以后查阅. 问题:不使用模态窗的时候,autocomplete可以很好的工作,使用模态窗时弹出的选择菜单会被模态窗遮挡. 解决过程: 首先查到的解决办法是在*autocomplete.css中找到.ui-autocomplete伪类,添
-
jquery attr()设置和获取属性值实例教程
语法: 1.attr("属性名"): //获取属性的值(取得第一个匹配元素的属性.通过这个方法可以方便的从第一个匹配元素中获取一个属性的值.如果元素没有相应属性,则返回undefined) 2.attr("属性名","属性值"); //设置属性的值(为所有匹配的元素设置一个属性值) 3.attr("属性名","函数值"); //设置属性的函数值(为所有匹配的元素设置一个计算的属性值.不提供值,而是提供一个函
-
bootstrap与Jquery UI 按钮样式冲突的解决办法
参考: http://getbootstrap.com/javascript/ 今天在写页面的时候, 遇到一个问题, 页面上 要同时使用Jquery UI的弹出框, 又要用 bootstrap 的popover 结果, 弹框的button 就变成这个样子了. 网上查了下, 需要在JS开始的地方 添加两行代码. bootstrapButton = $.fn.button.noConflict(); $.fn.bootstrapBtn = bootstrapButton; 添加完, 刷新页面就正常了
-
jQuery 特性操作详解及实例代码
前面的话 每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息.操作特性的DOM方法主要有3个:getAttribute()方法.setAttribute()方法和removeAttribute()方法,而在jQuery中用一个attr()与removeAttr()就可以全部搞定了,包括兼容问题.本文将介绍jQuery中的特性操作 获取特性 jQuery中用attr()方法来获取和设置特性,attr是attribute(特性)的缩写,在jQuery DOM操作中会经常
-
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实现边框动态效果的实例代码
话不多说.静态效果图如下 实代码如下 <!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> <!-- 导入jquery核心类库 --> <script type="text/javascript"
随机推荐
- Shell脚本解压rpm软件包
- 关于Java变量的声明、内存分配及初始化详解
- OpenStack安装部署Liberty Neutron
- js实现图片上传并正常显示
- PHP生成便于打印的网页
- Javascript快速排序算法详解
- Mysql如何避免全表扫描的方法
- php Sql Server连接失败问题及解决办法
- Python使用Flask框架同时上传多个文件的方法
- Python实现快速排序算法及去重的快速排序的简单示例
- 配置RD9中的DNS
- java多线程编程实现下雪效果
- PHP执行linux系统命令的常用函数使用说明
- Jquery揭秘系列:ajax原生js实现详解(推荐)
- 纯javascript实现简单下拉刷新功能
- js选择日期
- 详解ASP.NET Core 处理 404 Not Found
- 使用递归删除树形结构的所有子节点(java和mysql实现)
- 探讨关于OSPF的network配置
- Python Opencv实现图像轮廓识别功能