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