- ベストアンサー
十字カーソルについて
ホームページでページ縦横を十字のカーソルが横断するページがありますよね。 例 http://www.awcs.org/dhtml/sample/crossmousered.html こういうページって横線が2pxぐらいになっています。 これを縦線の1pxに合わせることは出来ませんか？
- gagagaga28
- お礼率69% (85/122)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ざっと見たところ、作者の意図では1pxになるようにしているみたいですね。 線には<span>を利用していますが、heightを1pxに指定してもIEのCSS解釈で、ある高さの確保を優先してしまうようです。（その結果1pxになっていない） 横線の対象要素にoverflow:hiddenを追加することで横線も細くなりました。 でも、このコードは思いっきりIE専用でかかれてますので、他のブラウザでは何も表示されないと思われます。 また、画面のスクロールにも対応しきれていないみたい。（作成当時は対応していたようですが…） さらに、CSS expressionsを利用していますが、これもIE8からははずされ始めているようです。 http://msdn.microsoft.com/ja-jp/ie/dd253083.aspx というわけで、今後、あまり有効なものとは思えませんが… おっと、忘れるところでした。 span#x { overflow:hidden; }
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
#1です。 クロスブラウザはよくわかんないけど、こんな感じ？(特に、Macは不明） （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <input type="button" value="show" onclick="LineCursor.show()"> <input type="button" value="hide" onclick="LineCursor.hide()"> <script type="text/javascript"> <!-- var LineCursor = function(){}; (function(doc){ var docE = doc.compatMode=='CSS1Compat'?doc.documentElement:doc.body; var setAttr = function(node, attr, flag){ var i, s = node.style; if (flag) for (i in attr) s[i] = (attr[i] | 0) + 'px'; else for (i in attr) s[i] = attr[i]; } LineCursor.prototype = { cursor : function(evt){ var w = docE.clientWidth, h = docE.clientHeight; var st = docE.scrollTop, sl = docE.scrollLeft; setAttr(this.x, {top:st + evt.clientY - 1, left:sl, width:w}, 1); setAttr(this.y, {left:sl + evt.clientX - 1, top:st, height:h }, 1); }, show : function(){ this.displayer(true); }, hide : function(){ this.displayer(false); }, displayer : function(f){ this.x.style.display = f?"block":"none"; this.y.style.display = f?"block":"none"; } } LineCursor.set = function(){ var cssData = { position: 'absolute', border: 0, padding: 0, width: '0px', height: '0px', overflow: 'hidden', backgroundColor: '#f00' }; var L = new LineCursor(); var div = doc.createElement("div"); setAttr(div, cssData); doc.body.appendChild(div); L.x = div; div = div.cloneNode(false); doc.body.appendChild(div); L.y = div; setAttr(L.x, {height:'1px'}); setAttr(L.y, {width:'1px'}); LineCursor = L; doc./*@cc_on@if(1)attachEvent('on' + @else@*/addEventListener(/*@end@*/ 'mousemove', function(){ LineCursor.cursor.apply(LineCursor, arguments); }, false); LineCursor.set = null; } LineCursor.set(); })(document); //--> </script> </body> </html>
お礼
回答ありがとうございます。 なるほど、これでスクロールに対応しました。でも、スクロール時にマウスを動かさないと 線が途切れてしまうのが気になります。 私は最初の回答を以下のページのスクリプトに応用して使っています。 http://gac.kir.jp/9/13049 これなら、何も問題が出ません。線の太さにもスクロールにも対応しています。
お礼
回答ありがとうございます。 overflowを付けるだけで簡単に細くする事ができるんですね。 私が見たところでは横線が太いのばかりで全く知りませんでした。 出来れば、画面のスクロールに対応しているページを教えてもらえば有り難いです。