椭圆形的图片菜单展示

作者：ariex 来源：bbs 整理日期：2007-10-27

<!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" xml:lang="cn" lang="cn">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="generator" content="editplus"/>
<meta name="author" content="Ariex"/>
<meta name="keywords" content="图片展示效果"/>
<meta name="description" content=""/>
<style type="text/css">
*{margin:0px;padding:0px;}
#show{width:600px;}
#show #platform{width:600px;height:500px;background-color:#fefefe;}
#show #platform *:hover{margin:-4px;border:4px solid #adadff;cursor:pointer;z-index:20000;}
#show #controlPanel{text-align:center;background-color:#dedede;}
</style>
<script type="text/javascript" language="javascript">
function ellipseSquare(containerID){
/* Author: Ariex
  Date: 2007/10/12
*/
  var container=document.getElementById(containerID);
  var elements=getAvailableNodes(container);
  var self=this;
/****公开属性****/
  this.Speed=0;   //速度
  this.MaxSpeed=100;  //最大速度
  this.Accelaration=5; //加速度
  this.Direction=true; //顺时针旋转
  this.OffsetX=container.clientWidth/2; //默认水平偏移为容器的一半，这样可以保证展示台的中心处在父容器的中心
  this.OffsetY=container.clientHeight/2; //默认垂直偏移
  this.A=200; //水平半径
  this.B=50; //垂直半径
  this.MinScale=1.5; //最小（远）处的缩放比例（0~1之间）
/***************/
  var angle=0;
  var stop=false;
  var angleIncreasment=360/elements.length;
  var timer;
  var IsMoving=false;
  function getAvailableNodes(pNode){
   if(pNode.nodeType==3)
    return null;
   var res=new Array();
   var l=pNode.childNodes.length;
   for(i=0;i<l;i++){
    if(pNode.childNodes[i].nodeType==1)
     res.push(pNode.childNodes[i]);
   }
   return res;
  }
  function init(){
   var l=elements.length;
   self.MinScale=(self.MinScale*10)%10/10;
   for(i=0;i<l;i++){
    elements[i].setAttribute("w", elements[i].clientWidth);
    elements[i].setAttribute("h", elements[i].clientHeight);
    elements[i].setAttribute("scale", elements[i].clientHeight/elements[i].clientWidth);
    //确定样式和位置
    elements[i].style.position="absolute";
    elements[i].style.top=self.B*Math.sin(Math.PI*i*2/l)+self.OffsetY-elements[i].clientHeight/2+"px";
    elements[i].style.left=self.A*Math.cos(Math.PI*i*2/l)+self.OffsetX-elements[i].clientWidth/2+"px";
    //根据位置控制大小缩放
    var c=self.OffsetY+self.B-parseInt(elements[i].style.top)-Math.round(elements[i].clientHeight/2);
    elements[i].style.height=elements[i].getAttribute("h")*(1-c*self.MinScale/(2*self.B))+"px";
    elements[i].style.width=elements[i].clientHeight/elements[i].getAttribute("scale")+"px";
    //之所以需要再次设定位置，是因为第一次的未知设定没有考虑到图片的缩放，导致图片中心位置偏移；而图片的缩放又需要首先设定图片的位置。
    //因此不得以，只好再次根据图片大小重新设定图片位置
    elements[i].style.top=self.B*Math.sin(Math.PI*i*2/l)+self.OffsetY-elements[i].clientHeight/2+"px";
    elements[i].style.left=self.A*Math.cos(Math.PI*i*2/l)+self.OffsetX-elements[i].clientWidth/2+"px";
    elements[i].style.zIndex=parseInt(elements[i].style.height);
   }
  }
  function move(){
   IsMoving=true;
   for(i=0;i<elements.length;i++){
    //排列位置
    elements[i].style.top=self.B*Math.sin(Math.PI*(angle+i*angleIncreasment)/180)+self.OffsetY-elements[i].clientHeight/2+"px";
    elements[i].style.left=self.A*Math.cos(Math.PI*(angle+i*angleIncreasment)/180)+self.OffsetX-elements[i].clientWidth/2+"px";
    //根据图片位置计算大小
    var c=self.OffsetY+self.B-parseInt(elements[i].style.top)-Math.round(elements[i].clientHeight/2);
    elements[i].style.height=elements[i].getAttribute("h")*(1-c*self.MinScale/(2*self.B))+"px";
    elements[i].style.width=elements[i].clientHeight/elements[i].getAttribute("scale")+"px";
    elements[i].style.zIndex=parseInt(elements[i].style.height);
   }
   if(stop){
    if(Math.abs(self.Speed/5)<1){
     self.Speed=0;
     clearTimeout(timer);
     IsMoving=false;
     return;
    }
    else
     self.Speed+=self.Speed>0?-5:5;
   }else{
    if(self.Direction)
     self.Speed=self.Speed>=self.MaxSpeed?self.MaxSpeed:self.Speed+self.Accelaration;
    else
     self.Speed=self.Speed<=-1*self.MaxSpeed?-1*self.MaxSpeed:self.Speed-self.Accelaration;
   }
   angle=(angle+self.Speed/self.MaxSpeed)%361;
   timer=setTimeout(function(){return move();}, 1);
  }
  this.Stop=function(){
   stop=true;
  }
  //direction为true时顺时针旋转，为false时逆时针旋转
  this.Start=function(direction){
   stop=false;
   this.Direction=direction?true:false;
   if(!IsMoving){
    move();
   }
  }
  init();
}
var e;
window.onload=function(){
  e=new ellipseSquare("platform");
}
</script>
</head>
<body>
<h2>图片展示效果</h2>
<div id="show">
<div id="platform">
  <img src="http://images.china-pub.com/ebook300001-305000/301277/cover.jpg" />
  <img src="http://images.china-pub.com/ebook300001-305000/301277/cover.jpg" />
  <img src="http://images.china-pub.com/ebook300001-305000/301277/cover.jpg" />
  <img src="http://images.china-pub.com/ebook300001-305000/301277/cover.jpg" />
  <img src="http://images.china-pub.com/ebook300001-305000/301277/cover.jpg" />
  <img src="http://images.china-pub.com/ebook200001-205000/204646/cover.jpg" />
  <img src="http://images.china-pub.com/ebook300001-305000/301277/cover.jpg" />
  <img src="http://images.china-pub.com/ebook300001-305000/301277/cover.jpg" />
  <img src="http://images.china-pub.com/ebook300001-305000/301277/cover.jpg" />
  <img src="http://images.china-pub.com/ebook200001-205000/204646/cover.jpg" />
  <img src="http://images.china-pub.com/ebook300001-305000/301277/cover.jpg" />
</div>
<div id="controlPanel">
  <button onmouseover="e.Start(true);" onmouseout="e.Stop();"><<<<</button>
  <button onclick="e.Start(true);">Continuous</button>
  <button onmouseover="e.Start(false);" onmouseout="e.Stop();">>>>></button>
</div>
</div>
</body>
</html>

方法已经封装，在IE7和ff2下通过。使用办法见代码。。。不过，几行，可设置的属性也没几个

希望这次不要像上次那样只有一个抢沙发的。。。

补充一下。。

ellipseSquare()类有
两个方法：
Start(direction)，direction参数为true则顺时针旋转，反之则逆时针（默认是不会停得。。。）

Stop()方法用来停止旋转。

九个属性：

Speed：当前速度
MaxSpeed：最大速度
Accelaration：加速度
Direction：旋转方向
OffsetX：关于展示台容器的水平偏移量（默认居中）
OffsetY：关于展示台容器的垂直偏移量（默认居中）
A：椭圆长轴
B：椭圆短轴
MinScale：“最远处”图片缩放比例（0~1之间）

【相关文章】