右面板

FLASH論壇-Flash之神魂顛倒 → 網頁 / 程式應用區 → JavaScript / CSS / Div 網頁應用討論區 → [討論]我有JAVASCRIPT 疑問

MSDN 研討會資料下載 熱門租屋行情 網路行銷秘訣大公開 磷蝦油=比魚油更強 Microsoft Silverlight
墨水匣、碳粉匣 - 天天都便宜 888Boss 創業加盟網 碳粉匣、墨水匣 - 天天都特價 減肥診所 雷射抽脂
ASP.NET完全攻略與快速上手 買墨水送神幣喔 抽脂 近視雷射手術 電波拉皮
網路創業 SEO 借錢 投影機 公仔
植牙 調整型內衣 白蟻 氣球 眼袋
虛擬主機神魂特惠 大陸新娘 NCCU集中營 網頁設計 愛情城市
落健 液晶電視

  共有662人閱讀過本文章折疊列印

主題：[討論]我有JAVASCRIPT 疑問
帥哥喲，離線，有人找我嗎？
hope0747
 小大  1樓 個人化首頁 | 個人資料 | 搜尋 | EMAIL | 首頁 | |

加到: FunP 書籤加到: 黑米書籤加到: MyShare 書籤加到: 美味書籤加到: Furl 書籤加到: YaHoo 分享書籤加到: Google 書籤加到: UDN 書籤加到: Technorati 書籤


加好友 悄悄話
等級：新手上路 文章：2 經驗：33 威望：0 精華：0 註冊：2007-6-27 21:34:00 		[討論]我有JAVASCRIPT 疑問  發表心情 Post By：2008-7-24 0:44:00



各為朋友大家好:
我在公司是作網頁設計, 最近再翻新公司網頁時, Javascript 碰上了瓶頸, 希望大家幫我解答.

請大家參考附件
我的問題是:
在中間紅色部分, 釋放我公司產品, 如果我公司的產品多過8項, 我想將他換行, 或者家個箭頭, 一點就往旁邊移, 該如何做?

世倫




以下是程式碼

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script language="javascript" type="text/javascript" src="pngredraw.js"></script>
<title>5</title>
<meta http-equiv="imagetoolbar" c>
<style type="text/css">
 html {
  overflow: hidden;
 }
 body {
 margin: 0px;
 padding: 0px;
 background: #000000;
 position: absolute;
 width: 100%;
 height: 100%;
 cursor: crosshair;
 }
 #box {
  position: absolute;
  background: #D70010;
  border: #999999 solid 2px;
  visibility: hidden;
 }
 #screen {
  position: absolute;
  left: 0px;
  width: 100%;
  top: 10%;
  height: 80%;
  background: #333333;
  border-bottom:#D70010 solid 2px;
  border-top:#D70010 solid 2px;
 }
 #box img  {
  position: absolute;
  border: gray solid 0px;
  cursor: pointer;
 }
 #box span {
  position: absolute;
  color: #ccc;
  font-family: verdana;
  font-size: 12px;
  width: 200px;
 }
 #box a {
  text-decoration: none;
  color:#ff8000;
 }
 #box a:hover {
  text-decoration: none;
  background:#ff8000;
  color:#ffffff;
 }
 #box a:visited {
  text-decoration: none;
  color:#ff8000;
 }
 #box a:visited:hover {
  text-decoration: none;
  background:#ff8000;
  color:#ffffff;
 }
 #lnk {
  visibility: hidden;
 }
</style>
<script src="SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">

document.onselectstart = new Function("return false");
O    = new Array();
box  = 0;
img  = 0;
txt  = 0;
tit  = 0;
W    = 0;
H    = 0;
nI   = 0;
sel  = 0;
si   = 0;
ZOOM = 0;
rImg = 0;
//////////////////
speed = .06; // animation speed
delay = .5; // 1 = no delay
//////////////////

function dText(){
 txt.style.textAlign = tit.style.textAlign = (sel<nI/2)?"left":"left";
 txt.innerHTML = O[sel].tx;
 tit.innerHTML = O[sel].ti;
}

