文档章节

JQuery边框特效

ycYinG
 ycYinG
发布于 2016/12/08 15:59
字数 275
阅读 9
收藏 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

没有更多内容

加载失败,请刷新页面

加载更多

Dubbo分析之Transport层

前言 上一篇文章Dubbo分析之Serialize层,介绍了最底层的序列化/反序列化层,本文继续分析Serialize层的上一层transport网络传输层,此层使用了现有的一些通讯开源框架(ex:netty,mina,grizzl...

ksfzhaohui
18分钟前
1
0
通告!Android 9 Pie未适配应用公示

8月7日,谷歌正式发布Android 9 Pie,至今已两月有余。近日,华为终端开放实验室对国内主流应用在Android 9 Pie的兼容性进行测试,结果显示:目前TOP3000应用兼容率已经超过95%,但仍有少量应...

安卓绿色联盟
20分钟前
1
0
Linux下多网卡绑定模式详解

在我们日常Linux使用中,一般对于生产网都会使用双网卡或多网卡接入,这样既能添加网络带宽,同时又能做相应的冗余,可谓好处多多。而一般我们都会使用Linux操作系统下自带的网卡绑定模式。这...

openthings
22分钟前
1
0
SylixOS中AARCH64跳转表实现原理

1. 跳转表存在的意义 1.1 内核模块反汇编 如下的程序清单,为一个内核模块的源码。 #define __SYLIXOS_KERNEL#include <SylixOS.h>#include <module.h> /* * SylixOS call module_i......

zhywxyy
23分钟前
2
0
聊一聊 Spring 中的线程安全性

本文摘自ImportNew公众号,摘录做学习资料,向大家推荐该公众号 Spring与线程安全 Spring作为一个IOC/DI容器,帮助我们管理了许许多多的“bean”。但其实,Spring并没有保证这些对象的线程安...

木子SMZ
24分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部