ASP.NET javascript实现图片浮动功能

最新推荐文章于 2022-12-02 22:27:58 发布

忧郁三角龙ଲ

最新推荐文章于 2022-12-02 22:27:58 发布

阅读量228

点赞数

分类专栏： ASP.NET

本文链接：https://blog.csdn.net/weixin_45894701/article/details/115494899

版权

ASP.NET 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

①Default.aspx文件

<%@ 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">
        div
        {
        	position:absolute; 
        	}
       
    </style>
   
</head>
<body onload="ss()">
    <form id="form1" runat="server">
    <div id = "dImage">

        <img alt="" src="images/1.jpg" style="height: 237px; width: 211px" /> 
    </div>
    </form>
     <script type="text/javascript" language="javascript">
         var divImage = document.getElementById("dImage");
         var x = 0; y = 0;
         var xSpeed = 5;  //左右方向移动速度
         var ySpeed = 2;  //上下方向移动速度
         var w = document.documentElement.clientWidth - 211;  //图片像素宽度
         var h = document.documentElement.clientHeight - 237;  //图片像素高度
         function ss() {
             if (x > w || x < 0) {  //越界取反
                 xSpeed = -xSpeed;
             }
             if (y > h || y < 0) {  //越界取反
                 ySpeed = -ySpeed;
             }
             x = x + xSpeed;
             y = y + ySpeed;
             divImage.style.top = y + "px"; //上下边界
             divImage.style.left = x + "px";  //左右边界
             setTimeout("ss()", 10);  //以10毫秒速度移动
         }
    </script>
</body>
</html>