最近有个做的一个网站中有个小模块需要实现类似qq新闻图片的滚动的东东。由于对jquery不是很了解，就拿着jquery手册试着写了个。
贴出来，纪念下。
前台代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="css/css2.css" mce_href="css/css2.css" rel="stylesheet" type="text/css" /><title></title><mce:script src="js/jquery-1.4.4.min.js" mce_src="js/jquery-1.4.4.min.js" type="text/javascript"></mce:script><mce:script src="js/jquery-1.4.4.js" mce_src="js/jquery-1.4.4.js" type="text/javascript"></mce:script></head><body><form id="form1" runat="server"><div class="main"><div class="top"><div class="top_1"></div><div class="top_2">您当前的位置：<a href="Default.aspx" mce_href="Default.aspx">首页</a>>><a href="SheYing.aspx" mce_href="SheYing.aspx">摄影</a>>><asp:Literal ID="Literal1"runat="server"></asp:Literal></div></div><div class="biaoti"><asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><asp:Label ID="Label3" runat="server" Text="Label" Style="display:none;" mce_Style="display:none;"></asp:Label></div><div class="main_l"><asp:Label ID="Label2" runat="server" Text="Label"></asp:Label></div><div class="main_m"><asp:Image ID="main_m_img" runat="server" /></div><div class="main_r"><div class="main_r_1"></div><div class="main_r_t" οnclick="MoveTop()"></div><div class="main_r_m" style="overflow: hidden;" mce_style="overflow: hidden;"><div id="container"><asp:Repeater ID="Repeater1" runat="server"><ItemTemplate><img style="cursor:pointer;" mce_style="cursor:pointer;" title='<%#Eval("FileIntroduction") %>' οnclick="Magnify(this)" src='thumbnail/<%#Eval("Thumb") %>' style="width: 124px; height: 80px; margin-top: 2px;" /></ItemTemplate></asp:Repeater></div><mce:script type="text/javascript"><!--var _top = 0;var para = _top + "px";var divHeight = ($("img").length - 1) * 82;var mod = parseInt(divHeight / 417);var remain = divHeight - mod * 417;var i = 0;function MoveTop() {if (i == mod)return;i++;if (mod > i) {_top -= 417;para = _top + "px";}else if (mod == i) {_top -= remain;para = _top + "px";}$("#container").animate({ marginTop: para }, "slow");}function MoveDown() {i--;if (mod > i && i != 0) {_top += 417;para = _top + "px";}else if (i == 0) {_top += remain;para = _top + "px";}$("#container").animate({ marginTop: para }, "slow");}// --></mce:script></div><div class="main_r_b" οnclick="MoveDown()"></div></div><div class="bottom"><div class="bottom_1"></div></div></div></form></body></html>
后台绑定repeater的代码就不贴了。
CSS：
/*----------------------------全局-----------------------------*/* {padding: 0;font-size:12px;}body {PADDING-TOP: 0px;PADDING-RIGHT: 0px; PADDING-LEFT: 0px;PADDING-BOTTOM: 0px;MARGIN: 0px;background-color:#0c0c0c;color:#ffffff;}span {text-decoration: none;font:"宋体";color:#ffffff;}a {color:#ffffff;text-decoration: none;font:"宋体";}/*----------------------------布局-----------------------------*/.main{width:1000px;height:auto;margin-left:auto;margin-right:auto;}.top{width:1000px;height:44px;float:left;margin-bottom:45px;}.top_1{width:175px;height:44px;float:left;background-image:url(../img/top_1.jpg);}.top_2{width:810px;height:24px;float:left;padding-left:15px;padding-top:20px;}.biaoti{width:1000px;height:30px;float:left;text-align:center;font-size:20px;font-weight:bold;}.main_l{width:133px;min-height:525px;float:left;overflow:visible;border:solid 1px #212121;padding-left:10px;padding-right:10px;padding-top:10px;word-wrap:break-word;word-break:break-all;display:block;}.main_m{width:685px;height:525px;padding-left:10px;padding-right:10px;float:left;}#main_m_img{width:685px;height:525px;border:none;}.main_r{width:124px;height:523px;float:left;padding-left:7px;padding-right:7px;border:solid 1px #212121;}.main_r_1{width:124px;height:23px;float:left;background-image:url(../img/main_r_1.jpg);}.main_r_t{width:124px;height:39px;float:left;background-image:url(../img/main_r_t.jpg);cursor:pointer;}.main_r_m{width:124px;height:417px;float:left;}.main_r_b{width:124px;height:44px;float:left;cursor:pointer;background-image:url(../img/main_r_b.jpg);}.bottom{width:1000px;height:auto;float:left;padding-top:20px;padding-bottom:20px;margin-top:14px;border-top:solid 1px #212121;}.bottom_1{width:1000px;height:12px;float:left;text-align:center;color:#ffffff;font-size:12px;}.bottom_1 a{color:#ffffff;font-size:12px;}
