源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2020-01-13 21:26 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:鼠标滑在标题上显示图片的JS代码
[u]复制代码[/u] 代码如下:
                 <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.1sucai.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);
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部