<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>图片特效</title>
<style type="text/css">
html
{
background-color:black;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<img id="aaa" src="1.jpg" οnclick="ShowVisible(this)" style="width:200px; cursor:hand; border:solid,1px,black;" />
<img id="bbb" src="2.jpg" οnclick="ShowVisible(this)" style="width:200px; border:solid,1px,black; cursor:hand;" />
<img id="ccc" src="3.jpg" οnclick="ShowVisible(this)" style="width:200px; border:solid,1px,black; cursor:hand;" />
<img id="Show" οnmοusemοve="Move(this)" οnclick="ChangeSizeToSmall()" style="width:100px; display:none; cursor:hand; z-index:10; position:absolute; left: 22px; top: 87px; border:solid 1px black;" />
<script type="text/javascript">
var x;
function ShowVisible(e)
{
var image = document.getElementById("Show");
image.src = e.src;
x=0;
ChangeSizeToBig();
}
var t1 = null;var t2 = null; var x = 0;
function ChangeSizeToBig()
{
var aa = document.getElementById("Show");
aa.style.display="block";
var w = aa.style.width.substring(0, aa.style.width.length - 2) - 0;
if(w <= 600)
{
aa.style.filter="Alpha(Opacity=" + x +")";
if(x < 100)
x += 3.8;
aa.style.width = w + 20;
if(t1 != null)
window.clearInterval(t1);
if(t2!=null)
window.clearInterval(t2);
t1 = setInterval('ChangeSizeToBig()',1);
}
}
function ChangeSizeToSmall()
{
var aa = document.getElementById("Show");
aa.style.display="block";
var w = aa.style.width.substring(0, aa.style.width.length - 2) - 0;
if(w >= 100)
{
aa.style.width = w - 20;
if(t2!=null)
window.clearInterval(t2);
if(t1 != null)
window.clearInterval(t1);
t2 = setInterval("ChangeSizeToSmall()",0);
}
else
aa.style.display="none";
}
function Move(e)
{
e.style.pixelLeft = event.x / 2;
e.style.pixelTop = event.y / 2;
}
</script>
</div>
</form>
</body>
</html>