function CObj(n, s, x, tx, ti){
 this.n    = n;
 this.dim  = s;
 this.tx   = tx;
 this.ti   = ti;
 this.is   = img[n];
 this.vz   = 0;
 this.sx   = 0;
 this.x0   = x;
 this.x1   = 0;
 this.zo   = 0;
 this.over = function() {
  with(this){
   if(n!=sel){
    O[sel].dim = 100;
    O[n].dim = ZOOM * 100;
    sel = n;
    l = 0;
    for(k=0; k<nI; k++){
     O[k].x0 = l;
     l += O[k].dim;
    }
    txt.innerHTML = tit.innerHTML = "";
    setTimeout("dText()", 32);
   }
  }
 }
 this.anim = function () {
  with(this){
   vz  = speed*(vz+(x1-sx)*delay);
   x1 -= vz;
   sx  = (n==0)?0:O[n-1].x0+O[n-1].dim;
   zo -= (zo-dim)*speed;
   l   = (x1*si)+6*(n+1);
   w   = zo*si;
   is.style.left   = Math.round(l)+'px';
   is.style.top    = Math.round((H-w*rImg)*.5)+'px';
   is.style.width  = Math.round(w)+'px';
   is.style.height = Math.round(w*rImg)+'px';
   if(sel == n){
    if(sel<nI*.5) {
     tit.style.left = txt.style.left = Math.round(l+w+6)+'px';
    } else {
     tit.style.left = txt.style.left = Math.round(l-(nx*.25)-6)+'px';
    }
    txt.style.top = Math.round(-(w*rImg)*.25)+'px';
    tit.style.top = Math.round((w*rImg)*.33)+'px';
   }
  }
 }
}

function run(){
 for(j in O)O[j].anim();
 setTimeout("run()", 16);
}

function doResize(){
 tit.style.width = Math.round(nx*.25)+'px';
 txt.style.width = Math.round(nx*.25)+'px';
 tit.style.fontSize = (nx/30)+'px';
 txt.style.fontSize = (nx/70)+'px';
 with(box.style){
  width  = Math.round(W)+'px';
  height = Math.round(H)+'px';
  left   = Math.round(nx/2-W/2)+'px';
  top    = Math.round(ny/2-H/2)+'px';
 }
}

function resize(){
 nx = scr.offsetWidth;
 ny = scr.offsetHeight;
 W  =  nx*90/100;
 si = (W-((nI+1)*6))/((ZOOM*100)+((nI-1)*100));
 H  = (100*si*rImg)+14;
 doResize();
}
onresize = resize;

onload = function(){
 scr = document.getElementById("screen");
 box = document.getElementById("box");
 tit = document.getElementById("tit");
 txt = document.getElementById("txt");
 img = box.getElementsByTagName("img");

 Lnk = document.getElementById("lnk").getElementsByTagName("a");
 nI  = img.length;
 ZOOM = nI;
 rImg = img[0].height/img[0].width;
 resize();
 s = ZOOM * 100;
 x = 0;
 tit.innerHTML = img[0].title;
 txt.innerHTML = img[0].alt;
 for(i=0; i<nI; i++) {
  var t = img[i].alt;
  if(Lnk[i].href!="") t+='<br><a href="'+Lnk[i].href+'">'+Lnk[i].innerHTML+'</a>';
  O[i] = new CObj(i, s, x, t, img[i].title);
  img[i].alt = "";
  img[i].title = "";
  img[i].onmousedown = new Function("return false;");
  img[i].onmouseover = new Function('O['+i+'].over();');
  if(Lnk[i].href!=""){
   /* ==== hyperlink ==== */
   img[i].onclick = new Function('window.open("'+Lnk[i].href+'","_blank");');
  }
  x += s;
  s = 100;
 }
 box.style.visibility = "visible";
 run();
}
</script>
<link href="SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="screen">
 <div id="box"">
  <img src="stem/stemcr52s.png" title=" Stem CR5.2" alt="CR5.2S Alloy+Carbon <br>ext:90-130mm<br>barbore=31.8mm<br>angle=-5 degree<br>height:40mm<br>weight:125g(ext:100m)">
  <img src="stem/stemcr31s.png" title="Stem CR3.1" alt="Full Carbon Filber<br>Barbore:31.8mm<br>Angle:-5degree<br>Height:31mm<br>Ext:90,100,110,120,130mm<br>Weight:150m">
  <img src="stem/stemcr53s.png"  alt="3D cold forged AL7075<br>barbore:31.8mm<br>Angle:-5degree<br>Height:37mm<br>Ext:90,100,110,120,130<br>Weight:125g" title="Stem CR-5.3">
  <img src="stem/stemcr22.png" title="Stem CR2.2" alt="Carbon fiber alloy stem<br>Dia:28.6<br>angle:-5degree<br>Ext:90/100/110/120<br>Barbore:31.8mm<br>Height:40mm<br>Weight:147">
  <img src="stem/stemcr23.png" title="Stem CR2.3" alt="3D forged 2014 alloy stem<br>Dia:28.6mm<br>angle:-5degree<br>Ext:90/100/110/120mm<br>Barbore:31.8mm<br>Height:40mm<br>Weight:147g">
  <img src="stem/stemcr32.png" title="Stem CR3.2" alt="Carbon + alloy<br>Octaeonal whithe carbon fiber alloy stem<br>ID:28.6mm<br>Angle:-5 degree<br>EXT:90/100/110/120/130<br>Barbore:31.8mm<height"37mm">
  <img src="stem/stemcr33.png" title="Stem CR3.3" alt="Cold forged alloy<br>W/reinforced muscle<br>Barbore:31.8mm<br>Angle:-5 degree<br>Height:38mm<br>Ext:90/100/110/120/130mm<br>Weight:175g">
        <img src="stem/stemcr21.png" title="Stem CR2.1" alt="Full carbon stem<br>Dia:28.6mm<br>Angle:-5 degree<br>Ext:90/100/110/120/130mm<br>Barbore:31.8mm<br>Height:37mm<br>Weight:172g">
       
       
  <span id="txt"></span>
  <span id="tit"></span>
  <span id="lnk">
   <a></a>
   <a></a>
   <a></a>
   <a></a>
   <a></a>
   <a></a>
   <a></a>
            <a></a>
  </span>
 </div>
