在jQuery中的兩個圖像之間創建線條

-2

有沒有什麼方法可以用jQuery寫入html。因此，當用戶點擊任何一個顯示的圖像時，它們之間會出現一條線。我發現了很多關於「如何在畫布上做到這一點」的信息，並且我發現可以使用html文件中的圖像。例如，當點擊id1和id4時，會出現一條連接它們的線。在jQuery中的兩個圖像之間創建線條

來源

2013-12-12 user3095198

你可以在它們之間放置一個分隔符圖像，並使它在任何圖像上點擊可見？ –

就像這樣：http://jsfiddle.net/kDs2Q/45/？ – TheCarver

Thanks to @LastCoder：

這不會在IE8或下方因CSS限制問題。它使用純Javascript，不需要jQuery。

function getOffset(el) { // return element top, left, width, height 
    var _x = 0; 
    var _y = 0; 
    var _w = el.offsetWidth|0; 
    var _h = el.offsetHeight|0; 
    while(el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) { 
     _x += el.offsetLeft - el.scrollLeft; 
     _y += el.offsetTop - el.scrollTop; 
     el = el.offsetParent; 
    } 
    return { top: _y, left: _x, width: _w, height: _h }; 
} 

function connect(div1, div2, color, thickness) { // draw a line connecting elements 
    var off1 = getOffset(div1); 
    var off2 = getOffset(div2); 
    // bottom right 
    var x1 = off1.left + off1.width; 
    var y1 = off1.top + off1.height; 
    // top right 
    var x2 = off2.left + off2.width; 
    var y2 = off2.top; 
    // distance 
    var length = Math.sqrt(((x2-x1) * (x2-x1)) + ((y2-y1) * (y2-y1))); 
    // center 
    var cx = ((x1 + x2)/2) - (length/2); 
    var cy = ((y1 + y2)/2) - (thickness/2); 
    // angle 
    var angle = Math.atan2((y1-y2),(x1-x2))*(180/Math.PI); 
    // make hr 
    var htmlLine = "<div style='padding:0px; margin:0px; height:" + thickness + "px; background-color:" + color + "; line-height:1px; position:absolute; left:" + cx + "px; top:" + cy + "px; width:" + length + "px; -moz-transform:rotate(" + angle + "deg); -webkit-transform:rotate(" + angle + "deg); -o-transform:rotate(" + angle + "deg); -ms-transform:rotate(" + angle + "deg); transform:rotate(" + angle + "deg);' />"; 
    // 
    // alert(htmlLine); 
    document.body.innerHTML += htmlLine; 
}

使用類似簡單的稱之爲：

<a onclick="testIt();">Draw line</a> 

window.testIt = function() { 
    var div1 = document.getElementById('div1'); 
    var div2 = document.getElementById('div2') 
    connect(div1, div2, "#0F0", 2); 
}

Here is the working example.

來源

2013-12-12 12:00:20 TheCarver

我認爲使用HTML 5，你可以做this.Please嘗試此鏈接。 Html-5

來源

2013-12-12 12:05:09

在jQuery中的兩個圖像之間創建線條

回答

相關問題