我用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;来实现的,但是这样重复的代码就很多了,求更简便的实现方法
|
|