<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画线的更多相关文章

  1. 纯JS画点、画线、画圆的方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. Unity3D 画线插件 Vectrosity_Simple2DLine

    Vectrosity是一个很方便的画线插件,用它我们可以画出2D,3D,贝塞尔,圆,椭圆等各种线条图案. :链接: http://pan.baidu.com/s/1pJjTFjt 密码: uesn 首 ...

  3. 用JS画斐波那契螺旋线（黄金螺旋线）

    偶然看到斐波那契螺旋线(黄金螺旋线)的定义及画图方法,试着用JS画了一下,很漂亮,很好玩 具体定义及画法大家查一下就有了,很简单. 以下是代码: <!DOCTYPE html> <h ...

  4. Openlayer 3 的画线测量长度

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. JS画几何图形之三【正弦曲线】

    数学式:y=Asin(ωx+φ)+k 样例:http://www.zhaojz.com.cn/demo/draw7.html 依赖:[点].[直线] JS函数的声明: //画正弦曲线 //dot 原点 ...

  6. JS画几何图形之一【直线】

    JS画图的想法经过大脑的时候,觉得有点意思,所以就实践了一番.JS画图为系列文章,本是讲点.线和面 先看样例:http://www.zhaojz.com.cn/demo/draw5.html 一.点 ...

  7. H5中画图标签Canvas---画矩形，画线，画圆，渐变色，图形载入

    一: 1.鼠标监视坐标值 <!DOCTYPE html> <head> <meta charset=UTF-8> <title>canvas的演示< ...

  8. 解题：在下面画线的地方填任何代码,使得最终输出 'hello world',至少写五个不同思路的方案

    今天(已经好些天前了...),群里面(JS前端开发跳板6群[81501322])有个群友问了这样一个问题. 如题:在下面画线的地方填任何代码,使得最终输出 'hello world',至少写五个不同思 ...

  9. 兼容IE浏览器的canvas画线和圆圈

    1.新建test.html文件,代码如下: <!DOCTYPE html><html><head>    <meta charset="utf-8& ...

随机推荐

  1. 做一款仿映客的直播App

    投稿文章,作者:JIAAIR(GitHub) 一.直播现状简介 1.技术实现层面 技术相对都比较成熟,设备也都支持硬编码.iOS还提供现成的Video ToolBox框架,可以对摄像头和流媒体数据结构 ...

  2. TestDirector域或工程用户的管理

    一.添加用户 单击界面上的"Users"按钮,进入如下图: 我们可以添加新用户,删除用户,导入用户,修改用户密码,用户的详细信息. 1.单击"New"按钮为域或 ...

  3. Java-马士兵设计模式学习笔记-责任链模式-处理数据

    一.目标 数据提交前做各种处理 二.代码 1.MsgProcessor.java public class MsgProcessor { private List<Filter> filt ...

  4. Java数据结构之排序

    1.冒泡排序:时间复杂度为O(n2) 假设是由小到大排序:相邻两个数之间进行比较,较大的数在后面.一次比较过后最大的数排在最后面 如:40.8.15.18.12一次排序后为:8.15.18.12.40 ...

  5. ActionScript 设置元件色彩属性

        var clr:Color = new Color(mc);     var ct:Object = {ra:100, rb:0, ga:100, gb:0, ba:100, bb:0, aa ...

  6. 下拉刷新控件(5)SwipeRefreshLayout官方教程(下)响应刷新事件

    http://developer.android.com/training/swipe/respond-refresh-request.html This lesson shows you how t ...

  7. java-基础练习题1

    /** 题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,* 假如兔子都不死,问每个月的兔子总数为多少?* 1.程序分析: 兔子的规律为数列1, ...

  8. js中的json对象详细介绍

    JSON一种简单的数据格式,比xml更轻巧,在JavaScript中处理JSON数据不需要任何特殊的API或工具包,下面为大家详细介绍下js中的json对象, 1.JSON(JavaScript Ob ...

  9. [ionic开源项目教程] - 第4讲 通Service层获取数据列表

    第4讲:通Service层获取数据列表 上一讲中页面的基本架构已完成,这一讲介绍如何通过service层从服务器请求数据,在通过controller层为载体,显示到视图层. 1.在services.j ...

  10. Asp.net中的HttpModule和HttpHandler的简单用法

    在Asp.net中,HttpModule和HttpHandler均可以截取IIS消息进行处理,这使得我们制作人员能够非常方便的进行诸如图片水印添加,图片盗链检查等功能. 下面先就HttpModule的 ...