javascript 求助 [复制链接]

chocho　楼主

高级会员 

帖子: 113
体力: 568
威望: 0
居住地: 湖南省邵阳市

发表于 2011-12-19 10:49:18 |显示全部楼层

这是我坐的一个相册列表的东东我是菜鸟就看了《javascriptDOM编程艺术》这本书写了个相册列表滚动的效果求帮我看看一共3个问题尽量详细非常感谢：

1.代码肯定很多不规范求指教
2.兼容性问题在火狐里不能动运行不好
3.当我连续按按钮的时候最后列表停下的位置不对了（应该是当我按第二次后他得到的原始位置是我按下时的而不是第一次按下的目的位置这里的位置是ul的top）

:) :) :)

代码说明：1.moveElement函数是动画效果有四个参数第一个是要移动的元素的id ；二个是移动元素的left；这里始终是0 三个是要移动元素的top；
3个是移动速度。
2.prepareSlideshow是计算要提供给上面那个函数的参数这里主要是计算top；另外还改变在不同情况下两个按钮的样式。他中间包括onclick buttonStyle两个函数
3.addLoadEvent 这个就不用说了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link href="style/rest.css" type="text/css" rel="stylesheet"/>
<script>
function addLoadEvent(func){
var oldonload=window.onload;
if (typeof window.onload !='function'){
window.onload=func;
}else{
  window.onload=function(){
  oldonload();
  func();
  }
  }
  }
  
  
  
  
    /////////调整位置
  
  
  
  ///elementID,要改变的元素的id
  //final_x,目的地的left
  //final_y,目的地的top
  //interval,停顿时间 即速度
	function moveElement(elementID,final_x,final_y,interval){
	
	// 确保浏览器支持DOM 
	if (!document.getElementById) return false;
	if (!document.getElementById(elementID)) return false;
	
	// 移动位置的计算与赋值
	var elem=document.getElementById(elementID);
	//把movement设置成elem的属性
	if (elem.movement){
	 clearTimeout(elem.movement);
	 }
	 //移动
	 if (!elem.style.left){
	 elem.style.left="0px";
	 }
	 if (!elem.style.top){
	 elem.style.top="0px";
	 }
	var xpos=parseInt(elem.style.left);
	var ypos=parseInt(elem.style.top);
	if (xpos==final_x && ypos==final_y){
	return true;
	}
	if (xpos<final_x){
	dist=Math.ceil((final_x-xpos)/10);
	xpos=xpos+dist;
	}
	if (xpos>final_x){
		dist=Math.ceil((xpos-final_x)/10);
	xpos=xpos-dist;
	}
	if (ypos<final_y){
		dist=Math.ceil((final_y-ypos)/10);
	ypos=ypos+dist;
	}
	if (ypos>final_y){
		dist=Math.ceil((ypos-final_y)/10);
	ypos=ypos-dist;
	}
	elem.style.left=xpos+"px";
	elem.style.top=ypos+"px";
	
	
	var repeat="moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
	elem.movement=setTimeout(repeat,interval);//interval秒后执行moveMessage函数
	
	}
	
	
	
	
	///////////////////////////////////////////////////////////////////////////////
	// JavaScript Document

