在浏览Netflix时,当把鼠标停在一个影片的图片上时,就会看到更多关于该影片的信息。我们来模拟一下
它的功能:
1、创建一个ASP.NET AJAX Control Toolkit Website
2、Default.aspx的完整代码:
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
< head runat ="server" >
< title > Untitled Page </ title >
</ head >
< body >
< form id ="form1" runat ="server" >
< asp:ScriptManager ID ="ScriptManager1" runat ="server" />
< table >
< tr >
< td >< img id ="0-0" src ="Image1.gif" /></ td >
< td >< img id ="0-1" src ="Image2.gif" /></ td >
</ tr >
</ table >
< div id ="DataPanel" style ="display:none; position:absolute; left:0px; top:0px;" />
</ form >
</ body >
< script language ="javascript" > ...
Type.registerNamespace("Test");
var main = null;
Test.Main = function(rows, columns) ...{
this._columns = columns;
this._dataPanel = null;
this._imageMouseOverHandler = null;
this._imageMouseOutHandler = null;
this._rows = rows;
}
Test.Main.prototype = ...{
dispose : function() ...{
for(var i = 0; i < this._rows; i++)
for(var j = 0; j < this._rows; j++) ...{
image = $get(i + "-" + j);
$removeHandler(image, "mouseover", this._imageMouseOverHandler);
$removeHandler(image, "mouseout", this._imageMouseOutHandler);
}
delete this._imageMouseOverHandler;
delete this._imageMouseOutHandler;
Test.Main.callBaseMethod(this, "dispose");
},
_getXCoord : function(element) ...{
var x = 0;
while(element)...{
x += element.offsetLeft;
element = element.offsetParent;
}
return x;
},
_getYCoord : function(element) ...{
var y = 0;
while(element)...{
y += element.offsetTop;
element = element.offsetParent;
}
return y;
},
_image_OnMouseOver : function(args) ...{
switch(args.target.id) ...{
case "0-0":
this._dataPanel.innerText = "This is the first image.";
break;
case "0-1":
this._dataPanel.innerText = "This is the second image.";
break;
}
this._dataPanel.style.left = this._getXCoord(args.target) + args.target.offsetWidth + "px";
this._dataPanel.style.top = this._getYCoord(args.target) + "px";
this._dataPanel.style.display = "block";
},
_image_Out : function(args) ...{
this._dataPanel.style.display = "none";
},
initialize : function() ...{
Test.Main.callBaseMethod(this, "initialize");
var image = null;
this._dataPanel = $get("DataPanel");
this._imageMouseOverHandler = Function.createDelegate(this, this._image_OnMouseOver);
this._imageMouseOutHandler = Function.createDelegate(this, this._image_Out);
for(var i = 0; i < this._rows; i++)
for(var j = 0; j < this._columns; j++) ...{
image = $get(i + "-" + j);
$addHandler(image, "mouseover", this._imageMouseOverHandler);
$addHandler(image, "mouseout", this._imageMouseOutHandler);
}
}
}
Test.Main.registerClass("Test.Main", Sys.Component);
function pageLoad() ...{
main = new Test.Main(1, 2);
main.initialize();
}
</ script >
</ html >
< head runat ="server" >
< title > Untitled Page </ title >
</ head >
< body >
< form id ="form1" runat ="server" >
< asp:ScriptManager ID ="ScriptManager1" runat ="server" />
< table >
< tr >
< td >< img id ="0-0" src ="Image1.gif" /></ td >
< td >< img id ="0-1" src ="Image2.gif" /></ td >
</ tr >
</ table >
< div id ="DataPanel" style ="display:none; position:absolute; left:0px; top:0px;" />
</ form >
</ body >
< script language ="javascript" > ...
Type.registerNamespace("Test");
var main = null;
Test.Main = function(rows, columns) ...{
this._columns = columns;
this._dataPanel = null;
this._imageMouseOverHandler = null;
this._imageMouseOutHandler = null;
this._rows = rows;
}
Test.Main.prototype = ...{
dispose : function() ...{
for(var i = 0; i < this._rows; i++)
for(var j = 0; j < this._rows; j++) ...{
image = $get(i + "-" + j);
$removeHandler(image, "mouseover", this._imageMouseOverHandler);
$removeHandler(image, "mouseout", this._imageMouseOutHandler);
}
delete this._imageMouseOverHandler;
delete this._imageMouseOutHandler;
Test.Main.callBaseMethod(this, "dispose");
},
_getXCoord : function(element) ...{
var x = 0;
while(element)...{
x += element.offsetLeft;
element = element.offsetParent;
}
return x;
},
_getYCoord : function(element) ...{
var y = 0;
while(element)...{
y += element.offsetTop;
element = element.offsetParent;
}
return y;
},
_image_OnMouseOver : function(args) ...{
switch(args.target.id) ...{
case "0-0":
this._dataPanel.innerText = "This is the first image.";
break;
case "0-1":
this._dataPanel.innerText = "This is the second image.";
break;
}
this._dataPanel.style.left = this._getXCoord(args.target) + args.target.offsetWidth + "px";
this._dataPanel.style.top = this._getYCoord(args.target) + "px";
this._dataPanel.style.display = "block";
},
_image_Out : function(args) ...{
this._dataPanel.style.display = "none";
},
initialize : function() ...{
Test.Main.callBaseMethod(this, "initialize");
var image = null;
this._dataPanel = $get("DataPanel");
this._imageMouseOverHandler = Function.createDelegate(this, this._image_OnMouseOver);
this._imageMouseOutHandler = Function.createDelegate(this, this._image_Out);
for(var i = 0; i < this._rows; i++)
for(var j = 0; j < this._columns; j++) ...{
image = $get(i + "-" + j);
$addHandler(image, "mouseover", this._imageMouseOverHandler);
$addHandler(image, "mouseout", this._imageMouseOutHandler);
}
}
}
Test.Main.registerClass("Test.Main", Sys.Component);
function pageLoad() ...{
main = new Test.Main(1, 2);
main.initialize();
}
</ script >
</ html >
3、随便copy 图片Image1.gif 和Image2.gif 放在application根目录下。核心功能就算完成了,可以根据
需要改进!