</div>

<!-- crossbrowser images_loading_bar - Gerard Ferrandez - www.dhteumeuleu.com - Feb 2005 -->
<span id="LB0" style="position:absolute;left:50%;top:50%;"><span style="position:absolute;font-family:arial;font-size:10px;color:#FFFFFF;left:-50px;top:-18px">Loading...</span><span style="position:absolute;left:-50px;top:-5px;font-size:1px;width:100px;height:10px;background:#333"><span id="LB1" style="position:absolute;left:0px;top:0px;font-size:1px;width:0px;height:10px;background:#FFFFFF"></span></span></span>
<ul id="MenuBar1" class="MenuBarHorizontal">
  <li><a href="stem.html" target="_parent">Stem</a>      </li>
  <li><a href="seatpost.html" target="_parent">Seatpost</a></li>
  <li><a href="handlebar.html" target="_parent">Handle bar</a>      </li>
  <li><a href="fork.html" target="_parent">Fork</a></li>
  <li><a href="crankset.html" target="_parent">Crank set</a></li>
  <li><a href="wheel.html" target="_parent">Wheels</a></li>
  <li><a href="bottombracket.html" target="_parent">BB</a></li>
  <li><a href="bottlecage.html" target="_parent">Bottle Cage</a></li>
  <li><a href="saddle.html">Saddle</a></li>
  <li><a href="frame.html">Frame</a></li>
  <li><a href="components.html" target="_parent">Components</a></li>
</ul>
<!-- end of images_loading_bar code -->

<script>
m00=document.getElementById("box").getElementsByTagName("img");m01=m00.length;function images_loading_bar(){m02=0;for(i=0;i<m01;i++)m02+=(m00[i].complete)?1:0;document.getElementById("LB1").style.width=Math.round(m02/m01*100)+'px';if(m02==m01)setTimeout("document.getElementById('LB0').style.display='none'",128); else setTimeout("images_loading_bar()", 64);};images_loading_bar();
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"file:///SpryMenuBarDownHover.gif", imgRight:"file:///SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
白蟻 支持(0) 中立(0) 反對(0) 回到頂部
RSS2.0　　Xhtml無圖版　　Xslt無圖版 言論純屬發表者個人意見,與本論壇立場無關, 文章版權歸原作者所有,禁止未授權轉載。 不歡迎非法軟體,序號,及受著作權法保護的文章等資訊
   Powered By Flash2u神魂顛倒 Ver 8.2.0 [03/14]
繁中修正版：Netkoala® By 2008-05-02   頁面執行時間 0.12500 秒, 3 次資料查詢