Jquery結合css 實現小氣泡效果

效果就是個滑鼠hover上去的時候，浮出乙個氣泡~上面有其他選單~

氣泡的div:

語文數學物理化學語文數學物理化學語文數學物理化學

兩種實現方式：

1.用js控制氣泡的座標

思路：先把氣泡的div部分寫在body裡面，然後隱藏起來；然後滑鼠hover事件觸發的時候，ajax去後台取資料，插入到氣泡裡面，取到hover的觸發座標，把氣泡的座標算出來，然後把氣泡的display:block。這樣，氣泡就在指定位置出現了。

優點：少寫很多**，而且js上不用插入大篇幅的html**

缺點：每次觸發hover都要去計算座標

氣泡的css：

.mytip .tip_top .tip_mid .tip_mid a .tip_mid a:hover .tip_bottom

jquery:


$().ready(function());
});$('#tip').attr("style","left:"+left+";top:"+top+";display:block");
$('#tipcontent').html(list);
}});
},function(){});
function gettop(e)
//獲取元素的橫座標
function getleft(e)
});

頁面部分:

2.用css相對座標

思路：寫乙個在每個要hover的地方放乙個span，這個主要是用來限制氣泡div的相對座標用，當事件觸發的時候，ajax去後台取資料，插入氣泡的資料區，然後把氣泡的整段div**插入到span裡面去，由於氣泡裡面有跟span的相對位置限定，所以不需要取滑鼠座標了。

優點：不需要計算滑鼠座標，而且隨便插到哪個span下都可以用

缺點：js上寫很多html，整段的div都要寫在js裡面，麻煩...

氣泡css**:

.mytip .tip_top .tip_mid .tip_mid a .tip_mid a:hover .tip_bottom

jquery：


$().ready(function());
});var html="那一堆氣泡div的**"+list;//太長了..不寫了..
$(html).insertafter('頁面的那個a後面');//太長了...不寫了
}});
},function(){});
});

頁面**：

機關企事業語文數學物理化學語文數學物理化學語文數學物理化學 //這個就是在li裡面套了個span，然後把a放在span裡面

總結：效果的實現方式有很多種...換個思路就行了..

第一種方案是我自己的.因為不會寫css..所以只好計算座標..

第二種方案是美工的建議..他懂css.幫我調整了氣泡的css.增加了span.提供了第二種思路.thks

效果圖如下：

[img]

檢視原圖效果比較好...

Jquery結合css 實現小氣泡效果

Spring MVC結合jQuery實現跨域請求

結合php PHP與jQuery結合的功能

jquery 結合ajax例子

Jquery結合css 實現小氣泡效果

Spring MVC結合jQuery實現跨域請求

結合php PHP與jQuery結合的功能

jquery 結合ajax例子

相關推薦