在.net中集成Mootools做图片动态翻页
最近由于工程需要，要做一个动态的幻灯图片功能，也就是说，图片必须是受控的，可翻页，可动态更新，网上的一些实例都是静态的多张幻灯，这些不能满足我的要求，找了半天，发现Mootools有个Fx.Tween功能，比较适用于幻灯，于是，只能自己动手了。
当客户端带参数进入这个页面，例如：PictureView.aspx?Id=XXX时，这张图片可由PictureView.aspx这个页面直接响应输出，或者提交给Ajax进行输出，我这里是用前aspx来输出的，接下来的翻页，是用Ajax完成的，借助了Mootools的Ajax与Fx.Tween功能。具体代码如下：（由于版面关系，Ashx代码这里没有给出，大家可以自己进行添加）
Page的：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ProductionView.aspx.cs" Inherits="PicPoll.ProductionView" %>
<!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 runat="server">
<title>图片作品欣赏</title>
<link href="css/main.css" type="text/css" rel="Stylesheet" />
<link rel="stylesheet" type="text/css" href="css/dialog_box.css" />
<script language="javascript" src="/js/mootools-1.2-core.js" type="text/javascript"></script>
<script language="javascript" src="/js/mootools-1.2.more.js" type="text/javascript"></script>
<script language="javascript" src="js/dialog_box.js"></script>
<script type="text/javascript">
var i=<%=currentPic%>;//这里需要获取请求的ID匹配的图片序号
var maxid = <%=maxCount%>;//这是通过计算得到的最大图片序号（数量）
</script>
<script language="javascript" src="/js/myappjs.js" type="text/javascript"></script>
</head>
<body>
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/index_1.gif" width="1000" height="210" alt="" /></td>
</tr>
</table>
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/index_2.gif" width="1000" height="107" alt="" /></td>
</tr>
</table>
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="257"><a href="/"><img src="images/banner_1.gif" width="214" height="71" alt="" /></a></td>
<td width="257"><img src="images/banner_2.gif" width="191" height="71" alt="" /></td>
<td width="244"><img src="images/banner_3.gif" width="192" height="71" alt="" /></td>
<td width="237"><a href="/ProductionList.aspx"><img src="images/banner_4.gif" width="186" height="71" alt="" /></a></td>
<td><a href="/PublishProduction.aspx"><img src="images/banner_5.gif" width="217" height="71" alt="" /></a></td>
</tr>
</table>
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/index_7_1.gif" width="1000" height="46" alt="" /></td>
</tr>
</table>
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="34" background="images/index_8_1.gif"></td>
<td valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/index_34_1.gif" width="936" height="71" alt="" /></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="30" background="images/index_27_1.gif"></td>
<td valign="top" style="background:#FFFFFF">
<div style="width:870px;overflow:hidden;padding-left:6px;">
<div>
<a href="#" title="上一张" id="prepic"><img src="http://images.cnblogs.com/pre.gif" alt="" width="85" height="65" style="border-width:0px;" /></a> <a href="#" title="下一张" id="nextpic"><img src="http://images.cnblogs.com/next.gif" alt="" width="85" height="65" style="border-width:0px;" /></a>
</div>
<div id="maindiv" style="height:600px;width:800px;overflow:hidden;border:#000 1px solid;font-size:0px;"><img alt="" id="div<%=currentPic%>" style="width:800px;height:600px;" src='<%=currentPicSrc %>'>' /></div>
<div style="height:25px;line-height:25px;font-weight:bold;text-align:left;width:300px;">作品名称：[<span style="color:Red;" id="ptitle"><asp:Literal ID="ltPName" runat="server"></asp:Literal></span>]</div>
<div style="height:25px;line-height:25px;font-weight:bold;text-align:left;width:300px;">拥有票数：[<span style="color:Red;" id="ppoll"><asp:Literal ID="ltPollCount" runat="server"></asp:Literal></span>]</div>
<div style="height:25px;line-height:25px;font-weight:bold;text-align:left;width:300px;">发布时间：[<span style="color:Red;" id="ptime"><asp:Literal ID="ltPubTime" runat="server"></asp:Literal></span>]</div>
<div style="height:25px;line-height:25px;font-weight:bold;text-align:left;width:300px;">作者昵称：[<span style="color:Red;" id="pnickname"><asp:Literal ID="ltNickName" runat="server"></asp:Literal></span>]<input type="hidden" id="prepid" runat="server" /><input type="hidden" id="thispid" runat="server" /><input type="hidden" id="nextpid" runat="server" /></div>
<div style="height:25px;line-height:25px;font-weight:bold;"><a href="javascript:showDialog('投票选项','','submit',0,'真实姓名-input-id:TrueName,type:text,maxLength:10|身份证号-input-id:IDCard,type:text,maxLength:19|联系地址-input-id:ContactAddress,type:text,maxLength:50|联系电话-input-id:ContactTel,type:text,maxLength:22','AjaxPoll.ashx|ProductionId='+$('thispid').value+'&PicTitle='+$('ptitle').innerText);"><img src="http://images.cnblogs.com/poll.gif" width="50" height="15" alt="" style="border-width:0px;" /></a></div>
</div>
</td>
<td width="30" background="images/index_29_1.gif"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="images/index_30_1.gif" width="936" height="73" alt="" /></td>
</tr>
<tr>
<td><img src="images/index_31.gif" width="936" height="91" alt="" /></td>
</tr>
</table>
</td>
<td width="30" background="images/index_11.gif"></td>
</tr>
</table>
</body>
</html>
这是CodeBehind:
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
namespace PicPoll
{
public partial class ProductionView : System.Web.UI.Page
{
protected int currentPic;
protected string currentPicSrc;
protected int maxCount;
CoreBusiness.BizDataGet bg = new CoreBusiness.BizDataGet();
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["Type"] == "1")
{
if (!string.IsNullOrEmpty(Request.QueryString["Id"]))
{
if (CoreBusiness.ParamVerify.IsInt32(Request.QueryString["Id"]))
{
maxCount = bg.GetProductionCount(1);
currentPic = maxCount - bg.GetProductionCount(1, Convert.ToInt32(Request.QueryString["Id"]));
CoreModel.Production pd = bg.GetProductionInfo(1, Convert.ToInt32(Request.QueryString["Id"]));
if (pd != null)
{
ltPName.Text = pd.PicTitle;
ltNickName.Text = pd.NickName;
ltPollCount.Text = pd.HavePoll.ToString();
ltPubTime.Text = pd.PublishTime;
currentPicSrc = pd.PicAddress;
nextpid.Value = bg.GetNexProId(1,Convert.ToInt32(Request.QueryString["Id"])).ToString();
prepid.Value = bg.GetPreProId(1, Convert.ToInt32(Request.QueryString["Id"])).ToString();
thispid.Value = Request.QueryString["Id"];
}
}
}
}
else
{
Response.Status = "301 Moved Permanently";
Response.AddHeader("Location", "/ProductionVideo.aspx?Id=" + Request.QueryString["Id"]);
}
}
}
}
接下来是JS部分的:
window.addEvent('domready', function(){
var picsrc;
var d2;
$('prepic').addEvent('click', function(){
if(i > 1)
{
i = i-1;
new Request({url: "AjaxProductionSrc.ashx?Id=" + $('prepid').value + "&gettype=p",
method:'get' ,
evalScripts:true,
onSuccess: function(responseText) {
var responseContent = responseText.split('|');
if(responseContent[0] != "error")
{
picsrc = responseContent[0];
$('ptitle').innerHTML = responseContent[1];
$('ppoll').innerHTML = responseContent[2];
$('ptime').innerHTML = responseContent[3];
$('pnickname').innerHTML = responseContent[4];
$('nextpid').value = $('thispid').value;
$('thispid').value = $('prepid').value;
$('prepid').value = responseContent[5];
if(!$('div' + i))
{
d2 = document.createElement("img");
d2.id="div" + i;
d2.style.width = "800px";
d2.style.height = "0px";
d2.src=picsrc;
$('maindiv').insertBefore(d2,$('div' + (i+1)));
}
if($('div' + i))
{
$('div' + i).tween('height', "600px");
}
if($('div' + (i+1)))
{
$('div' + (i+1)).tween('height', "0px");
}
}
},
onFailure: function() {
alert('The request failed.');
}
}).send();
}
return false; // alternative syntax to stop the event
});
$('nextpic').addEvent('click', function(){
//alert('i:' + i + 'maxid:' + maxid);
if(i < maxid)//can't more than maxRecordCount
{
i = i+1;
new Request({url: "AjaxProductionSrc.ashx?Id=" + $('nextpid').value + "&gettype=n",
method:'get' ,
evalScripts:true,
onSuccess: function(responseText) {
var responseContent = responseText.split('|');
if(responseContent[0] != "error")
{
picsrc = responseContent[0];
$('ptitle').innerHTML = responseContent[1];
$('ppoll').innerHTML = responseContent[2];
$('ptime').innerHTML = responseContent[3];
$('pnickname').innerHTML = responseContent[4];
//$('prepid').value = $('nextpid').value;
$('prepid').value = $('thispid').value;
$('thispid').value = $('nextpid').value;
$('nextpid').value = responseContent[5];
}
if(!$('div' + i))
{
d2 = document.createElement("img");
d2.id="div" + i;
d2.style.width = "800px";
d2.style.height = "0px";
d2.src=picsrc;
$('maindiv').appendChild(d2);
}
if($('div' + (i-1)))
{
$('div' + (i-1)).tween('height', "0px");
}
if($('div' + i))
{
$('div' + i).tween('height', "600px");
}
},
onFailure: function() {
alert('The request failed.');
//$('result').innerHTML = 'The request failed.';
}
}).send();
}
return false; // alternative syntax to stop the event
});
});
PS：虽然实现了翻页，并有幻灯效果，但是由于本人并没有做代码的优化与精简，所以期待大家一起来指出不足之处~