一个很漂亮的jQuery动画隐藏登陆框，css很漂亮

别的不说，先看效果图吧

这是展开以后的效果图

这是收缩以后的效果图

用jQuery实现这个功能也就几个函数就搞定了，来看看关键的代码吧。

首先要导入3个js文件，其中js/jquery-1.3.2.min.js是压缩以后的jQuery类库；
js/pngfix/supersleight-min.js是支持IE6的一个类库，是对图片进行处理的，它能消除那两个按钮图片的四周
（图片本来是长方形的，这里你看到的是圆角图片）。

然后就是下面的两个链接按钮了<a id="open">Log Id | Register</a>
和<a id="close">Close Panel</a>

<div class="tab">
2

<ul class="login">
3

<li class="left"> </li>
4

<li>Hello Guest!</li>
5

<li class="sep">|</li>
6

<li id="toggle">
7

<a id="open" class="open" href="#">Log In | Register</a>
8

<a id="close" style="display: none;" class="close" href="#">Close Panel</a>
9

</li>
10

<li class="right"> </li>
11

</ul>
12

</div>

第三个js文件里面写的就是jQuery的函数，代码很简单：

$(document).ready(function()

{
2

// Expand Panel
3

$("#open").click(function()

{
4

$("div#panel").slideDown("slow");//点击id为open的链接展开面板
5

});
6

// Collapse Panel
8

$("#close").click(function()

{
9

$("div#panel").slideUp("slow"); //点击id为的close链接隐藏面板
10

});
11

// Switch buttons from "Log In | Register" to "Close Panel" on click
13

$("#toggle a").click(function ()

{
14

$("#toggle a").toggle();//这个就是具有slideUp()和slideDown()双重效果
15

});
16

});

这里有完整的程序：

/Files/psunny/jquery实现的动画隐藏登陆框下载.rar

转载于:https://www.cnblogs.com/psunny/archive/2009/07/02/1515844.html

一个很漂亮的jQuery动画隐藏登陆框，css很漂亮相关推荐

html制作好看展开列表框,css实现漂亮的下拉菜单，简单方便实用
本文介绍用css实现的下拉菜单,简单.方便.实用. 为什么推荐用css实现的下拉菜单?因为html默认的 select 控件生成的下拉菜单样式不好控制,不够美观,还有一个致命的缺点,是在IE里 sel ...
Giphy – 分享一个很棒的 GIF 动画图片搜索引擎
GIF 动画图片是一种非常有趣的图片格式,比静态图片更能够表达出含义,如果能制作得有创意,那就非常的有趣.今天向大家推荐一个很棒的 GIF 动画图片搜索引擎--Giphy. 您可能感兴趣的相关文章轻 ...
使用 CSS3 jQuery 制作漂亮的书签动画
今天的教程是关于创建使用 CSS 旋转变换和 JavaScript 制作动画书签效果.我们的想法是展现出样书状结构,使单一的色板或列表点击切换.当点击其中一项,我们就会旋转以显示所选择的项目. 在线演 ...
Hider 2 for Mac 一个很好用的文件隐藏加密工具
Hider 2 for Mac 一个很好用的文件隐藏加密工具前沿有很多人电脑上都有很多私密文件,不方便给别人看到,那该怎么办呢,又不能删除. 这时就是Hider 2 的作用了,能把文件很好的隐藏起 ...
java中jquery怎么学,jQuery动画+实例
1.动画基础隐藏和显示 jQuery中隐藏元素的hide方法让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般 ...
Java程序员从笨鸟到菜鸟之（九十一）跟我学jquery（七）jquery动画大体验
本文来自:曹胜欢博客专栏.转载请注明出处:http://blog.csdn.net/csh624366188 最近一直感觉自己好忙,每天都浑浑噩噩的过着,转眼间,好像有好长时间没有更新笨鸟到菜鸟了.现 ...
jquery笔记一：下载安装、语法、选择器、遍历选择元素的方法、jQuery动画
目前 jQuery 兼容于所有主流浏览器, 包括 IE 6!开发时常用 jquery.js,上线用 jquery.min.js. jq插件目前jQuery有三个大版本: (1)1.x.x: 兼容ie ...
jquery 图像滑块_10个很棒的jQuery图像滑块插件
jquery 图像滑块 The introduction of jQuery has contributed a lot in making the overall process of websit ...
第四章：jQuery动画
一.动画显示与隐藏 1. jQuery中隐藏元素的hide方法让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一 ...

一个很漂亮的jQuery动画隐藏登陆框，css很漂亮

一个很漂亮的jQuery动画隐藏登陆框，css很漂亮相关推荐

最新文章

热门文章