Chinaunix首页 | 论坛 | 博客
  • 博客访问: 8101
  • 博文数量: 1
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 60
  • 用 户 组: 普通用户
  • 注册时间: 2014-06-06 12:55
文章分类

全部博文(1)

文章存档

2014年(1)

我的朋友

分类: Web开发

2014-07-01 14:36:49

html页面代码,里面的js就不说了,是画图用的。目的很简单就是以html页面中的“search.png”这个小图标为圆心,100px为半径画圆。肯定要设计绝对定位和相对定位,该怎么处理?
以下代码可供参考:

点击(此处)折叠或打开

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4.   <TITLE>test </TITLE>
  5.   <SCRIPT type="text/javascript" LANGUAGE="JavaScript" src="js/wz_jsgraphics.js">
  6.   </SCRIPT>
  7.   <script type="text/javascript">
  8.     <!--
  9.     function draw(){
  10.         var cnv = document.getElementById("maps");
  11.         var jg = new jsGraphics(cnv);jg.setStroke(4);
  12.         jg.setColor("#ff0000"); // red
  13.         jg.drawEllipse(160, 160, 100, 100);
  14.         jg.paint();
  15.     }
  16.     //-->
  17.     </script>
  18. </HEAD>
  19. <BODY>
  20. <div id="maps">
  21.     <div id="test" style="background-color:yellow; left:0px; top:0px; width:100px; height:100px; position: relative;">
  22.     <input value="drawCircle" onclick="draw();" type="button">
  23.         <div style="left:200px; top:200px;position: absolute;" >
  24.         <div style="background-color:red; width:20px; height:20px; z-index:10000; position: relative;">
  25.             <IMG SRC="search.png" WIDTH="16" HEIGHT="16">
  26.         </div>
  27.         <div style="background-color:orange; left:-40px; top:-40px; width:100px; height:100px; position: absolute;">
  28.         </div>
  29.         </div>
  30.    </div>
  31. </div>
  32. </BODY>
  33. </HTML>

阅读(252) | 评论(0) | 转发(0) |
0

上一篇:没有了

下一篇:没有了

给主人留下些什么吧!~~