AJAX鼠标事件加载网页大图。
HTML代码：
<!DOCTYPE html><html ="http://www.w3.org/1999/xhtml"><head> <title></title> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> function ajaxphoto(url) { = ""; if (window.ActiveXObject) { //判定是否是IE游览器 = new ActiveXObject("Microsoft."); } else if (window.= new else { alert("请使用先进的游览器~"); return false; } "post",url, false); = function () { //侦听状态 if (== 4) { if (== 200) { //请求成功 var datas = $.parseJSON(for (i = 0; i < datas.length; i++) { var data = datas[i]; var small = document.createElement("img"); small.big = data.big; small.name = data.name; small.age = data.age; small.src = data.small; document.body.appendChild(small); small.onmouseover = function () { //鼠标事件 document.getElementById("bigphoto").src = this.big; document.getElementById("nameli").innerHTML = this.name; document.getElementById("ageli").innerHTML = this.age; var div = document.getElementById("bigdiv"); var e = arguments[0] || window.event;//firefox 要调用函授才能获得client。 //alert(e.clientX); div.style.top = e.clientY+"px"; div.style.left = e.clientX+"px"; div.style.display = "block"; } } } else { alert("请求错误"); } } } </script></head><body onload="ajaxphoto('photoinfo.ashx?num=3')"> <div id="bigdiv" > <img id="bigphoto" src="" alt="photo"/> <ul> <li id="nameli"></li> <li id="ageli"></li> </ul> </div></body></html>一般处理程序代码：
public class photoinfo : IHttpHandler { public void ProcessRequest(HttpContext context) { string num = context.Request["num"];//请求的图片地址数量 if (num != string.Empty) { var data = new _001TableAdapter().GetData(Convert.ToInt32(num));//强类型DataSet. JavaScriptSerializer jss = new JavaScriptSerializer(); //Json 传数据。 List<Data> list=new List<Data>(); foreach (var row in data) { list.Add(new Data(){small=row.small_img,big=row.big_img,age=row.age,name=row.name}); } context.Response.Write(jss.Serialize(list));//发回给游览器。 } } public class Data { public string small { get; set; } public string big { get; set; } public int age { get; set; } public string name { get; set; } } }TAG:
