新人求助,请高人帮我看看这个网页的javascript一个该怎么写?
本人新手+小白一个,这个是一新来老师布置的作业,根本就是超过我们这群小白的阶段了啊,这个javascript是实在写不出来了,请各位大大参照着原来的样式帮我补全(or修改)一下吧,小弟感激不尽(要达到的效果就是苹果官网iPod那页上的,点击“iTunes 以及更多”图片会向左滑出,点击“产品”会滑回来的效果),还有要src引用的js文件应该些什么啊?各位大大帮我看看这个能用不,不能用的话应该改成什么样子?下面是我写的全部代码程序代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. xmlns="http://www. http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{margin:0; padding:0;/*重置页面上所有的元素的内边距和外边距都为0*/ list-style:none;} body{background:#efefef;/*设置背景颜色*/ position:relative; height:100%;/*设置页面内部件高度和窗口等高*/} img{border:none;/*设置边框*/ display:block;/*生成的框将显示为块级元素,此元素前后会带有换行符*/} li{list-style:none/*设置所有的列表属性*/} .page{ -webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 3px; -moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px; box-shadow: rgba(0,0,0,0.3) 0 1px 3px;/*以上三项为设置块的阴影*/ background:#FFFFFF;/*设置content区域的背景颜色*/ border-color:#E5E5E5 #DBDBDB #D2D2D2;/*设置四条边框颜色*/ border-style:solid;/*将边框样式设置为实线型*/ border-width:1px;/*设置边框宽度*/ margin:5px auto 0;/*设置上边距为5px,下边距为0.左右边距自动*/ width:980px;/*设置该区域的宽度*/} .body{overflow:hidden; position:relative; width:820px; z-index:0;/*设置使更高堆叠顺序的元素处于堆叠顺序较低的元素的前面*/ height:158px; margin:0 70px;/*设置上下边距为0.左右边距为70px*/ } .body_head{ width:1680px;} .body_head li{ width:140px; float:left;/*设置元素向左浮动*/ text-align:center;/*设置文字居中*/} .body a{ text-decoration:none;/*设置文本为默认格式*/ font:12px/18px "微软雅黑",Verdana, Geneva, sans-serif; color:#999999; background:#FFFFFF; } .body_head li a:hover{color:#333333;}/*定义当有鼠标悬停在链接上链接的颜色*/ .body_foot{height:30px; text-align:center; background:#ffffff; overflow:hidden; background:url(img/nav_bg.png) no-repeat 0 0;/*背景图片不循环显示,定位在xy坐标的(0,0)位置上*/ boeder-buttom:1px solid #ebebeb;/*将边框设置的属性设置到一个声明中*/ position:relative; } .arrow{ background:url(img/caret_active.gif) no-repeat scroll 0 0;/*背景图像会随着页面其余部分的滚动而移动*/ display:block;/*生成的框将显示为块级元素,此元素前后会带有换行符*/ height:8px; margin:0 0 -8px -7px;/*上外边距为0,右外边距为0,下外边距为-8px,左外边距为-7px*/ position:absolute;/*生成绝对定位的元素*/ width:15px;} .body_foot a{ display:inline-block;/*设置生成框的类型为行内块元素*/ margin:0 15px;/*上下边距为0.左右边距未15px*/ padding:8px 0 6px;/*上边距为8px,左左右边距为0,下边距为6px*/ cursor:pointer;/*设定光标类型为手状*/ text-shadow:0 1px 0 #FFFFFF;} .body_foot .show{ cursor:default; color:#000000; } .body_foot a:hover{color:#00000;} .footer{ height:36px; line-height:26px; text-align:center; position:fixed; bottom:0; width:100%;} .footer{color:#777777; font-size:16px;} .footer a:hover{color:#555;} .header{height:27px; width:980px; overflow:hidden; margin:0 auto;} .header .left{float:left} .header .right{float:right} .header a{line-height:36px; color:#777777;} .footer a {color:#555555;} .body a:hover{color:#555555;} a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text-decoration:underline;}/*以上三行为去除所有链接下的下划线*/ </style> <script type="text/javascript" language="javascript" src="ntcsoft.js"> window.onload = function(){ var oDivs=document.getElementsByTagName('*'); for(var i=0;i<oDivs.length;i++){ oDivs[i].style.left=oDivs[i].offsetLeft+"px"; oDivs[i].style.top=oDivs[i].offsetTop+"px"; } for(var i=0;i<oDivs.length;i++){ oDivs[i].style.position="absolute"; } $("iTunes and more").onclick=function(){ var i=0; mvTurner=setInterval(function() ntcMove(oDivs[i],"elasticEaseOut",1,0,300,100); i++; },1200) } var oDivs = document.getElementsByTagName("li"); for(var i=0;i<oDivs.length;i++){ oDivs[i].style.left=oDivs[i].offsetLeft+"px"; oDivs[i].style.top=oDivs{i}.offsetTop="px"; } for(var i=0;i<oDivs.length;i++){ oDivs[i].style.position="absolute"; } oNavAns[1].onclick=function(){ var i=0; var mvTimer=setInterval(function() { if(i<oDivs.length) { ntcMove(oDivs[i],"elasticEaseOut",1,0,-820,60); i++; }else{ clearInterval(mvTimer); } },70) } ntcMove($('arrow'),"elasticEaseOut",1,0,110,60); setTimeout(function(){ var i=oDivs.length/2; var mvTimer=setInterval(function() { if(i<oDivs.length) {ntcMove(oDivs[i],"elasticEaseOut",1,0,-820,60); i++; }slse{ clearInterval(mvTimer); } },70); },800) } </script> </head> <body> <div class="header"> <a href="#" target="_blank" class="left"></a> <a href="#" target="_blank" class="right">联系我们</a> </div> <div id="content" class="page"> <div class="body"> <ul class="body_head"> <li><a href="#"><img src="img/1.jpg" alt="iPod shuffle"/>iPod shuffle</a></li> <li><a href="#"><img src="img/2.jpg" alt="iPod nano"/>iPod nano</a></li> <li><a href="#"><img src="img/3.jpg" alt="iPod classic"/>iPod classic</a></li> <li><a href="#"><img src="img/4.jpg" alt="iPod touch"/>iPod touch</a></li> <li><a href="#"><img src="img/5.jpg" alt="Apple TV"/>Apple TV</a></li> <li><a href="#"><img src="img/6.jpg" alt="Accessories"/>Accessories</a></li> <li><a href="#"><img src="img/7.jpg" alt="Download iTunes 10"/>Download iTunes 10</a></li> <li><a href="#"><img src="img/8.jpg" alt="iTunes Gift Cards"/>iTunes Gift Cards</a></li> <li><a href="#"><img src="img/9.jpg" alt="Nike + iPod"/>Nike + iPod</a></li> <li><a href="#"><img src="img/10.jpg" alt="(PRODUCT) RED"/>(PRODUCT) RED</a></li> <li><a href="#"><img src="img/11.jpg" alt="MobileMe"/>MobileMe</a></li> <li><a href="#"><img src="img/12.jpg" alt="In-Ear Headphones"/>In-Ear Headphones</a></li> </ul> </div> <div class="body_foot"> <span style="left:424px" class="arrow"></span> <a class="show">Products</a> <a>iTunes and more</a> </div> </div> <h2 class="footer"><a href="#" target="_blank"> Powered By MrZhou</a></h2> </body> </html>[local]2[/local]