JQueryベースの簡単なマウス追従ヒント効果

4056 ワード

1.効果は図のように
  
2.実現構想
1マウスをタイトルに移動(ここでは))
divを作成します.divの内容はマウスの位置のテキストです.
作成したdivをドキュメントに追加
ヒントレイヤの位置を設定するには
2マウスでタイトルを移動
divの削除
3マウスがタイトル内を移動するとき
div効果も追加
3.JQuery実装コード
 
  




<br/> <br/><style type="text/css"> <br>body <br>{ <br>font-size:12px; <br>} <br>a <br>{ <br>text-decoration:none; <br>} <br>a:hover <br>{ <br>color:#CC0000; <br>} <br>#main <br>{ <br>margin:100px auto; <br>width:350px; <br>height:150px; <br>border:solid #aaa 1px; <br>} <br>.tr_color{ <br>background-color:#aaa; <br>} <br></style> <br/><script src="../JQuery/jquery-1.4.2.min.js" type="text/javascript"/> <br/><script type="text/javascript"> <br>$(function(){ <br>$("tr:even").addClass("tr_color"); <br>$("#tb a").mouseover(function(e){ <br>var toolTip = "<div id='tooltip' width='100px' height='12px' style='position:absolute;border:solid #aaa 1px;background-color:#F9F9F9'>" + $(this).html() + "</div>"; <br>$("body").append(toolTip); <br>$("#tooltip").css({ <br>"top" :e.pageY + "px", <br>"left" :e.pageX + "px" <br>}); <br>$("#tb a").mouseout(function(){ <br>$("#tooltip").remove(); <br>}); <br>$("#tb a").mousemove(function(e){ <br>$("#tooltip").css({ <br>"top" :(e.pageY+5) + "px", <br>"left" :(e.pageX+2) + "px" <br>}); <br>}); <br>//alert("Y:" + e.pageY + "X:" + e.pageX); <br>}); <br>}); <br></script> <br/> <br/><div id="main"> <br/><h5>JQuery-- </h5> <br/><table id="tb" width="100%"> <br/><tr> <br/><td><a href="#"> 11</a></td> <br/><td><a href="#"> 12</a></td> <br/></tr> <br/><tr> <br/><td><a href="#"> 21</a></td> <br/><td><a href="#"> 22</a></td> <br/></tr> <br/><tr> <br/><td><a href="#"> 31</a></td> <br/><td><a href="#"> 32</a></td> <br/></tr> <br/><tr> <br/><td><a href="#"> 41</a></td> <br/><td><a href="#"> 42</a></td> <br/></tr> <br/><tr> <br/><td><a href="#"> 51</a></td> <br/><td><a href="#"> 52</a></td> <br/></tr> <br/><tr> <br/><td><a href="#"> 61</a></td> <br/><td><a href="#"> 62</a></td> <br/></tr> <br/></table> <br/></div> <br/> <br/> <br/> </code></pre> <br/> JQuery mouseover,mouseout,mousemove. <div class="clearfix"> <span id="art_bot" class="jbTestPos"/> </div> </div> </div> </div>