lightbox是个经典的东西,造就了一种新的图片浏览方式。mootools是一个新发布的framework,现在要说的是这两个的结合品。
本来lightbox是使用Prototype + Scriptaculous的方式,不可否认Prototype是一个很好的framework,(mootools也有很多借鉴它的地方),不过这些天用下来,总觉得mootools有一种很轻逸的感觉(- -!)
转到正题,我们要做的就是mootools + ?? 做出Prototype + Scriptaculous + lightbox的效果。原作者:Christophe Beyls(可能需要代理才能访问,方正我是访问不了)
需要的东西
mootools.77 可以到mootools download页面下载,需要至少
- Native scripts: 全部选择
- Addons: 选一个Fx.js
- Plugins: 选一个Window.js
然后就是那个?? -moobox.js使用的方式跟lightbox2一样,预览的效果在这里
早就发现Lokesh Dhakar的lightbox的效果很酷,今天又发现另一个国外达人Nathan的Hoverbox,纯CSS的技巧,酷。
把两个东西简单结合一下,其实花不了什么技巧,不过东西更酷了一点。
Lightbox and Hoverbox: 看效果演示 | 下载 (338kb)
Nathan向我们解释了Hoverbox的实现:
The magic happens on a:hover, when .preview in the link goes from having display: none; to display: block; with absolute positioning and negative values for top and left. In good browsers, it is positioned according to the containing li, which is set to display: relative, but in Internet Explorer 6, a series of * html hacks place the positioning on the containing a href.