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

js画线

2015-07-10 17:06 706 查看

<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

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

标签：

相关文章推荐

新的分享

章节导航