单元7 设计选项卡类网页特效

单元7设计选项卡类网页特效JavaScript+jQuery网页特效设计任务驱动教程（第2版）名校名师精品系列教材人民邮电出版社学会设计选项卡类网页特效正确定义与访问JavaScript的数组对象掌握JavaScriptArray对象的主要属性和方法了解JSON及其正确使用方法教学目标pedagogicalobjectives目录导航任务7-1应用setInterval函数和display属性实现选项卡的手动切换和自动切换任务7-3应用DOM的className和style等属性设计纵向选项卡任务7-5应用仿jQuery的attr()方法设计横向选项卡任务7-6应用JavaScript的push()和jQuery的animate()等方法设计横向选项

卡与图文滚动特效任务7-2应用jQuery的index()和find()等方法实现横向选项卡任务7-4应用DOM的className和style等属性设计横向选项卡任务7-7应用DOM的getElementById和className等属性设计横向选项卡任务7-8应用jQuery的mouseover()和show()等方法设计横向选项卡任务7-1应用setInterval函数和display属性实现选项卡的手动切换和自动切换网页0701.html中的选项卡如图所示。单击选项卡标题能实现手动切换，同时该选项卡还能自动切换。任务7-1应用setInterval函数和display属性实现选项卡的手动切换和自动切换网页0701.html中的选项卡对应的HTML代码如表所示。序号程序代码0102030405060708091011121314151617181920212223<divclass="homepage_prefer"><h2><spanid="imgproduct1"onmouseover="showproductdiv(1);"style="display:none;"><b>本周推荐</b></span><spanid="showproduct1"class="other"onmouseover="productDivStop();"style="display:block;"onmouseout="productDivPlay(1);"><bclass="nonce">本周推荐</b></span><spanid="imgproduct2"onmouseover="showproductdiv(2);"style="display:block;"><b>新鲜货</b></span><spanid="showproduct2"onmouseover="productDivStop();"style="display:none;"onmouseout="productDivPlay(2);"><bclass="nonce">新鲜货</b></span><spanid="imgproduct3"onmouseover="showproductdiv(3);"style="display:block;"><b>热卖商品</b></span><spanid="showproduct3"onmouseover="productDivStop();"style="display:none;"onmouseout="productDivPlay(3);"><bclass="nonce">热卖商品</b></span><spanid="imgproduct4"onmouseover="showproductdiv(4);"style="display:block;"><b>新书上架</b></span><spanid="showproduct4"onmouseover="productDivStop();"style="display:none;"onmouseout="productDivPlay(4);"><bclass="nonce">新书上架</b></span><divclass="clear"></div></h2><divclass="homepage_prefer_list"id="_i1"onmouseover="productDivStop();"onmouseout="productDivPlay(1);"style="display:block;"><ul>任务7-1应用setInterval函数和display属性实现选项卡的手动切换和自动切换序号程序代码242526272829303132333435363738394041<li>……</li><li>……</li>……</ul></div><divclass="homepage_prefer_list"id="_i2"onmouseover="productDivStop();"style="display:none;"onmouseout="productDivPlay(2);"><ul>……</ul></div><divclass="homepage_prefer_list"id="_i3"onmouseover="productDivStop();"style="display:none;"onmouseout="productDivPlay(3);"><ul>……</ul></div><divclass="homepage_prefer_list"id="_i4"onmouseover="productDivStop();"style="display:none;"onmouseout="productDivPlay(4);"><ul>……</ul></div></div>任务7-1应用setInterval函数和display属性实现选项卡的手动切换和自动切换网页0701.html中实现选项卡切换的JavaScript代码如表所示。序号程序代码0102030405060708091011121314151617181920<scripttype="text/javascript">function$(id){returndocument.getElementById(id);}//手动切换varplaynum=1;functionshowproductdiv(id){if(id==0){id=playnum;}for(i=1;i<=4;i++){if(i==id){$("showproduct"+id).style.display="block";$("imgproduct"+id).style.display="none";$("_i"+id).style.display="block";}else{$("showproduct"+i).style.display="none";$("imgproduct"+i).style.display="block";$("_i"+i).style.display="none";}}if(playnum==4){playnum=1;}else{playnum++;}任务7-1应用setInterval函数和display属性实现选项卡的手动切换和自动切换序号程序代码21222324252627282930313233}//自动切换varmyplay;functionproductDivPlay(id){if(id==""){id=0;}else{playnum=id;}myplay=setInterval("showproductdiv(0)",2000);}functionproductDivStop(){clearInterval(myplay);}productDivPlay(0);</script>目录导航任务7-1应用setInterval函数和display属性实现选项卡的手动切换和自动切换任务7-3应用DOM的className和style等属性设计纵向选项卡任务7-5应用仿jQuery的attr()方法设计横向选项卡任务7-6应用JavaScript的push()和jQuery的animate()等方法设计横向选项

