您的位置：首页 > Web前端 > JavaScript

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

2011-10-15 21:12 113 查看

<%@
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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航