学习过程中多分析别人的代码实现是个好的习惯,哪怕不是很明白,跟着多敲几遍代码也是很培养感觉的事情。下面是实际的效果(一般我只在firefox中测试):
[img]http://files.jb51.net/upload/201006/20100612230615829.jpg[/img]
鼠标滑过上面的导航链接时 下面框中图片进行流畅的切换,左右移动的效果
html结构如下:
[url=structure.html]</li>
<li>
<a href="presentation.html">Presentation</a>
</li>
<li>
<a href="behavior.html">Behavior</a>
</li>
</ol>
</body>
实在是很简单啊。下面我们直接来看js代码,先给出两个辅助函数:
addLoadEvent
function addLoadEvent(func) {
var oldonload = window.onload;
if(typeof window.onload != "function") {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
这个函数顾名思义就是加载window的onload事件所要处理的方法
insertAfter
[url=http://www.1sucai.cn/jiaoben/27501.html]http://www.1sucai.cn/jiaoben/27501.html[/url]