Posted in Javascript onNovember 19, 2013
<SCRIPT type=text/javascript src="js/jquery.tooltip.v.1.1.js"></SCRIPT> <SCRIPT type=text/javascript src="js/jquery.tooltip.execute.js"></SCRIPT> 机型:<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: 3water.com /** * * 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代码
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@