Js页面上动态画点,并给该点赋事件

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jsDrawPoint.aspx.cs" Inherits="JS1._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 runat="server">

<title>无标题页</title>

    <script language="javascript" type="text/javascript" src="drawing.js"></script>

    <style>

    div

    {

       width:500px;

       height:500px;

       border-color:#FF0000;

       border-width:0.5em;

       background-color:#CCCCCC

    }

    pt

    {

    background:#CC3300;

    border-top:6px solid #FFFFCC;

    border-left:6px solid #FF3300;

    border-bottom:6px solid #FFFFCC;

    overflow:hidden; float:left;

    }

    img

    {

    background-image: url(file:///C|/Inetpub/wwwroot/aspnet_client/ESRI/WebADF/images/edClear-selected-feature-ON.gif);

 

    }

    </style>

方法一:直接用div添加

<script language="javascript" type="text/javascript">

function drawPt()

{

var x=event.offsetX+'px';

var y=event.offsetY+'px';

 

var div = drawDot(x,y,"red",5);

document.body.innerHTML += div;

}

function drawDot(x,y,color,size)

{

      //新建一个div

  var div = "<div style='position:absolute; border:0;left:"+(x) +"; top:"+(y)+

";background-color:"+color+";width:"+size+";height:"+size+";'"+"onclick='alert();'"+"></div>";

 return div;

}

</script>

方法二:

<script language="javascript" type="text/javascript">

function drawPt()

{

    var x=event.offsetX+'px';

var y=event.offsetY+'px';

//新建一个页面元素,并赋属性

   var pt=document.createElement("img");

        pt.style.position="absolute";

        pt.style.left=x;

        pt.style.background="green";

        pt.style.top=y;

        pt.style.zIndex=10;

        pt.setAttribute("align","center");

      //添加单击事件

        pt.onclick = function(){alert(1)};

        pt.setAttribute("id","pt");

document.body.appendChild(pt);

}

</head>

<body>

    <form id="form1" runat="server">

    <div id='div' onmousedown="drawPt();">

</div>

</form>

</body>

</html>

阅读更多
个人分类: Javascript
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