卡与图文滚动特效任务7-2应用jQuery的index()和find()等方法实现横向选项卡任务7-4应用DOM的className和style等属性设计横向选项卡任务7-7应用DOM的getElementById和className等属性设计横向选项卡任务7-8应用jQuery的mouseover()和show()等方法设计横向选项卡任务7-2应用jQuery的index()和find()等方法实现横向选项卡网页0702.htm中的横向选项卡如图所示，单击选项卡标题可进行选项卡的切换。网页0702.htm中的横向选项卡对应的HTML代码如表所示。序号程序代码010203040506070809101112<divid="buyact"class="row790"><divclass="thead"><h2>促销在进行……</h2><ulclass="tab0"><liclass="index"><em>特价宝贝</em></li><li><em>新品上架</em></li><li><em>今日必买</em></li><li><em>创意极品</em></li></ul></div><divclass="tbody"><divclass="block">序号程序代码13141516171819202122<divclass="tInfo">……</div><divclass="tInfo">……</div><divclass="tInfo">……</div><divclass="tInfo">……</div></div><divclass="none">……</div><divclass="none">……</div><divclass="none">……</div></div></div>任务7-2应用jQuery的index()和find()等方法实现横向选项卡网页0702.htm中实现横向选项卡的JavaScript代码如表所示。序号程序代码0102030405060708091011121314151617<scripttype="text/javascript">$(document).ready(function(){tab();});functiontab(){var_obj=$("#buyact").find(".tab0>li");//单击$(_obj).click(function(){var_ID=$(_obj).index(this);$(_obj).removeClass();$(this).addClass("index");$("#buyact").find(".tbody>div").removeClass().addClass("none");$("#buyact").find(".tbody>div:eq("+_ID+")").removeClass().addClass("block");});}</script>7.1JavaScript的数组对象数组类似于变量，但不同之处在于数组可以把多个值和表达式放在一个名称之下。把多个值存放在一个变量中的做法造就了数组的强大。可存放在JavaScript数组中的数据的类型和数量都没有限制，在脚本中声明数组之后，就可以随时访问数组中任何项的任何数据。虽然数组可以保存JavaScript的任何数据类型，包括其他数组，但最常见的做法是，把相类似的数据存储在同一个数组中，并给它指定一个与数组项有关联意思的名称。7.1JavaScript的数组对象关键字new用来创建数组对象。下面的代码定义了一个名为color的数组对象。01OPTION定义数组varcolor=newArray();有多种向数组赋值的方法，可以添加任意多的值，就像可以定义需要的任意多的变量一样。varcolor=newArray();color[0]="red";color[1]="yellow";color[2]="blue";方法一：varcolor=newArray("red","yellow","blue");方法二：varcolor=["red","yellow","blue"];方法三：对于数组，还有“关联数组”这样一个特别的对象。有时会发现定义对象如下。varcar=newArray();car['color']='red';car['wheels']=4;car['age']=2;7.1JavaScript的数组对象通过指定数组名以及索引号，就可以访问某个特定的元素。因为数组下标是基于零的，所以第1个元素是[0]，第2个元素是[1]，以此类推。访问数组document.write(color[0])如果需要修改已有数组中的值，只要向指定下标号添加一个新值即可。例如：02OPTION输出的值是：redcolor[0]="green";7.1JavaScript的数组对象JavaScriptArray对象常用的属性是length，用于设置或返回数组中元素的数目。JavaScriptArray对象的方法较多，如表所示。JavaScriptArray对象的主要属性和方法03OPTION方法名称功能说明concat()连接两个或更多的数组，并返回一个新数组join()将数组的所有元素组成一个字符串，元素通过指定的分隔符进行分隔，如果省略分隔符，则默认用逗号作为分隔符pop()删除并返回数组的最后一个元素，如果数组为空，则返回undefinedpush()向数组的末尾添加一个或更多元素，并返回新的长度reverse()将数组中元素的顺序反序shift()删除并返回数组的第1个元素，如果数组为空，则返回undefined7.1JavaScript的数组对象方法名称功能说明slice()从某个已有的数组返回选定的元素sort()对数组的元素进行排序splice()删除元素，并向数组添加新元素toSource()返回该对象的源代码toString()把数组转换为字符串，并返回结果toLocaleString()把数组转换为本地数组，并返回结果unshift()向数组的开头添加一个或更多元素，并返回新的长度valueOf()返回数组对象的原始值7.2JSON及其使用JavaScript对象表示法（JavaScriptObjectNotation，JSON）是存储和交换文本信息的数据格式，类似于XML，但JSON比XML更小、更快，更易于解析。道格拉斯·克洛克福德（DouglasCrockford）发明了JSON数据格式来存储数据，可以使用原生的JavaScript方法来存储复杂的数据而不需要进行任何额外的转换。JSON是JavaScript中对象的字面量，是对象的表示方法，通过使用JSON，可以减少中间变量，使代码的结构更加清晰，也更加直观。7.2JSON及其使用可以用下面的语句声明一个对象，同时创建属性。varbook={name:"网页特效设计",author:"丁一",publishing:"人民邮电出版社",price:38.8,edition:2}JSON的语法格式是使用“{”和“}”表示一个对象，使用“属性名称:属性值”的格式来创建属性，多个属性用“,”分隔。对象属性还可以是一个对象或者数组。使用JSON格式的对象创建完成后，就可以用“.”或者索引的形式访问属性。JSON的另一个应用场景是：当一个函数拥有多个返回值时，在传统的面向对象语言中，用户需要组织一个对象，然后返回，而JavaScript则完全不需要这么麻烦。7.2JSON及其使用在实际的编程中，用户通常需要遍历一个JavaScript对象，但用户事先对对象的内容一无所知。怎么做呢？JavaScript提供了for...in形式的语法结构。for(variteminjson){//item为键//json[item]为值};这种模式十分有用，例如，在实际的Web应用中，对一个页面元素需要设置一些属性，这些属性是事先不知道的。varstyle={border:"1pxsolid#ccc",color:"blue"};目录导航任务7-1应用setInterval函数和display属性实现选项卡的手动切换和自动切换任务7-3应用DOM的className和style等属性设计纵向选项卡任务7-5应用仿jQuery的attr()方法设计横向选项卡任务7-6应用JavaScript的push()和jQuery的animate()等方法设计横向选项

卡与图文滚动特效任务7-2应用jQuery的index()和find()等方法实现横向选项卡任务7-4应用DOM的className和style等属性设计横向选项卡任务7-7应用DOM的getElementById和className等属性设计横向选项卡任务7-8应用jQuery的mouseover()和show()等方法设计横向选项卡任务7-3应用DOM的className和style等属性设计纵向选项卡网页0703.html中的纵向选项卡如图所示，鼠标指针指向选项卡标题时自动切换选项卡。【任务描述】自定义函数tab_live()实现选项卡的切换，该函数只有1个参数，用于传送鼠标指针指向的选项卡位置编号，分别为0、1、2。该函数通过网页元素的className属性设置样式类，通过设置display属性值为block或none，实现选项卡内容的显示或隐藏。【思路探析】任务7-3应用DOM的className和style等属性设计纵向选项卡网页0703.html中的纵向选项卡对应的HTML代码如表所示。【特效实现】序号程序代码010203040506070809101112131415161718192021<divclass="main960box_hr12"></div><divclass="main960"id="liveshow_title"></div><divclass="main960"id="liveshow"><divclass="float_l"id="liveshow_tabs"><divclass="bjoff"onmouseover="tab_live(0)"></div><divclass="shoff"onmouseover="tab_live(1)"></div><divclass="gzon"onmouseover="tab_live(2)"></div></div><divid="liveshowconts1"><ulclass="liveshow_listline_h_26font_s_14"style="display:none;"><li>……</li><li>……</li>……</ul><ulclass="liveshow_listline_h_26font_s_14"style="display:none;">……</ul><ulclass="liveshow_listline_h_26font_s_14"style="display:none;">……</ul><dlclass="book_online">任务7-3应用DOM的className和style等属性设计纵向选项卡序号程序代码222324252627282930<dt><spanclass="float_r"><ahref=""target="_blank">更多>></a></span><spanclass="font_w_bd_redfont_s_14">热点演出</span></dt><ddclass="padding_t10">……</dd></dl></div><divclass="clr"></div></div>网页0703.html中实现纵向选项卡的JavaScript代码如表所示。序号程序代码010203040506070809101112<script>functiontab_live(n){varm_n=document.getElementById("liveshow_tabs").getElementsByTagName("div");varc_n=document.getElementById("liveshowconts1").getElementsByTagName("ul");if(n==0){m_n[0].className="bjon";m_n[1].className="shoff";m_n[2].className="gzoff";c_n[0].style.display="block";c_n[1].style.display="none";c_n[2].style.display="none";}任务7-3应用DOM的className和style等属性设计纵向选项卡序号程序代码131415161718192021222324252627282930if(n==1){m_n[0].className="bjoff";m_n[1].className="shon";m_n[2].className="gzoff";c_n[0].style.display="none";c_n[1].style.display="block";c_n[2].style.display="none";}if(n==2){m_n[0].className="bjoff";m_n[1].className="shoff";m_n[2].className="gzon";c_n[0].style.display="none";c_n[1].style.display="none";c_n[2].style.display="block";}}</script>目录导航任务7-1应用setInterval函数和display属性实现选项卡的手动切换和自动切换任务7-3应用DOM的className和style等属性设计纵向选项卡任务7-5应用仿jQuery的attr()方法设计横向选项卡任务7-6应用JavaScript的push()和jQuery的animate()等方法设计横向选项

卡与图文滚动特效任务7-2应用jQuery的index()和find()等方法实现横向选项卡任务7-4应用DOM的className和style等属性设计横向选项卡任务7-7应用DOM的getElementById和className等属性设计横向选项卡任务7-8应用jQuery的mouseover()和show()等方法设计横向选项卡任务7-4应用DOM的className和style等属性设计横向选项卡网页0704.html中的横向选项卡如图所示，鼠标指针指向选项卡标题时实现选项卡的切换。【任务描述】自定义函数getObject()，该函数根据不同类型浏览器的DOM属性差异调用合适的方法，返回网页元素。自定义函数tab_fun()，该函数有4个参数，分别为元素顺序、元素总数、ID标识和类名称。该函数通过网页元素的className属性设置样式类，通过设置display属性值为block或none，实现选项卡内容的显示或隐藏。【思路探析】任务7-4应用DOM的className和style等属性设计横向选项卡网页0704.html中的横向选项卡主要应用的CSS代码如表所示。【特效实现】序号程序代码0102030405060708091011121314.tab_ul{background:url(images/main_bg.jpg)no-repeat0px-104px;overflow:hidden;width:772px;position:relative}.tab_ulli{border-right:#8fa9c21pxsolid;display:inline;float:left;cursor:pointer;color:#039;line-height:27px;序号程序代码1516171819202122232425262728border-bottom:#8fa9c21pxsolid;height:27px;padding:0px18px0px18px;}.tab_ulli.the_2{font-weight:bold;background:#fff;color:#333;border-bottom:#fff1pxsolid;position:relative;}.last_ul{height:301px}任务7-4应用DOM的className和style等属性设计横向选项卡网页0704.html中的横向选项卡对应的HTML代码如表所示。序号程序代码0102030405060708091011121314151617181920212223<divclass="indexright_last"><ulclass="tab_ul"><liclass="the_2"id="tab_b1"onmouseover="tab_fun('1','7','tab_b','the_2')"><ahref="">最新驱动</a></li><liid="tab_b2"onmouseover="tab_fun('2','7','tab_b','the_2')"><ahref="">硬件驱动</a></li><liid="tab_b3"onmouseover="tab_fun('3','7','tab_b','the_2')"><ahref="">笔记本驱动</a></li><liid="tab_b4"onmouseover="tab_fun('4','7','tab_b','the_2')"><ahref="">声卡驱动</a></li><liid="tab_b5"onmouseover="tab_fun('5','7','tab_b','the_2')"><ahref="">办公驱动</a></li><liid="tab_b6"onmouseover="tab_fun('6','7','tab_b','the_2')"><ahref="">数码驱动</a></li><liid="tab_b7"onmouseover="tab_fun('7','7','tab_b','the_2')"><ahref="">手机驱动</a></li></ul><divclass="last_ul"id="c_tab_b1"style="display:block"><ulclass="last_ul1">……</ul><ulclass="last_ul1">……</ul></div><divclass="last_ul"id="c_tab_b2"style="display:none"><ulclass="last_ul1">……</ul>任务7-4应用DOM的className和style等属性设计横向选项卡序号程序代码2425262728293031323334353637383940414243444546<ulclass="last_ul1">……</ul></div><divclass="last_ul"id="c_tab_b3"style="display:none"><ulclass="last_ul1">……</ul><ulclass="last_ul1">……</ul></div><divclass="last_ul"id="c_tab_b4"style="display:none"><ulclass="last_ul1">……</ul><ulclass="last_ul1">……</ul></div><divclass="last_ul"id="c_tab_b5"style="display:none"><ulclass="last_ul1">……</ul><ulclass="last_ul1">……</ul></div><divclass="last_ul"id="c_tab_b6"style="display:none"><ulclass="last_ul1">……</ul><ulclass="last_ul1">……</ul></div><divclass="last_ul"id="c_tab_b7"style="display:none"><ulclass="last_ul1">……</ul><ulclass="last_ul1">……</ul></div></div>任务7-4应用DOM的className和style等属性设计横向选项卡序号程序代码010203040506070809101112131415161718192021222324252627<scripttype="text/javascript">functiongetObject(objectId){if(document.getElementById&&document.getElementById(objectId)){//W3CDOMreturndocument.getElementById(objectId);}elseif(document.all&&document.all(objectId)){//MSIE4DOMreturndocument.all(objectId);}elseif(document.layers&&document.layers[objectId]){//NN4DOMreturndocument.layers[objectId];}else{returnfalse;}}//通用TAB切换函数（元素顺序，元素总数，ID标识，类名称）functiontab_fun(ord,num,cname,nowstyle){num++;for(i=1;i<num;i++){if(ord==i){getObject(cname+i).className=nowstyle;getObject('c_'+cname+i).style.display="block";}else{getObject(cname+i).className="";getObject('c_'+cname+i).style.display="none";}}}</script>网页0704.html中实现横向选项卡对应的JavaScript代码如表所示。目录导航任务7-1应用setInterval函数和display属性实现选项卡的手动切换和自动切换任务7-3应用DOM的className和style等属性设计纵向选项卡任务7-5应用仿jQuery的attr()方法设计横向选项卡任务7-6应用JavaScript的push()和jQuery的animate()等方法设计横向选项

卡与图文滚动特效任务7-2应用jQuery的index()和find()等方法实现横向选项卡任务7-4应用DOM的className和style等属性设计横向选项卡任务7-7应用DOM的getElementById和className等属性设计横向选项卡任务7-8应用jQuery的mouseover()和show()等方法设计横向选项卡任务7-5应用仿jQuery的attr()方法设计横向选项卡网页0705.html中的横向选项卡如图所示，单击选项卡标题即可切换选项卡。【任务描述】仿照jQuery的attr()方法自定义函数attr()，该函数用于获取和设置网页元素属性的值。调用自定义函数attr()分别获取titTag、conTag、maxNum和curNum等属性的值。通过设置网页元素的className属性的值，控制选项卡的显示或隐藏，同时设置选项卡标题的背景。调用自定义函数attr()，设置当前被选中选项卡的属性，即显示被选中选项卡对应的网页内容。【思路探析】任务7-5应用仿jQuery的attr()方法设计横向选项卡网页0705.html中的横向选项卡主要应用的CSS代码如表所示。【特效实现】序号程序代码0102030405060708091011121314151617181920212223.shopDesc.tit{width:760px;height:25px;float:left;background:url(../images/line_grp.gif)repeat-x0px24px;}.shopDesc.tith3{width:100px;height:25px;float:left;line-height:25px;font-size:12px;text-align:center;margin-right:5px;cursor:default;}.shopDesc.tith3.on{color:#535353;background:url(../images/shop_v.gif)no-repeat-0px-100px;}.shopDesc.tith3.of{序号程序代码24252627282930313233343536373839404142434445464748color:#464646;background:url(../images/shop_v.gif)no-repeat-0px-125px;font-weight:normal;}.shopDesc.con{width:738px;height:auto;float:left;padding:10px;border-top:1pxnone#cdcdcd;font-size:12px;border-right:1pxsolid#cdcdcd;border-bottom:1pxsolid#cdcdcd;border-left:1pxsolid#cdcdcd;}.shopDesc.con.of{display:none;}.shopDesc.con.on{width:708px;height:auto;float:left;padding-left:20px;}任务7-5应用仿jQuery的attr()方法设计横向选项卡网页0705.html中横向选项卡对应的HTML代码如表所示。序号程序代码0102030405060708091011121314151617181920212223<divclass="fullCell"><divclass="mstDesc"><h1style="padding:10px;">苹果iPhoneXS图赏</h1><divid="gdsDescInfos"class="shopDesc"titTag="tab"conTag="tbl"maxNum="6"curNum="1"><divclass="tit"><h3id="tab1"class="on"onclick="switchtab('gdsDescInfos',1);">外观效果图1</h3><h3id="tab2"class="of"onclick="switchtab('gdsDescInfos',2);">外观效果图2</h3><h3id="tab3"class="of"onclick="switchtab('gdsDescInfos',3);">外观效果图3</h3><h3id="tab4"class="of"onclick="switchtab('gdsDescInfos',4);">外观效果图4</h3><h3id="tab5"class="of"onclick="switchtab('gdsDescInfos',5);">外观效果图5</h3></div><divclass="con"><divid="tbl1"class="on"style="padding:0px;width:758px;"><imgheight="460"alt=""width="700"src="images/070501.jpg"/></div><divid="tbl2"class="of"><imgheight="460"alt=""width="700"src="images/070502.jpg"/></div><divid="tbl3"class="of"><imgheight="460"alt=""width="700"src="images/070503.jpg"/></div><divid="tbl4"class="of"><imgheight="460"alt=""width="700"src="images/070504.jpg"/>任务7-5应用仿jQuery的attr()方法设计横向选项卡序号程序代码2425262728293031</div><divid="tbl5"class="of"><imgheight="460"alt=""width="700"src="images/070505.jpg"/></div></div></div></div></div>网页0705.html中实现横向选项卡的JavaScript代码如表所示。序号程序代码0102030405060708091011121314<scripttype="text/javascript">functionid(name){returndocument.getElementById(name);};//获取和设置网页元素属性的值functionattr(elem,name,value){if(!name||name.constructor!=String)return‘’;name={'for':'htmlFor','class':'className'}[name]||name;if(typeof(value)!='undefined'){elem[name]=value;if(elem.setAttribute)elem.setAttribute(name,value);}elseif(value==‘’)elem.removeAttribute(name);returnelem[name]||elem.getAttribute(name)||'';};任务7-5应用仿jQuery的attr()方法设计横向选项卡序号程序代码15161718192021222324252627282930313233343536373839functionswitchtab(strObjName,intClkNum){varobjName=id(strObjName);if(!objName)returnfalse;varstrTitTag=attr(objName,"titTag");varstrConTag=attr(objName,"conTag");varintMaxNum=parseInt(attr(objName,"maxNum"));varintCurNum=parseInt(attr(objName,"curNum"));if(intClkNum==intCurNum)returnfalse;varobjTit,objCon;for(vari=1;i<=intMaxNum;i++){try{objTit=id(strTitTag+i.toString());objCon=id(strConTag+i.toString());if(i==intClkNum){objTit.className="on";objCon.className="on";}else{objTit.className="of";objCon.className="of";};}catch(e){}};attr(objName,"curNum",intClkNum);};</script>目录导航任务7-1应用setInterval函数和display属性实现选项卡的手动切换和自动切换任务7-3应用DOM的className和style等属性设计纵向选项卡任务7-5应用仿jQuery的attr()方法设计横向选项卡任务7-6应用JavaScript的push()和jQuery的animate()等方法设计横向选项

卡与图文滚动特效任务7-2应用jQuery的index()和find()等方法实现横向选项卡任务7-4应用DOM的className和style等属性设计横向选项卡任务7-7应用DOM的getElementById和className等属性设计横向选项卡任务7-8应用jQuery的mouseover()和show()等方法设计横向选项卡任务7-6应用JavaScript的push()和jQuery的animate()等方法设计横向

选项卡与图文滚动特效网页0706.html中的选项卡如图所示，当鼠标指针指向选项卡标题时可以切换选项卡，单击选项卡标题下方左侧的按钮时可以向左滚动下方图文，单击右侧的按钮可以向右滚动下方的图文。【任务描述】自定义函数upMove()用于实现向左滚动图文内容，downMove()用于实现向右滚动图文内容，自定义函数changeTab()用于实现切换选项卡。设置项目列表区域（即图文滚动区域）的宽度为列表项的数量乘以193。应用jQuery的animate()方法自定义动画，应用scrollLeft()方法设置或返回匹配元素相对滚动条左侧的偏移。应用JavaScript的getElementById()和getElementsByTagName()方法获取指定的网页元素。应用JavaScript的push()方法将<div>元素添加到数组中。当鼠标指针指向选项卡标题时，通过className属性设置该选项卡标题的样式类，通过设置display属性值为block或none，实现选项卡内容的显示或隐藏。【思路探析】任务7-6应用JavaScript的push()和jQuery的animate()等方法设计横向

选项卡与图文滚动特效网页0706.html中选项卡主要应用的CSS代码如表所示。【特效实现】序号程序代码010203040506070809.m2yw_piclistulli{background:url(images/m2libg.jpg)no-repeatscrollcentertoptransparent;float:left;height:150px;margin-right:18px;padding:1px1px0;text-align:center;width:173px;}序号程序代码101112131415161718.m2yw_piclistulliimg{display:block;margin-bottom:8px;background:#f93;height:116px;width:173px;line-height:116px;color:#fff;}网页0706.html中选项卡及图文内容对应的HTML代码如表所示。序号程序代码0102030405060708<div><divclass="m2yw_right"><divclass="m2yw_tab"><ulid="tab2"><liclass="m2yw_cutli"onmousemove="changeTab(2,1)">网页模板</li><lionmousemove="changeTab(2,2)">平面设计</li><lionmousemove="changeTab(2,3)">网页特效</li><lionmousemove="changeTab(2,4)">酷站欣赏</li>任务7-6应用JavaScript的push()和jQuery的animate()等方法设计横向

选项卡与图文滚动特效序号程序代码0910111213141516171819202122232425262728293031323334<lionmousemove="changeTab(2,5)">动画酷站</li><lionmousemove="changeTab(2,6)">网页模板</li><lionmousemove="changeTab(2,7)">酷站欣赏</li></ul></div><divid="tablist2"><divclass="m2yw_pic"><divonclick="upMove(this);returnfalse"class="m2yw_btnl"><imgwidth="16"height="114"src="images/m2btn3.jpg"/></div><divclass="m2yw_piclist"><ulclass="m2yw_posul"><li>……</li>