jquery 图片添加标注点击标注弹窗

来源：互联网发布：西安java招聘编辑：程序博客网时间：2024/06/17 17:31

前台：

@model List<JZGrain.Model.TBS_AnQuanBiaoZhu>
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link href="~/Content/css/H-ui.admin.css" rel="stylesheet" />
    @Styles.Render("~/Content/ListPage_Css")
    @Styles.Render("~/Content/EditPage_Css")

<link href="~/Content/css/H-ui.min.css" rel="stylesheet" />
    <link href="~/Content/css/style_1.css" rel="stylesheet" />
    <script src="~/Scripts/jquery.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>

    <title>安全区域</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            margin: 10px;
        }

        .img_box {
            position: relative;
            width: 1000px;
            height: 600px;
        }

            .img_box .maodian {
                position: absolute;
                padding: 5px 10px;
                border-right: 5px;
                filter: alpha(opacity=40);
                -moz-opacity: 1;
                opacity: 1;
                top: 100px;
                left: 10px;
                font-size: 12px;
                font-family: "宋体";
                cursor: pointer;
            }

        .maodian a {
            color: #FFF;
            text-decoration: none;
        }
    </style>
    @Scripts.Render("~/bundles/ListPage_JS")
    <script type="text/javascript">
        //加载所有标注
        function BodyOnLoad() {

            $.ajax({
                url: "/xitongguanli/anquanquyu/BiaoZhuList",
                type: 'POST',
                dataType: 'json',
                success: function (data, status, xhr) {

                    $.each(data, function (index, comment) {
                        var title = comment.MingCheng;//取得标题内容
                        var id = comment.ID;
                        var lx = comment.Lx;
                        var ly = comment.Ly;
                        var html = "<p class='maodian' style='top:" + ly + ";left:" + lx + "'   id='" + id + "'><img src='/Content/images/BiaoZhuRed.png' /><a href='javascript:void(0)'><font color=\"red\" >" + title + "</font></a></p>";//组装P标签
                        $(".img_box").append(html);
                    });
                },
                Error: function (xhr, error, exception) {
                    // handle the error.
                    alert(exception.toString());
                }
            });
        }
        //当鼠标悬浮在某一标注时，显示该标注信息
        function PartialDetail(id, name) {

            $.ajax({
                type: "POST",
                url: '@Url.Action("PartialAction", "AnQuanQuYu")',
                data: { id: id },
                datatype: "json",
                success: function (data) {
                    layer.open({
                        type: 1,
                        title: name,
                        area: ['600px', '360px'],
                        shadeClose: true, //点击遮罩关闭
                        content: data
                    });
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    //alert(errorThrown);
                }

});

}
$(function () {

            //绑定弹窗
            $(".img_box").delegate(".maodian", "dblclick", function () {
                PartialDetail($(this).attr("id"), $(this).find('a').text());
            });

            //绑定标签鼠标按下事件
            $(".img_box").delegate(".maodian", "mousedown", function (e) {
                obj = $(this);//把当前标签对象赋值给变量
                if (obj.setCapture) { //用于兼容非准浏览器
                    obj.setCapture();
                }

                var _x = e.pageX - obj.offset().left;//取得鼠标到标签左边left的距离
                var _y = e.pageY - obj.offset().top; //取得鼠标到标签顶部top的距离
                var oWidth = $(this).outerWidth(); //取得标签的宽，包括padding
                var oHeight = $(this).outerHeight();//取得标签的高，包括padding
                var x = 0, y = 0; //定义移动的全局变量

                $(".maodian").bind("mousemove", function (e) {
                    var img_position = $(".img_box").offset(); //取得图片的位置
                    x = e.pageX - _x - img_position.left; //计算出移动的x值
                    y = e.pageY - _y - img_position.top; //计算出移动的y值
                    if (x < 0) { //如果移动小于0，证明移到了图片外，应设为0
                        x = 0;
                    } else if (x > ($(".img_box img").width() - oWidth)) {
                        //如果移动大于图片的宽度减去标签的宽度，证明移到了图片外，应该设为可用的最大值
                        x = $(".img_box img").width() - oWidth;
                    }

                    if (y < 0) { //同上
                        y = 0;
                    } else if (y > ($(".img_box img").height() - oHeight)) {
                        y = $(".img_box img").height() - oHeight;
                    }
                    obj.css({ "left": x, "top": y });

});

$(".img_box").bind("mouseup", function () { //绑定鼠标左键弹起事件

$('.maodian').unbind("mousemove"); //移动mousemove事件
$(this).unbind("mouseup"); //移动mouseup事件

                    if (obj.releaseCapture) { //兼容非标准浏览器
                        obj.releaseCapture();
                    }

});

return false; //用于选中文字时取消浏览器的默认事件
});

            //绑定保存事件
            $(".btn").click(function () {
                var ids = new Array();
                var lefts = new Array();
                var tops = new Array();
                //获取每个标注的ID、Lx、Ly
                $('.img_box p').each(function (i, data) {
                    ids[ids.length] = data.id;
                    lefts[lefts.length] = data.style.left;
                    tops[tops.length] = data.style.top;

});

                $.ajax({
                    url: "/xitongguanli/anquanquyu/SaveBiaoZhu",
                    type: 'POST',
                    async: false,
                    data: { 'id': ids, 'left': lefts, 'top': tops },
                    traditional: true,
                    success: function (data, status) {
                        if (data.length > 0) {
                            msg(data, 2);
                        }
                        else {
                            msg("操作成功！", 1);
                        }
                    },
                    Error: function (xhr, error, exception) {
                        // handle the error.
                        msg("请求失败，请重试！", 2);

                    }
                });
            })

});
</script>
</head>
<body onload="BodyOnLoad()">

