js画线
<body>
<div id="main">
</div>
<div id="fd" style="filter:alpha(opacity=100);opacity:1;position: absolute;text-align: center; z-index:9999; width: 100px; height: 78px; left: 155px; top: 177px; border-right: #0099ff 1px solid; border-top: #0099ff 1px solid; border-left: #0099ff 1px solid; border-bottom: #0099ff 1px solid;">
拖动的div
</div>
<script language="javascript">
//----------------鼠标拖动-------------------
var od = document.getElementById("fd");
var dx,dy,mx,my,mouseD;
var odrag;
var isIE = document.all ? true : false;
document.onmousedown = function(e){
var e = e ? e : event;
if(e.button == (document.all ? 1 : 0))
{
mouseD = true;
}
}
document.onmouseup = function(){
mouseD = false;
odrag = "";
if(isIE)
{
od.releaseCapture();
od.filters.alpha.opacity = 100;
}
else
{
window.releaseEvents(od.MOUSEMOVE);
od.style.opacity = 1;
}
}
od.onmousedown = function(e){
odrag = this;
var e = e ? e : event;
if(e.button == (document.all ? 1 : 0))
{
mx = e.clientX;
my = e.clientY;
od.style.left = od.offsetLeft + "px";
od.style.top = od.offsetTop + "px";
if(isIE)
{
od.setCapture();
od.filters.alpha.opacity = 50;
}
else
{
window.captureEvents(Event.MOUSEMOVE);
od.style.opacity = 0.5;
}
}
}
document.onmousemove = function(e){
var e = e ? e : event;
if(mouseD==true && odrag)
{
var mrx = e.clientX - mx;
var mry = e.clientY - my;
var result=parseInt(od.style.left) +mrx;
od.style.left = parseInt(od.style.left) +mrx + "px";
od.style.top = parseInt(od.style.top) + mry + "px";
mx = e.clientX;
my = e.clientY; var html="";
var x=od.style.left;
var y=od.style.top;
var lineHtml=drawLine(0,0,parseInt(x),parseInt(y),"red");
document.getElementById("main").innerHTML=lineHtml;
}
} function drawLine(x0, y0, x1, y1, color) {
var rs = "";
if (y0 == y1) //画横线
{
if (x0 > x1) {
var t = x0;
x0 = x1;
x1 = t;
}
rs = "<span style='top:" + y0 + ";left:" + x0 + ";position:absolute;font-size:1px;background-color:" + color + ";height:1; width:" + Math.abs(x1 - x0) + "'></span>";
}
else if (x0 == x1) //画竖线
{
if (y0 > y1) {
var t = y0;
y0 = y1;
y1 = t;
}
rs = "<span style='top:" + y0 + ";left:" + x0 + ";position:absolute;font-size:1px;background-color:" + color + ";width:1;height:" + Math.abs(y1 - y0) + "'></span>";
}
else {
var lx = x1 - x0;
var ly = y1 - y0;
var l = Math.sqrt(lx * lx + ly * ly);
rs = new Array();
for (var i = 0; i < l; i += 1) {
var p = i / l;
var px = parseInt(x0 + lx * p);
var py = parseInt(y0 + ly * p);
rs[rs.length] = "<span style='top:" + py + ";left:" + px + ";height:1;width:1;position:absolute;font-size:1px;background-color:" + color + "'></span>";
}
rs = rs.join("");
}
return rs;
} </script>
</body>
http://bbs.csdn.net/topics/260003609
js画线的更多相关文章
- 纯JS画点、画线、画圆的方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Unity3D 画线插件 Vectrosity_Simple2DLine
Vectrosity是一个很方便的画线插件,用它我们可以画出2D,3D,贝塞尔,圆,椭圆等各种线条图案. :链接: http://pan.baidu.com/s/1pJjTFjt 密码: uesn 首 ...
- 用JS画斐波那契螺旋线（黄金螺旋线）
偶然看到斐波那契螺旋线(黄金螺旋线)的定义及画图方法,试着用JS画了一下,很漂亮,很好玩 具体定义及画法大家查一下就有了,很简单. 以下是代码: <!DOCTYPE html> <h ...
- Openlayer 3 的画线测量长度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS画几何图形之三【正弦曲线】
数学式:y=Asin(ωx+φ)+k 样例:http://www.zhaojz.com.cn/demo/draw7.html 依赖:[点].[直线] JS函数的声明: //画正弦曲线 //dot 原点 ...
- JS画几何图形之一【直线】
JS画图的想法经过大脑的时候,觉得有点意思,所以就实践了一番.JS画图为系列文章,本是讲点.线和面 先看样例:http://www.zhaojz.com.cn/demo/draw5.html 一.点 ...
- H5中画图标签Canvas---画矩形，画线，画圆，渐变色，图形载入
一: 1.鼠标监视坐标值 <!DOCTYPE html> <head> <meta charset=UTF-8> <title>canvas的演示< ...
- 解题：在下面画线的地方填任何代码,使得最终输出 'hello world',至少写五个不同思路的方案
今天(已经好些天前了...),群里面(JS前端开发跳板6群[81501322])有个群友问了这样一个问题. 如题:在下面画线的地方填任何代码,使得最终输出 'hello world',至少写五个不同思 ...
- 兼容IE浏览器的canvas画线和圆圈
1.新建test.html文件,代码如下: <!DOCTYPE html><html><head> <meta charset="utf-8& ...
随机推荐
- C++不能显式调用构造函数，会生成匿名对象，这点与Java完全不一样！
Java可以直接调用同名构造函数,仅仅起初始化的功能,并不构造新的对象,但是C++里面没有.看一下这段代码: class A { public: A() { printf("A() \n&q ...
- c# 将字符串转换为逻辑表达式（字符串转换布尔）
比如:string str="6>5"; 要的效果是:bool result=6>5 方案一: 命名空间:System.Data: DataTable dt = new ...
- 将SQL Azure数据库备份到本地SQL Server 2012
整个备份过程可以分为如下两大步骤进行: 一.通过“Export Data-tier Application”先将目标SQL Azure的数据库备份到本地,详细步骤如下: 1.启动SQL Server ...
- 日期工具类 - DateUtil.java
日期工具类,提供对日期的格式化和转换方法.获取区间日期.指定日期.每月最后一天等. 源码如下:(点击下载 -DateUtil.java.commons-lang-2.6.jar ) import ja ...
- 堆的 两种实现 （数组和STL）
基本思想: 两种操作都跟树的深度成正比,所以复杂度 O(log(n)) ; push():在向堆中插入数值时,首先在堆的末尾插入该数值,然后不断向上提直到没有大小颠倒为止. pop(): 从堆中取出 ...
- Linux屏幕录制gif的工具及教程
准备 要两个工具配合使用.它们可以用命令行安装,也可以用软件管理器安装. 1,byzanz 安装后有两个命令 byzanz-record 录制,既能录制 Gif 动画,又可录制 Ogv 视 ...
- What is the difference between DAO and DAL?
What is the difference between DAO and DAL? The Data Access Layer (DAL) is the layer of a system tha ...
- LEFT JOIN、Right、Full后ON和WHERE的区别
今天在工作的时候碰到了一个问题,A表B表left join后在on后面关于A表的条件过滤语句没起到我想要的过滤作用,还是对左连接等理解的不够呀. SELECT * FROM student; SELE ...
- 线程中无法实例化spring注入的服务的解决办法
问题描述 在Java Web应用中采用多线程处理数据,发现Spring注入的服务一直报NullPointerException.使用注解式的声明@Resource和XML配置的bean声明,都报空指针 ...
- QQ互发消息
private NewsData data; private void button3_Click(object sender, EventArgs e) //发送 { string x = text ...