2つのdivの間に線を引くには?
現在、あるdivの右下隅と別のdivの右上隅の間に斜めの線を引こうとしています。可能であれば、jQueryなしでそれをしたいです。これは可能ですか?
33
2
現在、あるdivの右下隅と別のdivの右上隅の間に斜めの線を引こうとしています。可能であれば、jQueryなしでそれをしたいです。これは可能ですか?
http://jsfiddle.net/cnmsc1tm/
IE8以下ではCSSの制限により動作しません。
編集 (同じ問題を持つ他の人のために)。
例えば、右上と右下の div ではない 2 つのコーナーから線を作成する必要がある場合は、コードのこのセクションに移動してください。
ここで
+ off1.width
と+ off1.height
とあるのは、コードが div の下か右の位置を計算していることを意味します。この+ off1.width
や+ off1.height
を削除すると、div の左側または上側の位置が計算されます。EDIT より標準的な getOffset 関数に更新しました。本当にアナルにしたい場合は、document.documentElement.client[Left/Top]も追加してoffsetParentツリーを歩く必要があるでしょうが、このような例ではgetBoundingClientRect()とwindow.page[X/Y]offsetで十分だと思います。
jQを使わずにできる方法がある。
1.offsetを使ってdivの位置を求めます。 2.2. 勾配を求める。 3.ループの中で傾きを使って、開始位置から終了位置まで
1x1px
の点を描画する。