鼠标滑在标题上显示图片的JS代码

前端技术 2023/09/03 JavaScript
复制代码 代码如下:

                 <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: www.phpstudy.net
 /**
*
* 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);

本文地址:https://www.stayed.cn/item/6980

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。