</body>
</html>

后台：

/// <summary>
        /// Ajax获取标注
        /// </summary>
        /// <returns></returns>

        public string BiaoZhuList()
        {
            Expression<Func<TBS_AnQuanBiaoZhu, bool>> whereLamdba = null;
            int s = Enum是否.否.GetHashCode();
            whereLamdba = whereExpression.And(whereLamdba, x => x.ShanChuBiaoJi == s);
            List<TBS_AnQuanBiaoZhu> list_bianzhu = TBS_AnQuanBiaoZhuService.FindList(whereLamdba).ToList<TBS_AnQuanBiaoZhu>();
            return JsonHelp.SerializeObject(list_bianzhu);
        }

#region 展示某个标注信息
        /// <summary>
        /// 某个标注信息
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        public string PartialAction(Guid id)
        {
            StringBuilder str = new StringBuilder();
            var bumen = TBS_AnQuanBiaoZhuService.GetEntity(id);
            if (bumen != null)
            {
                str.Append("<div style=\"padding:20px;\">");
                str.Append("<h2 style=\"padding-bottom:10px;\">名 称：" + bumen.MingCheng + "</h2>");
                str.Append("<h2 style=\"padding-bottom:10px;\">负责人：" + bumen.FuZeRen + "</h2>");
                str.Append("<h2 style=\"padding-bottom:10px;\">备 注：" + bumen.Remark + "</h2>");
                str.Append("</div>");
            }
            return str.ToString();
        }
        #endregion

        public ActionResult QuYuEdit(Guid? id, string msg = "")
        {
            ViewData["result"] = msg;
            Expression<Func<TBS_Logo, bool>> whereLamdba = null;

            Action<Orderable<TBS_AnQuanBiaoZhu>> orderBy = query => query.Desc(j => j.XiuGaiShiJian);
            List<TBS_AnQuanBiaoZhu> list = TBS_AnQuanBiaoZhuService.GetListAll().OrderByDescending<TBS_AnQuanBiaoZhu, DateTime?>(j => j.XiuGaiShiJian).ToList<TBS_AnQuanBiaoZhu>();
            int s = Enum是否.否.GetHashCode();
            whereLamdba = whereExpression.And(whereLamdba, x => x.ShanChuBiaoJi == s && x.ID_Type == 3);
            List<TBS_Logo> list_logo = Service.FindList(whereLamdba).ToList<TBS_Logo>();
            if (list_logo.Count > 0)
            {
                ViewBag.imgsrcList = list_logo[0].LogoUrl;
            }
            else
            {
                ViewBag.imgsrcList = "";
            }

return View(list);
}

[HttpPost]
        public string SaveBiaoZhu(string[] id, string[] left, string[] top)
        {
            TBS_AnQuanBiaoZhu tbs_gerenyonghu = null;
            try
            {
                for (int i = 0; i < id.Length; i++)
                {
                    tbs_gerenyonghu = TBS_AnQuanBiaoZhuService.GetEntity(Guid.Parse(id[i]));
                    if (tbs_gerenyonghu != null)
                    {
                        tbs_gerenyonghu.Lx = left[i];
                        tbs_gerenyonghu.Ly = top[i];
                        TBS_AnQuanBiaoZhuService.Update(tbs_gerenyonghu);
                    }
                }
            }
            catch (Exception ex)
            {

return ex.Message;
}

return "";
}

0 0

jquery 图片添加标注 点击标注弹窗

jquery 图片添加标注点击标注弹窗