我的ASP.NET学习笔记07JQuery基础知识

程序员文章站 2022-06-21 10:26:07

JQuery_1_选择器什么是JQuery JQuery实际上就是一个javascript文件，它是一堆由javascript写好的工具程序，一个被封装好的js工具库。它在js基础之上做了很多的优化，让网页脚本的编写过程更加的便捷高效。 JQuery有很多的版本，但各版本之间的差异都不是太大，基础 ......

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;

上一篇：最近大家都在长途开车返程

下一篇：配三面柔性屏三星Galaxy Note Edge谍照泄露