立師父.您好:
原圖檔 600x450 加上6px框線 整個區塊設定為 612x462
<div id="za" style="position:relative;top:0px;left:0px;width:612px;height:462px;border:6px double #38070E;background-color:#38070E;overflow:hidden">
縮小左移35px不讓它顯示,整個區塊改為:
<div id="za" style="position:relative;top:0px;left:0px;width:577px;height:462px;border:6px double #38070E;background-color:#38070E;overflow:hidden">
因波浪強度strength=35,為了不讓左邊的浪痕出現,所以波動圖向左移35px,而左移的部分受za區塊限制,隱藏不出現。
<div id="zb" style="position:absolute;top:0px;left:0px;width:600px;height:450px;
改為:
<div id="zb" style="position:absolute;top:0px;left:-35px;width:600px;height:450px;
由於波動影響,跑馬圖片銜接出現一條隙線,為消除這個現象,將第二張和第三張圖片,比正常設定位置各超前2px,以掩蓋銜接的隙線,
<img id="f1" top:0px height:450px 第三張跑馬圖
<img id="f2" top:225px height:450px 第二張跑馬圖
<img id="f3" top:450px height:450px 第一張跑馬圖
改為:
<img id="f1" top:-4px height:452px 第三張跑馬圖
<img id="f2" top:223px height:452px 第二張跑馬圖
<img id="f3" top:450px height:450px 第一張跑馬圖
為了彌補這超前的2px,圖片寬度從450px改為452px
以上是上跑的部分,下跑的部分道理相同,只是方向不同,圖片定位也不同,
<img id="u1" top:-225px height:450px 第三張跑馬圖
<img id="u2" top:-450px height:450px 第二張跑馬圖
<img id="u2" top:-675px height:450px 第一張跑馬圖
改為:
<img id="u1" top:-229px height:452px 第三張跑馬圖
<img id="u2" top:-452px height:452px 第二張跑馬圖
<img id="u2" top:-675px height:450px 第一張跑馬圖
這樣解釋明白嗎?如仍有疑問請提出,再予說明...