我的ASP.NET学习笔记07JQuery基础知识
JQuery_1_选择器
什么是JQuery
JQuery实际上就是一个javascript文件，它是一堆由javascript写好的工具程序，一个被封装好的js工具库。它在js基础之上做了很多的优化，让网页脚本的编写过程更加的便捷高效。
JQuery有很多的版本，但各版本之间的差异都不是太大，基础语法的通用。
如何使用JQuery
1、首先，我们必须下载或复制JQuery的库文件，也就是文件名”jquery-版本号[.min].js”的脚本文件，（其中包含min的是没有换行、制表符和空格的压缩版本）。
2、在网页中引用JQuery文件：
<script type="text/javascript" src= "js/jquery-1.7.1.min.js" > </script>
选择器
选择器的意义，就是确定代码执行的对象，就是确定代码执行的目标对象。
选择器的基本格式
$符号代表选择器，它的作用类似于javascript如下指令：
document.getElementByID document.getElementsByClassName document.getElementsByTagName
语法：
$(表达式)
表达式可以是一个字符串，也可以是一个变量或html代码。
注意：JQuery语句通常都是以$开头的。
$(document)
获取当前网页的文档对象。
$(document.body)代表网页的<body>部分
$(document.body).css({"background-color":"green"});
HTML标签选择器
就是在选择器的表达式中直接使用html标签名，示例：
<p>天气凉了</p>
<div id="box1">魂牵梦萦</div>
<div id="box2">朝秦暮楚
<p>注意添衣</p>
</div>
//$("p").css({"font-size":"88px"});
$("div p").css({"font-size":"88px"});
选择器的find()方法
意思是在选择器选定的集合之中，再次进行二次筛选，在选择器选定的结果里，再次按条件进行查找。
$(document).find("div p").css({"font-size":"88px"});
//在网页正文中寻找第一个div里的p标签。
ID选择器
$("#box1").css({"font-size":"88px"});
在选择器的表达式中用#以及其后的ID名称来获取这个ID所指向的元素对象。
Class样式类选择器
$(".style1").css(
{
"font-size":"38px",
"background-color":"yellow"
}
);
针对所有class属性为.style1的元素。
css之中包含的实际上是一个JSON对象。
$(“*”)
选择所有元素
$("*").css({
"font-size":"38px",
"background-color":"orange"
});
小练习
将一个span中的div通过jquery的css方法，设置其样式为高200像素宽300像素背景为兰色字体为40px。
并列选择：
$("#box1,.style1").css({
"font-size":"38px",
"background-color":"orange"
});
在表达式中，用逗号来分隔多个选择器。
父子层级关系选择
按照元素之间的包含关系来进行选择，父与子元素用空格或>来分割。
$("#box2>p").css({
"font-size":"38px",
"background-color":"orange"
});
相邻选择器
选择下一个元素
当jquery匹配选择器的时候，会首先找到+左边的元素，然后从该元素开始向后查找+右边的元素，直到找到第一个符合的元素为止。
$(“#box1+div”) //查找box1后面的第一个div
$(".style1+p") //注意：包含层级必须是同一级别的才可以
选择之后所有匹配的元素
$(".style1~p")
首先找到~左边的元素，然后从该元素开始向后查找~右边的元素，找到所有符合条件的元素为止。
选择符合条件的第一个/最后一个元素
$("p:first")
$("p:last")
在选择结果中排除
$("p:not(.style1)").css({"background-color":"orange"});
//在<p>中排除样式类名为style1的元素。
选择查询结果中的排列次序为偶数/奇数的元素
$("p:even").css({"background-color":"orange"});
//选择偶数次序的元素
$("p:odd").css({"background-color":"#aaa"});
//选择奇数次序的元素
选择指定次序的元素
$("p:eq(0)").css({"background-color":"orange"});
//选择页面上的第一个<p>段落（第一个元素的序号为0）
选择大于/小于指定序号的元素
$("p:lt(3)").css({"background-color":"orange"});
//结果集的第3个元素之前的所有元素
$("p:gt(3)").css({"background-color":"orange"});
//结果集的第3个元素之后的所有元素
选择包含指定文本的元素
$("p:contains('Hello')").css({"background-color":"orange"});
//在结果集中查找包含了指定内容的元素。
选择不包含任何子元素或内容的标签
$("p:empty").css({"background-color":"orange","height":"30px"});
//在选择器的查找结果中筛选内部为空的元素
包含指定的子元素的父元素
$("div:has('.style1')")
在所有div中查找，包含使用了.style1的子元素的div。
选择指定元素的父元素
$(".style1:parent").css({
"background-color":"orange",
"height":"30px"
});
选择所有的隐藏元素
$("p:hidden").css({
"background-color":"red",
"display":"block"
});
小练习：
制作一个显示学生姓名的表格，然后设置奇数行的背景色为淡灰色，偶数行的背景色为憕色，如果单元格中没有内容，背景色为红色。
JQurey元素的属性
Html()方法
获取或设置一个容器类元素内部包含的内容，也就是其开始标签与闭合标签中间的内容。
示例：
alert( $("#box1").html()); //获取内容
$("#box1").html("今天<p>星期五</p>"); //修改box1中的内容
Text()方法
与Html相似，获取元素的内容，但是会对内容中的html标签进行一定的处理。
$("#box1").text("今天<p>星期五</p>"); //写入内容时，html元素会被转义，从而不会被浏览作为html标签来解析。
$("#box1").text(); //获取内容时清除掉其中的html
小练习：
1、 在网页中加入一个5行以上的表格。用JQuery向表格的第三行写入文字“云深不知处，身在此山中”。
2、 手动在第四行写入“明日复明日，明日何其多。”。然后用JQuery查找包含“明日”的行，将其文本内容改为“雷令风行”。
3、 给表格第一行加入id为tr1， 用jquery匹配tr1的下一行，并在写一行写入文本：“山中自有黄金屋”
通过JQuery操作hmtl元素及其属性
Ready事件
$(document).ready();
通常JQuery的选择器都需要在其指定的HTML元素加载完成之后再来执行，因此我们一般都是在页面全部加载完毕之后再业执行JQuery代码，否则很可能元素还没有被浏览器构建入DOM模型，我们就去提前使用元素，会造成程序错误。
ready()事件的意思就是指页面全布加载完毕触发，DOM模型构建完成之后。
它相当于是body的onload()事件。
语法：
$(document).ready( function(e){
//需要在页面加载之后运行的代码;
} );
示例：
<body onload=" $('#box1').text('今天<p>星期五</p>');">
相当于：
<script type="text/javascript">
$(document).ready(function(e) {
$("#box1").text("今天<p>星期五</p>");
});
</script>
注意：
Ready()事件可以包含绝大多数的javascript和jquery代码，但是要注意作用域的问题，在ready()中内部定义的变量和函数，是无法在外部访问到的。
JQuery操作html元素
length属性和.size()方法
代表选择器所匹配到的元素的个数。
比如：
$("div").length;
$("div:lt(3)").size(); //第三个元素之前的元素个数
$("div:lt(3)").length;
Get( )方法
它类似于$(“div:eq(n)”)，作用是在选择器匹配到的元素集合中得到指定次序的元素。
但是它同时有另一个功能，就是将JQuery对象转换为javascript对象。也就是不再支持html()或css()这类JQuery方法，而是可以支持innerHTML或style这类javascript的系统函数。
示例：
$("div").get(3).innerHTML //得到第四个元素的内容
each( )方法
它的作用是遍历选择器得到的集合中的每个元素。
each方法的参数
示例：
//each所执行的函数包含两个参数，index代表当前元素在集合中的次序，element代表当前元素对象
$("div").each(function(index, element) {
alert(index +"----"+ element.innerHTML);
});
attr( ) 元素属性集合
获取、设置或添加html元素的属性或属性的集合。
示例：
alert($("#box1").attr("title")) //显示提示内容
$("#img1").attr("src","22.jpg"); //修改图片路径
$("#img1").attr(
{
"width":"700",
"height":"550",
"src":"22.jpg"
}
); //同时修改图片的宽、高和路径
remove()删除元素
清除选择器指定的元素
示例：
alert(1);
$("div:eq(3)").remove();
为元素添加css样式类
addClass()将已存在的css样式类添加到指定的html元素上。
示例：
alert(1);
$("div:eq(3)").addClass("boxStyle");
去除html元素的样式类
removeClass()清除指定元素上已有的样式类。
示例：
alert(1);
$("div:eq(0)").removeClass("boxStyle");
获取或设置表单元素的值
val()用于获取或设置表单元素的value属性的值。
示例：
alert($("input:eq(1)").val());
$("input:eq(0)").val("明天是星期六");
小练习：
1、 在页面上添加5个div，并且定义一个数组，这个数组包含5个元素“登黄鹤楼”，“白日依山尽”，“黄河入海流”，“欲穷千里目”，“请上二楼”。用JQuery的each()，遍历页面上的5个div，将这个5条诗句分别加入5个div中。
2、 定义两个css样式类，一个为背景淡黄色，一个为背景淡绿色，奇数行使用淡黄样式类，偶数行使用淡绿样式类。
3、 用css()方法，定义字体：为华文行楷，字号30px。
4、 在页面上定义9个div，里边输入1-9的数字，用css()和addClass()方法将这9个div以9宫格方式排列，在页面上添加一个文本框和按钮，当我在文本框中输入1-9的数字并按按钮之后，其相应的数字的div就消失不见。
DOM文档处理
向html元素的内部的末尾添加内容
append()方法，向指定的容器类元素的内部的最后面添加内容。
示例：
alert(1);
$("div:first").append("快乐");
alert(1);
$("div:eq(3)").append("<b style='color:red'>快乐</b>");
将html元素移动到另一个元素的内部的末尾
appendTo()方法，示例：
alert(1);
$("#img1").appendTo("div:eq(1)");
//将图片移动到div内部的最后的位置
向html元素内部的开始位置添加内容
prepend()将字符或html代码添加到指定元素内部的最前方，比如：
$("div:eq(2)").prepend("<input type='text' value='1月1日' />");
$("div:first").prepend("<img src='img/22.jpg' width='100' />");
将html元素移动到内部的最开始的位置
prependTo()方法，示例：
alert(1);
$("#img2").prependTo("div:eq(3)");
//将图片移动到第四个div的内部最开始的位置。
添加内容到指定的元素之后
after()方法：比如：
$("#img1").after("<select><option>中国</option><option>韩国</option></select>");
将元素移动到指定的元素之后
有两种方法可以达到这个效果
$("#img1").after($("div:first"));
$("div:eq(1)").insertAfter($("#img2"));
这两种方法都可以让div出现在图片的后面，但是要注意他们的写法和顺序。
移动时这两个方法的参数应该是选择器选中的元素对象。
添加内容到指定元素之前
before()方法，向元素之前添加文本和html代码
示例：
$("div:first").before("<input type='button' value='按钮' />");
移动元素到另一个元素的前面
也是有两种方法：
alert(1);
$("div:first").before($("#img1"));
//将图片移动到div的前面去
alert(1);
$("div:eq(1)").insertBefore($("#img1"));
//将div移动到图片前面去
为指定的html元素添加一个容器标签将其包裹起来
wrap()，在元素的外层添加一个容器元素。
$("span:first").wrap("<b></b>");
$("span:first").wrap("<font color=\"red\"></font>");
wrapAll()对所有匹配的元素外侧添加父级元素
$("div").wrapAll("<font color=\"red\"></font>");
清除指定html元素的父级标签
unwrap()方法
$("span:first").unwrap()
用新元素或内容替换指定的html元素
replaceWith()
$("div:first").replaceWith("<p>明天星期天呀</p>");
替换所有匹配的元素
$("div").replaceWith("<p>明天星期天呀</p>");
清除一个元素的内容
empty()清空一个元素开始与结束标签之间的所有内容
$("font:first").empty();
清除选择器得到的元素集合中的指定元素
detach()二次查找并删除
$("div").detach(".box2");
复制一个html元素
clone()方法
$("#img2").clone().appendTo("div:eq(3)");
//将图片复制到div中
$("#img1").clone().prependTo("div:first");
小练习：
1、 在不写html的情况，用JQuery构建一个网页的新闻列表，要求至少6行，每一行的p段落都有一个id属性:p1、p2。。。p6(要求使用循环来实现)。
$(“body”).append(“<p id=p”+i+”></p>”);
2、 向p1到p6之间的列表中添加新闻的标题。
3、 向p1到p6之间的列表的最前面添加序号。
4、 向p1到p6之间的列表的最后面添加日期。
5、 所有p标签外侧用div包裹起来。
6、 定义一个css样式类，宽度700px，居中，字体微软雅黑红色，然后将这个样式类添加到div之上。
7、 将最后一条新闻移动到最上方。
8、 将第二条新闻复制一份到最下方。
JQuery中的样式和事件
用Jquery控制元素的css样式
css方法
用于获取和设置页面上的元素的样式属性。
获取css样式的值：
alert($("div:first").css("height"));
css方法中只有一个传入值时是获取css的值。（width、height、top、left等等值是包含”px”的字符串）。
修改元素的单个css值：
$("div:first").css("width","500px");
css方法中有两个传入参数时：第一个是css属性名，第二个是css属性值。
修改元素的多个样式属性：
$("div:first").css(
{
"height":"600px",
"width":"500px",
"background-color":"blue"
}
);
获取或修改一个元素的位置：Offset方法
获取元素的位置
offset获取元素位置的时候，它返回的是一个对象，这个对象包含top和left两个数值属性（单位是像素）示例：
var p = $("div:first").offset();
alert("这个元素的位置是高："+p.top+"横向距离："+p.left);
让元素变为浮动层并改变位置
<p style=" width:50px; height:50px; position:absolute; top:150px; left:250px;"></p>
var p = $("p:first").offset({top:400,left:300});
//让一个元素变成浮动层，并且按照指定的top和left位置来移动这个元素。（top和left相对于网页的左上角）
获取元素相对于父元素的相对位置
position()方法返回一个位置对象，这个对象包含了top和left两个属性。
$(document).ready(function(e) {
//var p = $("div>div").offset();
var p = $("div>div").position();
alert("元素相对于其父元素的位置的纵向是："+p.top+"横向："+p.left);
});
滚动条相对于页面顶部的位置
scrollTop方法：获取和设置滚动条相对于页面顶部的距离。
示例：
alert($(document).scrollTop()); //获取滚动条目前的位置 $(document).scrollTop(100); //修改滚动条的位置
height()方法获取或修改一个元素的高度
示例：
$("div>div").height(100); //修改没元素的高度
alert($("div>div").height()); //获取元素的高度
width()方法获取或修改一个元素的宽度
示例：
$("div>div").width(200); //修改没元素的宽度
alert($("div>div").width()); //获取元素的宽度
元素内部的高度和宽度
innerWidth和innerHeight
获取元素内部的高度和宽度，内部宽高是指加上padding的高度，而不包括border和margin的。
<div style="background:#F00; width:50px; height:50px; top:70px; left:30px; border:30px solid green; margin:10px; padding:13px;"></div>
alert($("div>div").innerWidth());
小练习：
1、 在页面上定义一个宽50高50的红色div，让它自动向右上方移动。
2、 接上题，移动到横向500纵向500的时候，再向上移动。
3、用css方法设置一个宽600px高50px的标题栏，用offset方法设置其浮动位置在页面的顶部，要求当你拖动浮动条的时候，这个标题栏始终在显示区域的最上方。（提示：可以setInterval方法）。
JQuery中的事件绑定
页面载入事件
Ready(function(e){ })，当网页内容全部加载到浏览器中，并且完成dom模型构建之后触发的事件。它与<body>的onload事件作用一样。
事件绑定函数
Bind函数：把指定的事件，绑定到选择器指定的元素上。
$("#littleButton").bind(
"click",
function(){
alert("我是一个按钮");
}
);
绑定仅执行一次的事件
One函数：为选择器指定的html元素绑定一个仅会执行一次的事件，之后这个事件就不会再被触发了。
示例：
$("#littleButton").one("click",function(){
alert("今天星期四");
});
自动触发指定元素的指定事件
trigger()方法：自动触发执行指定元素上的指定事件，而不需要用户手动操作。
$("#littleButton").trigger("click");
取消指定元素上的指定的事件
unbind():取消指定html元素的指定事件的绑定，令其不再生效。（只能取消通过jquery上的bind绑定的事件，html元素上本身的事件无效，比如：onClick）
示例：
$("#littleButton").bind("click",function(){
alert(111);
});
$("#littleButton").unbind("click");
事件委派：给还不存在的元素绑定事件
live()方法
示例：
$(".btn1").live("click",function(){
alert("这是在按钮出现之间绑定的事件");
});
alert(1);
$("body").append("<input type='button' value='被追加的按钮' class='btn1' /> ");
解除live方法委派的事件
die()方法示例：
$(".btn1").live("click",function(){
alert("这是在按钮出现之间绑定的事件");
});
$("body").append("<input type='button' value='被追加的按钮' class='btn1' /> ");
$(".btn1").die("click");
为一个html元素的一个事件切换多个动作
toggle():可以为指定的html元素的指定事件绑定多个会依次切换的函数。比如：
$("#littleButton").toggle(
function(){ alert("你好呀，吃了么？") },
function(){ alert("还没吃？") },
function(){ alert("那赶快回家去吃吧！") },
function(){ alert("你妈喊你回家吃饭") }
);
常用事件
单击Click()
绑定单击事件
$("#littleButton").click(function(){
alert("哎呀");
});
自动触发单击事件，而不需要用户手动点击
$("#littleButton").click();
双击dblclick()
绑定双击事件
$("#littleButton").dblclick(function(){
alert("哎呀");
});
自动触发双击事件，而不需要用户手动点击
$("#littleButton").dblclick();
在文本框中选中文字
select()方法，绑定选中文字时所要执行的函数。
示例：
$("#ttBox").select(function(e){
alert("哎呀，我被选中了。");
});
自动触发在文本框中选中文字的事件，并且自动选中文字：
$("#ttBox").select();
获取焦点
focus()
鼠标悬停
hover()
失去焦点
blur()
鼠标按下
mousedown()是指鼠标按下还没有抬起时触发，并且其函数可以接收到一个事件参数，这个参数中包含当前鼠标的横坐标与纵坐标，示例：
$("#littleButton").mousedown(function(e){
alert("当前按下的位置是x："+e.clientX+"---Y:"+e.clientY);
});
这里得到的是点击位置相对于整个页面的左上角的位置。
鼠标移出时
mouseout()
它的用法和语法与mousedown一样。
鼠标移动时
mousemove()
它的用法和语法与mousedown一样。
松开抬起鼠标键时
mouseup()
它的用法和语法与mousedown一样。
表单提交事件
submit() 绑定表单提交时要执行的动作。
键盘事件
keydown 按下一个键时
keyup 松开抬起一个键时
keyPress 按下并松开一个键时
示例：
$(document).keydown(function(e){
alert("您刚才按下的是:"+e.keyCode);
});
JQuery与javascript中有差异的事件
scroll()当滚动条滑动时所触发的事件
严格的说应该是浏览器窗口中显示的网页的位置发生改变时。
$(document).scroll(function(){
alert($(document).scrollTop());
});
mouseenter()当鼠标进入到元素所占的区域范围内时
与mouseover()，在较简单的情况下我们是看不出这两种事件的区别的，但是当在执行一些动画效果或者其他较复杂的情况下，就会发现。mouseenter()事件只会被执行一次，mouseover()事件会在你的鼠标停留在元素之上的过程中一直重复执行。
mouseleave()当鼠标离开一个元素的显示范围时
它与mouseout()类似，但是它需要与mouseenter()搭配在一起使用的，也就是进入元素范围时用mouseenter()，离开元素时用mouseleave
小练习：
1、 用bind()向页面上的一个按钮添加鼠标移入事件，移入按钮范围时，按钮文字变成“欢迎光临”，移出按钮文字变成“后会有期”。
2、 用toggle()绑定多个函数给一个按钮，就是当你第一次单击这个按钮时，它提示“你为什么要点我”，第二次提示“说了你还点”，第三次提示“你再点一下试试”，第四次提示“好吧，你赢了。”
3、 实现一个做选择题的功能，在页面上有一个P段落和四个单选按钮，当你选择四个单选按钮中的任意一个时，会提示用户是否回答正确。其中的事件绑定必须要用JQuery实现。
4、 设置一个宽600px高50px的标题栏，背景色为橙色，用offset方法设置其浮动位置，要求当拖动页面滚动条时，这个标题栏始终位于当前显示区域的最上方（提示：要求使用scroll()事件）
5、 定义一个长度都是50px的红色div，要求在屏幕任意位置点击鼠标时，这个div立刻移动到当前鼠标点击的位置。
JQuery_动作与效果
基本效果
隐藏一个元素
Hide()方法：
语法：
选择器.hide(速度,fn);
示例：
$("#box1").hide(); //直接隐藏没有任何动画
$("#box1").hide(2000); //在2秒之内逐渐向左上角缩小隐藏
//隐藏过程的动画结束之后，执行这个包含alert的函数
$("#box1").hide(2000, function(){
alert("我隐藏起来了，你看不到");
});
说明：
速度代表隐藏过程的时间，单位毫秒。
Fn代表隐藏动画结束之后自动执行的函数。
显示已经被隐藏的元素
Show()方法
语法：
选择器.show(速度,fn);
说明：
无论是被css的display:none属性隐藏的元素，还是被上面的hide()方法隐藏的对象，都可以使用show()来令其显形。
示例：
$("#box1").show();
$("#box1").show(3000);
$("#box1").show(3000,function(){alert("我又回来了")});
显示或者隐藏一个元素
Toggle
语法：
Toggle(速度,fn)
说明：
如果这个元素是可见的就执行隐藏操作，如果不可见就执行显示操作。
示例：
function hide_show(){
$("#box1").toggle(300,function(){
alert("我来了，又走了");
});
}
<input type="button" onclick="hide_show()" value="hide_show" />
<div style="width:400px; display:none;" id="box1">
<img src="img/aa.jpg" width="400" />
</div>
滑动效果
滑动隐藏一个元素
slideUp()方法：
示例：
$("#box1").slideUp(2000,function(){
alert("图像收起来了");
});
滑动显示一个元素
slideDown()方法：
示例：
$("#box1").slideDown (2000,function(){
alert("图像拉下来了");
});
滑动隐藏或显示一个元素
sildeToggle()方法：
元素可见就滑动隐藏，反之则滑动显示。
function hide_show(){
$("#box1").slideToggle(100,function(){
alert("隐藏则显示，显示则隐藏。");
});
}
<input type="button" onclick="hide_show()" value="hide_show" />
淡入淡出效果
以淡出效果隐藏一个元素
fadeOut()方法
示例：
$("#box1").fadeOut(3000,function(){
alert("我走了");
});
以淡入效果显示一个元素
fadeIn()方法
示例：
$("#box1").fadeIn(3000,function(){
alert("我又来了");
});
改变元素的透明度
fadeTo方法()
在指定的时间内以动画的形式修改一个元素的透明度。
语法：
选择器.fadeTo(速度,透明度,fn);
其中：
透明度是一个1到0之间的小数，代表透明的百分比。
fn是动画完成后执行的代码。
示例：
$("#box1").fadeTo(2000,0.5);
$("#box1").fadeTo(2000,0.5,function(){
alert("变淡了");
});
淡入显示或淡出隐藏
fadeToggle()方法
动画效果
自定义动画
Animate可以通过多种css属性的逐渐变化来实现动画效果。
语法：
选择器.animate({
“css属性名1” : ”属性值1”,
“css属性名2” : ”属性值2”,
…
},动画时长);
作用：
让指定的html元素由目前的css属性开始逐渐向指定的css属性变化，其变化过程会形成一个指定时长的动画。
示例1：
$("#box2").animate({
"width":"500px",
"height":"300px",
"font-size":"100px",
opacity:0.5 //代表透明度
},2000);
示例2:
$("#box2").animate({
"width":"toggle",
"height":"toggle",
opacity:"toggle"
},2000);
支持的属性：
Height/width：值可以为toggle，也在当前属性值与0值之前切换。
Left/right/top/bottom：前提是元素必须是浮动的。
opacity 值可以为toggle，透明度是0到1之间的一个小数。
停止正在运行的动画
选择器.stop();
如果选择器指定的元素正在执行动画，则立即停止动画的执行。
Delay延迟动画或其他方法的执行。
$("#box2").delay(5000).slideUp(2000);
延迟5秒再执行动画
关闭页面上所有动画
$.fx.off=true;
小练习：
1、按照上图制作一个滑动菜单，要求点击标题栏展开其下方的子菜单项，其他菜单栏收起，要求必须有滑动动画效果。按图进行css切图。
2、用Animate制作一个你“点不到我”的按钮，也就是鼠标指向其上时，就会随机移动到其他地方。
提示：获取浏览器显示区域的宽度和高度。
document.documentElement.clientWidth; document.documentElement.clientHeight;
3、制作一个百度弹出登录框，要求点击登录直接在页面以浮入动画弹出一个浮动的登陆框，而且无论滚动条在什么地方，这个登录框始终在屏幕*，点击X 关闭。
4、如下图所示，产品图片可以自动向左滑动，当鼠标点击左右键时，可以向左右移动一条图的位置。用户不操作时，每5秒向左移动一个图片的位置，
5、下拉菜单效果，当鼠标移动到菜单上时，就滑动显示出下拉菜单，并且当鼠标移动到菜单项上时，文字变绿并向后滑动10px;
6