/////////原始位置
   function prepareSlideshow(){
   // 确保浏览器支持DOM 
    if (!document.getElementById) return false;
	if (!document.getElementsByTagName) return false;
	
	// 确保元素存在
	if (!document.getElementById("btnNext")) return false;
	if (!document.getElementById("btnPre")) return false;
	if (!document.getElementById("imagegallery")) return false;
	if (!document.getElementById("samples")) return false;

var btnPre=document.getElementById("btnPre");
	var btnNext=document.getElementById("btnNext");
	btnPre.className="btnPre1";
	btnPre.setAttribute("title", "");
	var ulEle=document.getElementById("imagegallery");
	ulEle.style.position="absolute";
	ulEle.style.left="0px";
	ulEle.style.top="0px";

var liHeight=70,liBottom=3,samplesLi=5;//li的高度加margin—bottom
	var samplesHeight=samplesLi*liHeight+liBottom*(samplesLi-1);
    var lis=ulEle.getElementsByTagName("li").length;
    var ulHeight=(liHeight+liBottom)*lis;
	var vs=(liHeight+liBottom)*samplesLi;//+liBottom;
	var ulTop;
	var ulBottom;
	var final_y;
    //alert (samplesHeight);
    //alert (lis);
    //alert (ulHeight);
	//alert (vs);
    btnNext.onclick=function(){
		
	  		   ulTop=parseInt(ulEle.style.top);
	  		   ulBottom=ulHeight+ulTop-samplesHeight;
	  	if(ulBottom<=vs+liBottom&&liBottom<ulBottom){
		  	final_y=-(ulHeight-samplesHeight-liBottom);
		  	moveElement("imagegallery",0,final_y,10);
			
		     buttonStyle(final_y);     
		  	          
		}
		if(ulBottom>vs+liBottom){
		  	final_y=ulTop-samplesHeight-liBottom;
		    moveElement("imagegallery",0,final_y,10); 
		    buttonStyle(final_y);      
        }

}//btnPre.onclick=function()
	btnPre.onclick=function(){
	  		   ulTop=parseInt(ulEle.style.top);
	  		   ulBottom=ulHeight+ulTop-samplesHeight;
			   
	  	if(-ulTop<=vs){
		  	final_y=0;
		  	moveElement("imagegallery",0,final_y,10);			
		    buttonStyle(final_y);     
		}
		if(-ulTop>vs){
		  	final_y=ulTop+samplesHeight+liBottom;
		    moveElement("imagegallery",0,final_y,10);
			buttonStyle(final_y);
        }
	
	}//btnPre.onclick=function()

//alert(ul_bottom);//距离 决定要用哪种if语句
	//alert(ul_s.nodeName);   //
function buttonStyle(final_y){
	
	var btnPre=document.getElementById("btnPre");
	var btnNext=document.getElementById("btnNext");
	
	if(final_y==0){
		           btnPre.className="btnPre1";
				   btnPre.setAttribute("title", "");
	}
	
	if(final_y==-(ulHeight-liBottom-samplesHeight)){
		         btnNext.className="btnNext1";
				 btnNext.setAttribute("title", "");
	}
	if(!(final_y==0)&&!(final_y==-(ulHeight-liBottom-samplesHeight))){
		       btnPre.className="btnPre";
			   btnPre.setAttribute("title", "上一组");
			   btnNext.className="btnNext";
			   btnNext.setAttribute("title", "下一组");
			   
			   
	}
				   
				   }
	
	
	
	
	}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////	
	
	
	
	 addLoadEvent(prepareSlideshow);  
	
	
	
	
   
</script>

<title>无标题文档</title>
<style type="text/css">
<!--
body {
	text-align:left;
	background: #1e1e1e url(images/zp_bj01.gif) repeat-y;
}
*a {behavior:url(xuXian.htc);}/*去掉链接的虚线*/

.head {
	height:93px;
}
.content {
	position:relative;
	background:url(images/zp_bj02.gif) repeat-y;
	width:845px;
	height:403px;
	border-bottom:1px solid #252525;
	border-top:1px solid #333333;
}
#carousel {
	float:right;
	display:inline;
	margin-right:1px;
	width:118px;
	height:402px;
}
.btnPre, .btnNext, .btnPre1, .btnNext1{_overflow:hidden;/*ie6高度超过实际高度*/
	display:block;
	width:16px;
	height:8px;
}
.btnPre {cursor:hand;
	margin:7px 59px 5px 43px;
	background:url(images/zp_tubiao.gif) no-repeat;
}
.btnPre1 {cursor:default;
    margin:7px 59px 5px 43px;
	background:url(images/zp_tubiao.gif) no-repeat -32px 0;
}
.btnNext {cursor:hand;
	margin:5px 59px 7px 43px;
	background:url(images/zp_tubiao.gif) no-repeat 0 -8px;
}
.btnNext1 {cursor:default;
	margin:5px 59px 7px 43px;
	background:url(images/zp_tubiao.gif) no-repeat -32px -8px;
}
.btnPre:hover {
	width:16px;
	height:8px;
	background:url(images/zp_tubiao.gif) no-repeat -16px 0;
}
.btnNext:hover {
	width:16px;
	height:8px;
	background:url(images/zp_tubiao.gif) no-repeat -16px -8px;
}
#samples {
	position:relative;
	height:362px;
	width:118px;                   overflow:hidden;
}
#imagegallery {
	width:98px;
	height:362px;
}
#imagegallery li {float:left;/*li内元素偏离 baseline 向下拉*/
	width:98px;
	height:70px;
	margin-bottom:3px;
	background:#000;
}
#imagegallery li a {
	width:98px;
	height:70px;
	display:block;
}
#imagegallery li a img {/*vertical-align:top;和li的float:left;任选一个*/

