这次要介绍一种用DIV来做出类似相簿浏览模式的效果，点了图片后会在上方显示大图片出来。酱子的解说各位应该听的雾沙沙吧，先直接来看范例好了。
http://abgne.myweb.hinet...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...0007.html以上内容于2005/09/18发表在小弟的Blog里
http://blog.xuite.net/abgne/diary1/3979877
