文档章节

JQuery边框特效

ycYinG
 ycYinG
发布于 2016/12/08 15:59
字数 275
阅读 8
收藏 0

####主要思想 1.将四个div分别定位到大div的上下左右位置 2.分别设置成宽度为0或者高度为0 3.让其执行给定动画,即多少毫秒让宽度或者高度变为指定的长度 ####html代码 <div class="box"> <div class="border_top"></div> <div class="border_bottom"></div> <div class="border_left"></div> <div class="border_right"></div> </div> ####css代码 .box{ width:234px; height:300px; position:relative; } .border_bottom,.border_left,.border_right,.border_top{ background: #ff6700; position: absolute; font-size: 0px; transition: all 0.5s ease-out; z-index: 99; } .border_bottom,.border_top{ height: 1px; width: 0px; } .border_right,.border_left{ height: 0px; width: 1px; } .border_top { top:0px; left:0px; } .border_right { top:0px; right:0px; } .border_bottom { right: 0px; bottom: 0px; } .border_left { left: 0px; bottom: 0px; } ####js实现效果 #####1.引入jquery文件 <script src="jquery-1.8.3.min.js"></script> #####2.jquery代码 $('.main>li').hover(function(){ var index=$(this).index(); $(".border_top").stop(true,true); $(".border_left").stop(true,true); $(".border_bottom").stop(true,true); $(".border_right").stop(true,true); $(".border_top").eq(index).animate({width:"234px"},100) $(".border_left").eq(index).animate({height:"300px"},100) $(".border_bottom").eq(index).animate({width:"234px"},100) $(".border_right").eq(index).animate({height:"300px"},100) },function(){ var index=$(this).index(); $(".border_top").stop(true,true); $(".border_left").stop(true,true); $(".border_bottom").stop(true,true); $(".border_right").stop(true,true); $(".border_top").eq(index).animate({width:"0"},100) $(".border_left").eq(index).animate({height:"0"},100) $(".border_bottom").eq(index).animate({width:"0"},100) $(".border_right").eq(index).animate({height:"0"},100) });

© 著作权归作者所有

共有 人打赏支持
ycYinG
粉丝 1
博文 10
码字总数 4889
作品 0
昌平
程序员
使用jQuery和CSS3创建一个支持翻转效果的微/轻博客网站列表

日期:2012-4-10 来源:GBin1.com 在线演示 本地下载 今天我们将使用页面元素的翻转效果设计一个微博和轻博网站列表,将使用jQuery的jQuery Flip插件来实现特效。 HTML代码 这里我们使用soc...

gbin1
2012/04/10
0
0
20篇教你得到酷炫效果的JQuery教程

我们都喜爱jquery带来的梦幻效果。本之列举的教程标题不同,但它们都带有不同的酷炫视觉效果。跟着它们逐步重建你的设计,又或是将这些令人震憾的特效融入你的设计中。 Making a Beautiful H...

晨曦之光
2012/03/09
0
0
7个神奇的jQuery 3D插件

7个神奇的jquery 3D插件,让你可以实现一些媲美Flash的动画特效。 1. Flip HTML content in 3D 用jQuery实现的3D翻转效果,支持html内容的翻转。 2. Agile Carousel 3D效果的jQuery跑马灯特效...

晨曦之光
2012/03/09
0
0
8种Javascript过渡特效

看过很多后,本人觉得jQuery scrollable 在其中算很优秀的。 以下转自:http://paranimage.com/8-kinds-of-transition-effects-javascript/ 8种JavaScript 过渡特效 , 涵盖淡入淡出、翻转特...

晨曦之光
2012/03/09
0
0
炫酷实用 7款jQuery/HTML5图片应用

jQuery非常强大,我们这里有很多关于jQuery焦点图的插件,今天我们精选了7款利用jQuery和HTML5实现的超炫酷图片特效应用,有些也是焦点图插件,一起来看看吧。 1、HTML5 3D衣服摆动特效 超酷...

老鸟的空间
2014/07/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Confluence 6 反向跟踪

当反向跟踪(Trackback )被启用后,在任何你链接到可用启用自动发现功能的外部页面中,Confluence 将会自动发送一个方向跟踪 ping,这个 ping 能通知链接的页面有了内容改变。 Confluence 页...

honeymose
8分钟前
0
0
日期和时间API - 读《Java 8实战》

日期与时间 LocalDate 创建一个LocalDate对象并读取其值 // 根据年月日创建日期LocalDate date1 = LocalDate.of(2014, 3, 18);// 读取System.out.println(date1.getYear()); // 2014Sys...

yysue
15分钟前
0
0
8月15日任务

8月15日任务 Memcached命令行 • telnet 127.0.0.1 11211 • set key2 0 30 2 ab STORED get key2 VALUE key2 0 2 ab END 实例: [root@localhost 02]# telnet 127.0.0.1 11211-bash: te......

寰宇01
28分钟前
1
0
LNMP架构(Nginx访问日志、Nginx日志切割、静态文件不记录日志和过期时间)

Nginx访问日志 1.打开配置文件,搜索log_format vim /usr/local/nginx/conf/nginx.conf 2.访问日志常用变量含义 $remote_addr : 客户端IP(公网IP) $http_x_forwarded_for : 代理服务器的IP ...

蛋黄_Yolks
28分钟前
0
0
lombok 不用再写pojo的getset

java实体类不写get/set方法 1、下载地址https://projectlombok.org/download Myeclipse、eclipse安装lombok Lombok是一种Java实用工具,可以帮助开发人员消除Java的冗长,具体看lombok的官网...

木之下
35分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部