Jquery教程

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; //用于判断是不是第一次执行，和让函数停止

    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>

可以下载附件中已经写好的html文件。有什么疑问欢迎留言