Jquery教程
<div class="Section0">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;//用于判断是不是第一次执行，和让函数停止
<div class="Section0"> function bigdivScroll() {
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>
页:
[1]