<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="动画效果.aspx.cs" Inherits="repeater.动画效果" %>
<!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>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
<HeaderTemplate><table><tr></HeaderTemplate>
<ItemTemplate><td><img width="200" height="150" name='<%#Eval("name")%>' country='<%#Eval("country")%>' src='images\<%#Eval("imagepath") %>' /></td></ItemTemplate>
<FooterTemplate></tr></table></FooterTemplate>
</asp:Repeater>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database1.mdf;Integrated Security=True;User Instance=True"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM [Images]">
</asp:SqlDataSource>
<script type="text/javascript">
$("img").mouseenter(function () {
$(this).animate({ "width": "400", "height": "300" }, "fsat");
//$("img").not($(this)).animate({ "width": "200", "height": "150" }); //用not就不用添加mouseleave事件
});
//$("img").mousemove(function (e) {
//$("#s1").text($(this).attr("name"));
// $("#s2").text($(this).attr("country"));
// $("#div1").css("top", e.pageY).css("left", e.pageX).show();
// });
$("img").mouseleave(function () {
$(this).animate({ "width": "200", "height": "150" });
});
</script>
<div id="div1" style=" display:none; position:absolute; background-color:Green; width: 100px; height:50px">
<p>名称:<span id="s1"></span></p>
<p>国家:<span id="s2"></span></p>
</div>
</div>
</form>
</body>
</html>