width:98px;
	height:70px;
	filter: alpha(opacity=40);
	opacity:0.4;
}
#imagegallery li a:hover img {
	filter: none;
	opacity:1;
}
#placeholder {
	float:right;
	width:590px;
	height:362px;
	margin:20px 1px;
}
#description {
	position:absolute;
	bottom:-50px;
	left:135px;
}
-->
</style>
</head>
<body>
<div class="head"></div>
<div class="content">
  <div id="carousel">
    
    <a href="#pre" id="btnPre" class="btnPre" title="上一组"></a>
    <div id="samples">
      <ul id="imagegallery">
        <li> <a href="images/1.jpg" title="A fireworks display"><img src="images/1.jpg" alt="888reworks"/></a> </li>
        <li> <a href="images/coffee.jpg" title="A cup of black coffee"><img src="images/2.jpg" alt="Coffee"/></a> </li>
        <li> <a href="images/rose.jpg" title="A red, red rose"><img src="images/3.jpg" alt="Rose"/></a> </li>
        <li> <a href="images/bigben.jpg" title="The famous clock"><img src="images/4.jpg" alt="Big Ben"/></a> </li>
        <li> <a href="images/coffee.jpg" title="A cup of black coffee"><img src="images/5.jpg" alt="Coffee"/></a> </li>
        <li> <a href="images/fireworks.jpg" title="A fireworks display"><img src="images/6.jpg" alt="888reworks"/></a> </li>
        <li> <a href="images/coffee.jpg" title="A cup of black coffee"><img src="images/7.jpg" alt="Coffee"/></a> </li>
        <li> <a href="images/rose.jpg" title="A red, red rose"><img src="images/8.jpg" alt="Rose"/></a> </li>
        <li> <a href="images/bigben.jpg" title="The famous clock"><img src="images/9.jpg" alt="Big Ben"/></a> </li>
        <li> <a href="images/coffee.jpg" title="A cup of black coffee"><img src="images/10.jpg" alt="Coffee"/></a> </li>
        <li> <a href="images/bigben.jpg" title="The famous clock"><img src="images/11.jpg" alt="Big Ben"/></a> </li>
        <li> <a href="images/coffee.jpg" title="A cup of black coffee"><img src="images/12.jpg" alt="Coffee"/></a> </li>
        <li> <a href="images/fireworks.jpg" title="A fireworks display"><img src="images/13.jpg" alt="888reworks"/></a> </li>
        <li> <a href="images/coffee.jpg" title="A cup of black coffee"><img src="images/14.jpg" alt="Coffee"/></a> </li>
        <li> <a href="images/rose.jpg" title="A red, red rose"><img src="images/15.jpg" alt="Rose"/></a> </li>
        <li> <a href="images/bigben.jpg" title="The famous clock"><img src="images/16.jpg" alt="Big Ben"/></a> </li>
        <li> <a href="images/coffee.jpg" title="A cup of black coffee"><img src="images/17.jpg" alt="Coffee"/></a> </li>
                <li> <a href="images/coffee.jpg" title="A cup of black coffee"><img src="images/7.jpg" alt="Coffee"/></a> </li>
        <li> <a href="images/rose.jpg" title="A red, red rose"><img src="images/8.jpg" alt="Rose"/></a> </li>
        <li> <a href="images/bigben.jpg" title="The famous clock"><img src="images/9.jpg" alt="Big Ben"/></a> </li>
        <li> <a href="images/coffee.jpg" title="A cup of black coffee"><img src="images/10.jpg" alt="Coffee"/></a> </li>
        <li> <a href="images/bigben.jpg" title="The famous clock"><img src="images/11.jpg" alt="Big Ben"/></a> </li>
        <li> <a href="images/coffee.jpg" title="A cup of black coffee"><img src="images/12.jpg" alt="Coffee"/></a> </li>
        <li> <a href="images/fireworks.jpg" title="A fireworks display"><img src="images/13.jpg" alt="888reworks"/></a> </li>
        <li> <a href="images/coffee.jpg" title="A cup of black coffee"><img src="images/14.jpg" alt="Coffee"/></a> </li>
        <li> <a href="images/rose.jpg" title="A red, red rose"><img src="images/15.jpg" alt="Rose"/></a> </li>
        <li> <a href="images/bigben.jpg" title="The famous clock"><img src="images/16.jpg" alt="Big Ben"/></a> </li>
        <li> <a href="images/coffee.jpg" title="A cup of black coffee"><img src="images/17.jpg" alt="Coffee"/></a> </li>
      </ul>
    </div>
    <a href="#nxt" id="btnNext" class="btnNext" title="下一组"></a> </div>
  <img id="placeholder" src="images/xc_00202.jpg"/>
  <p id="description">如果您的浏览器不支持javascript 那么将无法在本页浏览...</p>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

西部数码顶级域名注册商39元抢注！

使用道具举报