[AJAX]好用的Ajax based slider - mooSlideBox 3

今天看到一個類似Lightbox效果的網站

它是用mooSlideBox做的..教大家如何做出此效果呀..

首先要準備好要用的js、css、image,檔案結構如下所示：

mooSlideBox3.aspx
mooSlideBox3.aspx.cs
mooSlideX.js
mootools.js
styles.css
images(目錄)
--close.jpg
--dotblogs.jpg

mooSlideBox3.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="mooSlideBox3.aspx.cs" Inherits="mooSlideBox3" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>mooSlideBox3</title> <script type="text/ecmascript" language="javascript" src="mootools.js"></script> <script type="text/ecmascript" language="javascript" src="mooSlideX.js"></script> <link rel="stylesheet" href="styles.css" type="text/css" /> </head> <body> <form id="form1" runat="server"> <h2>修練大會</h2> <p> <a href="images/dotblogs.jpg" rel="designSlide" rev="mycontent" title="Silverlight 修練大會::歡迎大家踴躍參與修練大會，一起修練拿大獎，喊燒也有獎品喔~"> Silverlight 修練大會</a><p> <a href="images/dotblogs.jpg" rel="designSlide" title="XNA Robotics Studio 修練大會::歡迎大家踴躍參與修練大會，一起修練拿大獎，喊燒也有獎品喔~"> XNA Robotics Studio 修練大會</a> </p> <div style="visibility: hidden;" id="mycontent"> 活動網址：<a href="http://study.dotblogs.com.tw/default.aspx" style="padding-left: 0px;">http://study.dotblogs.com.tw/</a> </div> </form> </body> </html>

線上Demo
http://demo.dotblogs.com.tw/puma/mooSlideBox3/mooSlideBox3.aspx

執行結果：