• 當(dāng)前位置：創(chuàng)新互聯(lián) >> 常見問題 >> 網(wǎng)站建設(shè) >> 網(wǎng)站制作 >> 制作圖片上的滾動效果

制作圖片上的滾動效果

• 作者：創(chuàng)新互聯(lián) 文章來源：網(wǎng)站建設(shè)部 點(diǎn)擊數(shù)： 更新時間：2010-04-04
• 　　在網(wǎng)頁制作上，設(shè)計師們?yōu)榱俗尀g覽者們有最好的體驗(yàn)效果，可謂是絞盡腦汁，設(shè)計出很多的瀏覽效果，比如說MouseOver和MouseOut效果，就是網(wǎng)頁中比較流行的一種做法，當(dāng)鼠標(biāo)移動到某一幅圖片上方時，原有的圖片會變色或者成為另一張圖片。盡管我們根本不用考慮javascript程序代碼的編寫，我們還是應(yīng)該對后臺發(fā)生的事件有一點(diǎn)了解，掌握翻滾效果是如何運(yùn)作的：當(dāng)鼠標(biāo)經(jīng)過web頁面中某一個圖形時，它會自動被另外一副預(yù)定的圖形替換。所以，雖然制作軟件有所不同，方法也有區(qū)別，但是基本的原理是一致的。不管在哪個軟件中制作翻滾效果，有三樣?xùn)|西不可缺少：原始圖形、替換圖形、控制圖形切換的javascript動作。那這些又該怎么操作呢？看成都創(chuàng)新互聯(lián)網(wǎng)站建設(shè)的小編跟大家分享的操作步驟。
  
  　　第一步，使用photoshop制作兩幅圖片，由于這個特效一般用于菜單的制作，因此使用photoshop制作兩幅不同底色的圖片。制作的方法很簡單，使用“文件/新建”創(chuàng)建兩個尺寸相同的文件，再使用文字工具輸入相同的文字，然后使用油漆桶工具為這兩個文件涂上不同的顏色。然后，將這兩幅圖片保存成名為w1和w1_2的GIF或JPEG格式的文件。
  
  　　第二步，打開Dreamweaver，下面的工作要使得上方菜單中的“網(wǎng)絡(luò)相關(guān)”的圖片產(chǎn)生鼠標(biāo)上滾效果。選中網(wǎng)絡(luò)相關(guān)這幅圖片，即剛才命名的w1文件，選擇window/behavior3打開行為面板。然后單擊面板中的“+”號，從彈出的菜單中選中SwapImage。
  
  　　第三步，在彈出的窗口中單擊Browse按鈕，選中剛才制作的w1_2文件，也就是鼠標(biāo)移動到圖片上方時變化后的圖片。此外，當(dāng)鼠標(biāo)移動到圖片上時，由于顯示over或out的圖片是需要一定的讀取時間的,所以會產(chǎn)生一定的延遲感，真是“大煞風(fēng)景”。為了防止鼠標(biāo)上滾后第二幅圖片的顯示會有所延遲，可以在上面的對話框中選中PreloadImages復(fù)選框，使得所有圖片均預(yù)先載入。最后單擊“OK”按鈕，這樣翻滾的效果就制作成功了。
  
  　　大家可以根據(jù)這種原理，來深化研究，也許還可以有更好的效果產(chǎn)生呢。歡迎大家和成都創(chuàng)新互聯(lián)網(wǎng)站建設(shè)的小編一起來交流體驗(yàn)哦。
• 網(wǎng)頁圖像切圖與壓縮 :上一篇
  什么網(wǎng)站算好站? :下一篇