一款超酷的图片特效代码

来源：互联网发布：php 时间戳精确编辑：程序博客网时间：2024/04/30 03:18

<%@ 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" onclick="ShowVisible(this)" style="width:200px; cursor:hand; border:solid,1px,black;" />
        <img id="bbb" src="2.jpg" onclick="ShowVisible(this)" style="width:200px; border:solid,1px,black; cursor:hand;" />
        <img id="ccc" src="3.jpg" onclick="ShowVisible(this)" style="width:200px; border:solid,1px,black; cursor:hand;" />
        <img id="Show" onmousemove="Move(this)" onclick="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>