|
引用 | 編輯
keigo
2006-01-17 21:31 |
樓主
▼ |
||
x0
http://abgne.myweb.hinet.net/0007/0007.html 這種效果蠻常見到都是用Flash來做的，但用JavaScript來實作的話並不難，只要運用一點點的JavaScrript+CSS就可以做到了，一樣讓我們先來看Body中的Code吧：  我放了一張寬高均為200的空白圖，這是當我們點了DIV中的圖時，要來顯示大圖片用的。再來我把一個DIV放到SPAN中，DIV是要用來放置圖片用的，DIV的寬高設為600,90，位置設成以DIV為準的絕對位置，不設的話就沒辦法移動喔。SPAN的部份我把寬高設成360,90，並把overflow設成hidden，醬DIV雖然比SPAN長，不過就不會有捲軸或是被撐大了(Body也要設noWrap="true")。最後來看那兩個按鈕，一個是讓DIV往左移，一個是讓DIV往右移。到這邊應該都還看的懂吧！ 再來看全部的JavaScript的Code：  先大概說明一下，變數speed是用來設定每次要移動多少距離，i則是累計所移動的距離，startPos表示第一張圖Div的posLeft值，endPso表示最後一張圖Div的posLeft值；lt()及rt()函式就是用來移動用的，當滑鼠移動到兩個按鈕時就會觸發setInterval()中的函式(setInterval()函式的用法在隨機圖片輪播時有說明，忘了的可以去看看)，若滑鼠離開的按鈕則會觸發stop()函式來停止原先被觸發的setinterval()函式；若點了DIV中的圖片時，會觸發showImg()函式來顯示放大的圖片。 上面的函式比較有問題的就是lt()跟rt()這兩個，解說前先看下面的圖！  黑色矩形就是SPAN，紅色矩形就是DIV，黃色矩形就是圖片。一開始DIV的posLeft是0，也就是DIV的最左邊跟SPAN左邊的距離是0，此範例共有12張圖，因為SPAN寬為360，所以DIV一次只能顯示4張，每張圖的寬是90，每次移動45，所以還有45*2*8的長度部份未被顯示出來。 好！先來看rt()函式：  先找出DIV的posLeft為多少，如果小於endPos時，則表示已經有往左移動過了，所以就能往右移動；若temp等於endPos時，則不需要再往右移了。 再來看lt()函式：  一樣是先找出DIV的posLeft為多少，如果大於endPos的話，則代表還有隱藏的部份未顯示，所以就能繼續往左移動；若temp等於endPos時，表示已經到最後一張了，不需要再往左移了。 這範例其實並不難，只是在移動的部份要想一下而已，醬的效果可以拿來當相簿用，也可以當做產品介紹用，畫面美化後應用起來還算不錯。往左右移動的按鈕可以改成用圖片的方式，只要加上個onmouseover跟onmouseup設定就好了。 範例瀏覽： http://abgne.myweb.hinet.net/0007/0007.html 以上內容於2005/09/18發表在小弟的Blog裡http://blog.xuite.net/abgne/diary1/3979877  x0
|
|||
