黑马程序员技术交流社区

标题: ajax问题 求更简便的实现方法 [打印本页]

---

作者: 夏威夷海风    时间: 2012-7-26 19:52
标题: ajax问题 求更简便的实现方法
我用JS做一个产品图片的动画显示，用了一般处理程序

ashx中的内容为
if (action == ""getpagedata")")
            {
                string pagenum = context.Request["pagenum"];//获取前台传过来的参数“pagenum”的值
                int ipagenum = Convert.ToInt32(pagenum);//讲获得的参数转换成int类型的数字
                var adapter = new jsimagesTableAdapter();
                var data = adapter.GetpageData((ipagenum - 1) * 6 + 1, (ipagenum) * 6);
                List<Counment> list = new List<Counment>();
                foreach (var row in data)
                {
                    list.Add(new Counment() { id = row.id, bgpath = row.images });
                }
                JavaScriptSerializer jss = new JavaScriptSerializer();
                context.Response.Write(jss.Serialize(list));
            }
JS文件内容为
var page = 1;
        $(function () {
            $(".clk").click(function (e) {
                page = 1;
                e.preventDefault(); //不要导向连接地址；
                $("#divhidden").css("display", "");
                $.post("jsashx.ashx", { "action": "getpagedata", "pagenum": "1" },
            function (data, status) {
                var conments = $.parseJSON(data);
                $("#divmain").empty();
                for (var i = 0; i < conments.length; i++) {
                    var comment = conments[i];
                    var div = $("<div class='divborder'><img class='nanaA' alt='动画JS图片'  src=downloads/" + comment.bgpath + "/><br/></div>");
                    $("#divmain").append(div);
                    $(".divborder").mouseover(function () {
                        $(this).addClass("divborder1");
                    });
                    $(".divborder").mousemove(function () {
                        $(this).addClass("divborder").siblings().removeClass("divborder1");
                    });
                    $(".nanaA").click(function () {
                        var imgsrc = ($(this).attr("src"));
                        $("#nanaimg").attr("src", imgsrc);
                        alert($("#nanaimg").attr("src"));
                    });
                    $(function () {
                        var x = -260;
                        var y = 20;
                        $("img.nanaA").mouseover(function (e) {
                            this.myTitle = this.title;
                            this.title = "";
                            var imgTitle = this.myTitle ? "<br/>" + this.myTitle : "";
                            var tooltip = "<div id='tooltip'><img class='lass' src='" + this.href + "' alt='产品预览图'/>" + imgTitle + "<\/div>"; //创建 div 元素
                            $("#divmain").append(tooltip); //把它追加到文档中
                            $("#tooltip")
.css({
    "top": (e.pageY + y) + "px",
    "left": (e.pageX + x) + "px"
}).show("fast");   //设置x坐标和y坐标，并且显示
                        }).mouseout(function () {
                            this.title = this.myTitle;
                            $("#tooltip").remove();  //移除
                        }).mousemove(function (e) {
                            $("#tooltip")
.css({
    "top": (e.pageY + y) + "px",
    "left": (e.pageX + x) + "px"
});
                        });
                    })
                }
            });
            });
        });
效果图为下图
图片是从数据库中读取的路径，左边有个向左快进的按钮 右边有个向右快进的按钮 我是在js里设置了一个全部变量 var page = 1;来实现的，但是这样重复的代码就很多了，求更简便的实现方法

未命名.jpg (28.57 KB, 下载次数: 58)

下载附件

2012-7-26 19:49 上传

截图

---

作者: 许庭洲    时间: 2012-7-27 10:12
在后台实现：
private void timer1_Tick(object sender, System.EventArgs e)
{
        MovePicBox();
}

/// <summary>
/// 移动PictureBox
/// </summary>
private void MovePicBox()
{
        //改变图片位置
        this.pictureBox.Left += 10;                //右移
        this.pictureBox.Top -= 10;                //上移
                       
        //超过窗体最右端
        if ( this.pictureBox.Left >= this.Width )
        {
                this.pictureBox.Left = 0;
        }
        //超过窗体最上端
        if ( this.pictureBox.Bottom <= 0 )
        {
                this.pictureBox.Top = this.Bottom;
        }
}
在前台实现：
<script>
var timeSet;
var s=10;
var setp=10;
function init(){
        var img1 = document.getElementById("img1");
        var main = document.getElementById("main");
        if(img1.style.pixelLeft <(main.clientWidth-img1.clientWidth-setp)){
                img1.style.pixelLeft =img1.style.pixelLeft+setp;
        }else{
                 clearTimeout(timeSet);
        }
        timeSet = setTimeout("init()",s);
}
window.onload=init;
</script>

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2