这个网页特效很牛

evakenshin 楼主

http://images1.wowchina.com/burningcrusade/townhall/bestiary.html
大家点击一下左边的链接。右边出现的效果非常好
有人可以研究下怎么做的么？

fxlijun

的确很牛，就是一个滚动， 可惜咱不会整

csshtm

呵呵, 5年前就见到 , 那时才叫牛B

evakenshin 楼主

有人知道怎么做么？

rene1018

关注中。。。。

km268

存源码研究吧，看了一下，主要是JS控制

0yun123

效果不错，应该论坛里有相似的代码。

nightheart

应该是绝对定位后直接移动
移动完成将ZINDEX加一保证会遮住下一页...
关键的是移动线路的算法，如果是函数就好理解了

找到调用的方法了
大家可以去查看源代码
http://images1.wowchina.com/burningcrusade/townhall/images/bestiary/bestiary-script.js

***************

function moveItem(thisCreature)                                                                                //Animation Control Function
{
  if(okayToGo && thisCreature != currentCreature)                                                //if the function is not locked and the user clicked on a new item (not the current one)
  {
    containerSwitch(aBestiary[thisCreature]);
        newCreature = thisCreature;                                                                                        //grabs the parameter, stores it for later use
        document.getElementById("mainContainer_"+theNewContainer).style.zIndex = 50+10*forwardBackward;                //tricky; if forward, new item slides in behind the current item
        document.getElementById("mainContainer_"+theOldContainer).style.zIndex = 50+20*forwardBackward;            //if backward, new item slides in in front of the current item
        startTheMove = window.setInterval("rightOrLeft()",20);                //calls the Animation Execution Function
  }
}

[ 本帖最后由 nightheart 于 2007-3-13 16:37 编辑 ]

liboyi

有人能解释一下算法的意思没？

winkissui

很好的效果   像 FLASH 也`~

luzhuqin

代码看不懂

3120110

很感兴趣，关注一下！

myobug

还是不知道怎么用阿

maxerlin

Golive用Dhtml极容易实现

gjr1

代码有误以，左边不少链接点了后，右边弹出的内容不相符，比如点“纳镥”会弹出“孢子漫游者”

boooooy

好厉害！关注，以后会用到。

buttonup

关注中，希望能分析出来答案。

hansir

加点缓冲不是更好~

softman999

这个用DW里的时间轴就可以实现了，很简单，估计都没研究过DW

kuhanzhu

晕,效果是不错,不过分离的话,代码好多好多~

[ 本帖最后由 kuhanzhu 于 2007-3-30 14:12 编辑 ]

dwcli

是JS写的，等我有时间我来研究下

withjill

这个用DHTML就可以实现吧，时间轴

houjie828

要是有哪位能把代码弄出来看看，像我这样的菜鸟学习就好了

chiaotung

原來是TBC~~哈

Arorn

NB..........

newsn

见过类似的，效果不错，但是应该不难实现吧？div换位置和zindex而已。呵呵

lizhou2526

确实是很不错的效果~~
期待高人 把它弄下来~~

lovelium

<script> var ticked=0; var okayToGo = true; var currentCreature = 1; var forwardBackward = 1; var theNewContainer = 1; var theOldContainer = 2; function toggleContainers() { theNewContainer = (theNewContainer == 1) ? 2 : 1; theOldContainer = (theOldContainer == 1) ? 2 : 1; } function moveItem(thisCreature){ if(okayToGo&& thisCreature != currentCreature){ toggleContainers(); newCreature = thisCreature; document.getElementById("y"+theNewContainer).style.zIndex = 50+10*forwardBackward; document.getElementById("y"+theOldContainer).style.zIndex = 50+20*forwardBackward; startTheMove = window.setInterval("rightOrLeft()",20); } } function rightOrLeft() { if (ticked == 1020) { window.clearInterval(startTheMove); ticked = 0; forwardBackward = 1; currentCreature = newCreature; okayToGo = true; } else { okayToGo = false; thisAngle = (Math.PI/2)*(ticked/1000); document.getElementById("y"+theNewContainer).style.left = " "+(735-Math.sin(thisAngle)*700)+"px"; document.getElementById("y"+theNewContainer).style.top = " "+(105-(forwardBackward*Math.cos(thisAngle)*55))+"px"; document.getElementById("y"+theOldContainer).style.left = " "+(735-Math.sin(thisAngle+Math.PI/2)*700)+"px"; document.getElementById("y"+theOldContainer).style.top = " "+(105-(forwardBackward*Math.cos(thisAngle+Math.PI/2)*55))+"px"; ticked += 20; } } </script> <a href="javascript:moveItem(1);"><img src="http://www.sjjia.com/shoujitupian/downfileq/ryy/057ac3692ryywdh.gif"></a> <a href="javascript:moveItem(2);"><img src="http://fs4.139.com/1/1095/superhyu/photo/2006321191834635_500.jpg"></a> <div align="right" style="position:absolute; right:5px; top:10px; height:435px; width:650px; overflow:hidden;background:#fff"> <div id="y1" style="position:absolute; left:35px; margin-top:20px; top:105px; z-index:90; width:100px;height:100px;background:#ffffff"><img src="http://www.sjjia.com/shoujitupian/downfileq/ryy/057ac3692ryywdh.gif"></div> <div id="y2" style="position:absolute; left:700px; margin-top:20px; top:105px; z-index:90; width:100px;height:100px;background:#ffffff"><img src="http://fs4.139.com/1/1095/superhyu/photo/2006321191834635_500.jpg"></div> </div>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

这是一个达人写得就在本论坛中。地址忘了

skybot

好高人啊...

henlly

跟我问到的一个贴一样的效果...