用鼠标在图片上添加点

最新推荐文章于 2021-08-03 19:44:17 发布

YiQiJinBu

最新推荐文章于 2021-08-03 19:44:17 发布

阅读量431

点赞数

分类专栏： C# jQuery HTML 文章标签： jquery js html

原文链接：https://blog.csdn.net/Ceremony_feeling/article/details/102770900

版权

C# 同时被 3 个专栏收录

44 篇文章 0 订阅

订阅专栏

jQuery

9 篇文章 0 订阅

订阅专栏

HTML

7 篇文章 0 订阅

订阅专栏

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PointTest.aspx.cs" Inherits="PagePointTest.PointTest" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>页面点获取测试</title>
    <script src="Scripts/jquery-1.10.2.js"></script>
    <style>
        .img {
            position: relative;
            border: solid 1px #000;
            display: inline-block;
            margin: 100px 100px;
        }

            .img .marker {
                position: absolute;
                width: 10px;
                height: 10px;
                background: #FF0000;
                border-radius: 50%;
            }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <table>
            <tr>
                <td>
                    <div id="divShwoPointInfo">
                        <asp:Label runat="server">X:</asp:Label>
                        <asp:TextBox runat="server" ID="txtPointX"></asp:TextBox>
                        <asp:Label runat="server">Y:</asp:Label>
                        <asp:TextBox runat="server" ID="txtPointY"></asp:TextBox>
                        <asp:RadioButtonList ID="pointColor" runat="server">
                            <asp:ListItem Selected="True" Value="#FF0000">红</asp:ListItem>
                            <asp:ListItem Value="#FFFF00">黄</asp:ListItem>
                            <asp:ListItem Value="#0000FF">蓝</asp:ListItem>
                        </asp:RadioButtonList>
                        <input type="button" id="btnDelete" onclick="deletePoint()" value="撤销" />
                        <asp:Button ID="btnSave" Text="保存" runat="server" OnClick="btnSave_Click" />
                    </div>
                </td>
                <td>
                    <div class="img" id="divShowScreen">
                        <asp:Image ID="imgScreen" runat="server" ImageUrl="~/PIC/Kindow.jpg" />
                    </div>
                </td>
            </tr>
        </table>
    </form>
</body>
<script type="text/javascript">
    function deletePoint()
    {
        $("#divShowScreen div").last().remove();
    }
    function createMarker(x, y) {
        var div = $("<div id='div'></div>");
        div.addClass('marker');
        var pointColor = $("input[type='radio']:checked").val();
        div.css("background", pointColor);
        div.css("left", x + 'px');
        div.css("top", y + 'px');
        $("#divShowScreen").append(div);
        //  记录点信息

        $("#txtPointX").val(x);
        $("#txtPointY").val(y);
    }

    $("#divShowScreen").click(function (e) {
        e = e || window.event;
        var x = e.offsetX || e.layerX, y = e.offsetY || e.layerY;
        createMarker(x, y);
    }
)
</script>

</html>