jquery 主要用来为页面添加动态特效（这里不讨论这个），开始使用jquery吧
首先要想使用jquery 就必须引入 query 的基础包（ 215KB ）
115下载地址： http://u.115.com/file/clw81fn7
数据银行： http://dl.dbank.com/c0dla9ty0l
Jquery不分语言， html 中就可以使用，不需要部署项目，更不需要运行 tomcat 后才能访问。
现在，开始用jquery 编写两个网页特效。
特效一：仿苹果官网菜单
观看地址： http://www.kuaileyuandi.com/study/test.html
步骤：首先创建一个html 文件（ dreamweaver 或 myeclipse 均可）
1.引入包：把下载下来的 jquery 包放到你想要的路径下，并添加引用
<script src="jquery-1.5.2.js" type="text/javascript"></script>
也可不下载直接使用网络上的
<script src="http://www.kuaileyuandi.com/js/jquery-1.5.2.js" type="text/javascript"></script>
2. 开始画静态界面, 静态界面就不多说了
<table align="center" class="menu" cellpadding="0" cellspacing="0" width="90%"> <tr>
<td class="menuone" valign="middle" align="center">logo </td><!-- class后面要用到，不能漏掉 -->
<td class="menumiddle" valign="middle" align="center">购买 </td valign="middle">
<td class="menumiddle" valign="middle" align="center">mac</td valign="middle">
<td class="menumiddle" valign="middle" align="center">ipod</td>
<td class="menumiddle" valign="middle" align="center">iphone</td>
<td class="menumiddle" valign="middle" align="center">ipad</td>
<td class="menumiddle" valign="middle" align="center">iTunes</td>
<td class="menumiddle" valign="middle" align="center">志愿服务
</td>
<td class="menuend" id="menuend" valign="middle" align="center"><input class="menutext" type="text"/></td>
</tr>
</table>
3.为菜单添加样式
我们要让他可以改变样式就必须先添加样式：
<style>
td.menuone{
background:url(http://0gielq.bay.livefilestore.com/y1pYjoh4J69IgWCmhHQ3Irq6jcmF8ATK9FcC-63vWT23OS2jOnmn0-H8LtLfHEq-wHr04WRONu9yxZH4c3L7no75zsVJ0ha2TRx/menutool.png);
//图片地址可以修改
height: 36px;//设置宽高
width: 102px;
overflow: hidden;//设置去除多余部分（只显示图片中指定的部分）
}
td.menumiddle{
background:url(http://0gielq.bay.livefilestore.com/y1pYjoh4J69IgWCmhHQ3Irq6jcmF8ATK9FcC-63vWT23OS2jOnmn0-H8LtLfHEq-wHr04WRONu9yxZH4c3L7no75zsVJ0ha2TRx/menutool.png) -115px 0px no-repeat;
//图片地址可以修改， -115px 0px no-repeat; 指定从 115px 的 X 坐标 0px 的 Y 坐标开始
overflow: hidden;//去除多余部分
height: 36px;
width: 102px;
}
td.menumiddleselectd{
background:url(http://0gielq.bay.livefilestore.com/y1pYjoh4J69IgWCmhHQ3Irq6jcmF8ATK9FcC-63vWT23OS2jOnmn0-H8LtLfHEq-wHr04WRONu9yxZH4c3L7no75zsVJ0ha2TRx/menutool.png) -115px -72px no-repeat;
height: 36px; //同上
overflow: hidden;
width: 102px;
}
td.menuend{
background:url(http://public.bay.livefilestore.com/y1pkXLKBfE3Iqxf6-oYWWQMDZ7HJtrvCY4mQbZ3_R_KHm0neMTfWsCQogwvHXZLwc_yx_t-uJb9fQO28jUGCDMoqQ/menutext.png) -10px 0 no-repeat;
height: 36px; //同上
overflow: hidden;
width: 162px;
}
td.menuendselected{
background:url(http://public.bay.livefilestore.com/y1pkXLKBfE3Iqxf6-oYWWQMDZ7HJtrvCY4mQbZ3_R_KHm0neMTfWsCQogwvHXZLwc_yx_t-uJb9fQO28jUGCDMoqQ/menutext.png) -10px -36px no-repeat;
height: 36px; //同上
overflow: hidden;
width: 162px;
}
.menutext{
background:Transparent;//设置 input 样式为透明，这样背景看起来就像是框架了
width:110px;
height:14px;
border:none;//不显示边框
}
</style>
4.添加 jquery 特效
样式设置好后，开始添加鼠标移入移出动态特效
<script type="text/javascript">
$(document).ready(function(){ //jquery开始的固定格式
$('td.menuone').mouseover(function(){ //鼠标移入事件
$(this).css("background","url(http://0gielq.bay.livefilestore.com/y1pYjoh4J69IgWCmhHQ3Irq6jcmF8ATK9FcC-63vWT23OS2jOnmn0-H8LtLfHEq-wHr04WRONu9yxZH4c3L7no75zsVJ0ha2TRx/menutool.png) 0px -72px no-repeat"); //修改 tdmenuone 的样式（这里包括 url ，截取的初始位置）
}).mouseout(function(){ //鼠标的移出事件这里也可以另起一行： $('td.menuone').mouseout
$(this).css("background","url(http://0gielq.bay.livefilestore.com/y1pYjoh4J69IgWCmhHQ3Irq6jcmF8ATK9FcC-63vWT23OS2jOnmn0-H8LtLfHEq-wHr04WRONu9yxZH4c3L7no75zsVJ0ha2TRx/menutool.png) no-repeat");
})
//上面是更变样式的一种写法（直接修改样式内容），下面是另一种方法（修改样式名称，直接换到另一个样式）
$('td.menumiddle').mouseover(function(){ //鼠标移入事件
$(this).removeClass("menumiddle");
$(this).addClass("menumiddleselectd"); //回头看上面的样式
//这里把 menumiddle 样式换成 menumiddleselectd 样式，这两个样式都是之前写好的
}).mouseout(function(){ //同上
$(this).removeClass("menumiddleselectd");
$(this).addClass("menumiddle");
})
$('.menutext').blur(function(){
$('#menuend').removeClass("menuendselected");
$('#menuend').addClass("menuend");
}).focus(function(){
$('#menuend').removeClass("menuend");
$('#menuend').addClass("menuendselected");
})
})
</script>
特效二：文字换行滚动
观看地址： http://www.kuaileyuandi.com/study/test.html
步骤：首先创建一个html 文件（ dreamweaver 或 myeclipse 均可）
1.引入包：把下载下来的 jquery 包放到你想要的路径下，并添加引用
<script src="jquery-1.5.2.js" type="text/javascript"></script>
也可不下载直接使用网络上的
<script src="http://www.kuaileyuandi.com/js/jquery-1.5.2.js" type="text/javascript"></script>2.开始画静态界面 , 静态界面就不多说了
<table align="center" width="80%">
<tr>
<td width="10%">
新闻焦点
</td>
<td width="2%">
|
</td>
<td width="78%">
<DIV id="bigdiv">
<DIV id="midddiv" style="border:none">
<li>Apple1 正式推出 </li>
<li>Apple2 正式推出 </li>
<li>Apple3 正式推出 </li>
<li>Apple1 正式推出 </li>
</DIV>
</DIV>
</td>
<td width="10%">
English
</td>
</tr>
</table>
3.为菜单添加样式
这里添加样式有两个用处：固定高度（滚动是会用到高度），美观。
去掉样式也可以滚动行，只是位置不一定准确
<style>
#bigdiv div {
border: #e6e6e6 1px solid;
padding:0px 10px 0px 10px;
overflow-y:hidden;
line-height: 24px;
height: 24px
}
li{
height:24px;
margin:0;
padding:0;
list-style:none;
}
</style>
4.添加 jquery 特效
<script type="text/javascript">
//function $(id){return document.getElementById(id);}
var anndelay = 500 ;//时间间隔
var anncount = 0; //计数器，为了控制函数执行的次数
var annst = 0; //用于判断是不是第一次执行，和让函数停止
if(!annst){ //判断是不是第一次执行
annst=setTimeout('bigdivScroll()', anndelay); //anndelay（前面定义的时间间隔）后执行'bigdivScroll函数
return; //不能漏掉
}
if(anncount >= 24){ //因为每一行高度为24，css中设定的，所以转完一行顶停留500毫秒
if(document.getElementById("midddiv").scrollTop>=72){ //如果已经第三行转完了
document.getElementById("midddiv").scrollTop = 0; //则把高度置0，重新开始
}
anncount = 0; //计数器重新开始，等待下一个24
annst = setTimeout('bigdivScroll()', anndelay); //anndelay后执行'bigdivScroll函数
}
else{ //如果还没有执行24次，则继续执行每10毫秒高度升高1
document.getElementById("midddiv").scrollTop ++ ;
anncount ++ ;
annst = setTimeout('bigdivScroll()', 10);
}
}
$(document).ready(function(){ //鼠标移入移出时间
$('#bigdiv').mouseover(function(){ //鼠标移入
clearTimeout(annst); //清除annst，滚动条不继续滚动
annst = 0 //置0，这样鼠标移出后还会停顿会儿
}).mouseout(function(){ //鼠标移出
annst = setTimeout('bigdivScroll()', anndelay); //继续执行函数，因为anncount计数器已经记录了转到哪里，所以它会继续之前的滚动
})
bigdivScroll();
})
</script>
1335
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
