AJAX鼠标事件加载网页大图。

HTML代码：

<!DOCTYPE html>
<html xmlns="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) {
            xmlhttp = "";
            if (window.ActiveXObject) {  //判定是否是IE游览器
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            else if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            }
            else {
                alert("请使用先进的游览器~");
                return false;
            }
            xmlhttp.open("post",url, false);
            xmlhttp.onreadystatechange = function () { //侦听状态
                if (xmlhttp.readyState == 4) {
                    if (xmlhttp.status == 200) { //请求成功
                        var datas = $.parseJSON(xmlhttp.responseText);
                        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("请求错误");
                    }
                }
            }
            xmlhttp.send();
        }
    </script>
</head>
<body onload="ajaxphoto('photoinfo.ashx?num=3')">
    <div id="bigdiv" style="display:none;position:absolute;">
        <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; }
        }
    }
posted @ 2012-10-17 22:48  安之若素冷暖自知  阅读(352)  评论(0)  编辑  收藏  举报