鼠標(biāo)滑在標(biāo)題上顯示圖片的JS代碼
更新時(shí)間:2013年11月19日 16:33:17 作者:
這篇文章主要介紹了鼠標(biāo)滑在標(biāo)題上顯示圖片的JS代碼,有需要的朋友可以參考一下
復(fù)制代碼 代碼如下:
<SCRIPT type=text/javascript src="js/jquery.tooltip.v.1.1.js"></SCRIPT>
<SCRIPT type=text/javascript src="js/jquery.tooltip.execute.js"></SCRIPT>
機(jī)型:<a href="#nogo" class="with-tooltip" title="<img src='images/plane/${air.aircrafttype}.jpg'/>" >${air.aircrafttype}</a>
jquery.tooltip.execute.js:
$(document).ready(function(){
$(".with-tooltip").simpletooltip();
});
tooltip.v.1.1.js: chabaoo.cn
/**
*
* simpleTooltip jQuery plugin, by Marius ILIE
* visit for details
*
**/
(function($){ $.fn.simpletooltip = function(){
return this.each(function() {
var text = $(this).attr("title");
$(this).attr("title", "");
if(text != undefined) {
$(this).hover(function(e){
var tipX = e.pageX + 12;
var tipY = e.pageY + 12;
$(this).attr("title", "");
$("body").append("<div id='simpleTooltip' style='position: absolute; z-index: 100; display: none;'>" + text + "</div>");
if($.browser.msie) var tipWidth = $("#simpleTooltip").outerWidth(true)
else var tipWidth = $("#simpleTooltip").width()
$("#simpleTooltip").width(tipWidth);
$("#simpleTooltip").css("left", tipX).css("top", tipY).fadeIn("medium");
}, function(){
$("#simpleTooltip").remove();
$(this).attr("title", text);
});
$(this).mousemove(function(e){
var tipX = e.pageX + 12;
var tipY = e.pageY + 12;
var tipWidth = $("#simpleTooltip").outerWidth(true);
var tipHeight = $("#simpleTooltip").outerHeight(true);
if(tipX + tipWidth > $(window).scrollLeft() + $(window).width()) tipX = e.pageX - tipWidth;
if($(window).height()+$(window).scrollTop() < tipY + tipHeight) tipY = e.pageY - tipHeight;
$("#simpleTooltip").css("left", tipX).css("top", tipY).fadeIn("medium");
});
}
});
}})(jQuery);
您可能感興趣的文章:
- JS實(shí)現(xiàn)超簡(jiǎn)潔網(wǎng)頁title標(biāo)題跑動(dòng)閃爍提示效果代碼
- js實(shí)現(xiàn)網(wǎng)頁標(biāo)題欄閃爍提示效果實(shí)例分析
- 一個(gè)JS函數(shù)搞定網(wǎng)頁標(biāo)題(title)閃動(dòng)效果
- js實(shí)現(xiàn)的標(biāo)題欄新消息閃爍提示效果
- 拖動(dòng)table標(biāo)題實(shí)現(xiàn)改變td的大小(css+js代碼)
- 復(fù)制本貼標(biāo)題和地址的js代碼
- 用js實(shí)現(xiàn)的打字效果的帶鏈接的新聞標(biāo)題
- JS實(shí)現(xiàn)網(wǎng)頁標(biāo)題欄顯示當(dāng)前時(shí)間和日期的完整代碼
相關(guān)文章
javascript深拷貝的原理與實(shí)現(xiàn)方法分析
這篇文章主要介紹了javascript深拷貝的原理與實(shí)現(xiàn)方法,簡(jiǎn)單分析了值傳遞和引用傳遞的原理與實(shí)現(xiàn)方法,并結(jié)合實(shí)例形式給出了深拷貝的具體實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-04-04javascript委托(Delegate)blur和focus用法實(shí)例分析
這篇文章主要介紹了javascript委托(Delegate)blur和focus用法,實(shí)例分析了javascript委托的用法及針對(duì)常見瀏覽器的使用技巧,需要的朋友可以參考下2015-05-05bootstrap datepicker 與bootstrapValidator同時(shí)使用時(shí)選擇日期后無法正常觸發(fā)校驗(yàn)的解
這篇文章主要介紹了bootstrap datepicker 與bootstrapValidator同時(shí)使用時(shí)選擇日期后無法正常觸發(fā)校驗(yàn)的解決思路的相關(guān)資料,需要的朋友可以參考下2016-09-09關(guān)于Promise 異步編程的實(shí)例講解
下面小編就為大家?guī)硪黄P(guān)于Promise 異步編程的實(shí)例講解。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09JS實(shí)現(xiàn)鼠標(biāo)框選效果完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)鼠標(biāo)框選效果,可實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊出現(xiàn)框選效果的功能,同時(shí)下方實(shí)時(shí)顯示框選大小,涉及javascript鼠標(biāo)事件的響應(yīng)與頁面元素的動(dòng)態(tài)運(yùn)算技巧,需要的朋友可以參考下2016-06-06Javascript異步編程模型Promise模式詳細(xì)介紹
異步模式在 Web 編程中變得越來越重要,如何處理異步請(qǐng)求后的操作是一件麻煩事。Promise 是一種異步編程模型,術(shù)語稱作 Deferred 模式,它通過一組API來規(guī)范化異步操作,讓異步操作的流程控制更加容易。2014-05-05JavaScript Canvas實(shí)現(xiàn)驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了JavaScript Canvas實(shí)現(xiàn)驗(yàn)證碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-08-08