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

 更新时间:2013年11月19日 16:33:17   作者:  
这篇文章主要介绍了鼠标滑在标题上显示图片的JS代码,有需要的朋友可以参考一下
复制代码 代码如下:

                 <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.jb51.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);

相关文章

  • layui前端时间戳转化实例

    layui前端时间戳转化实例

    今天小编就为大家分享一篇layui前端时间戳转化实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • 如何用JS有效的压缩图片

    如何用JS有效的压缩图片

    JavaScript操作压缩图片原理不难,已有成熟 API,然而在实际输出压缩后结果却总有意外,有些图片竟会越压缩越大,加之终端(手机)类型众多,有些手机压缩图片甚至变黑。本文将一步一步解决此类问题
    2021-05-05
  • JavaScript实现的encode64加密算法实例分析

    JavaScript实现的encode64加密算法实例分析

    这篇文章主要介绍了JavaScript实现的encode64加密算法,实例分析了javascript处理encode64编码针对字符串加密的技巧,非常简洁实用,需要的朋友可以参考下
    2015-04-04
  • JavaScript基于原型链的继承

    JavaScript基于原型链的继承

    原型链是JavaScript中继承的主要方法。本文重点给大家介绍JavaScript基于原型链的继承,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-06-06
  • javascript插件开发的一些感想和心得

    javascript插件开发的一些感想和心得

    这篇文章主要介绍了javascript插件开发的一些感想和心得,需要的朋友可以参考下
    2016-02-02
  • ES6基础之字符串和函数的拓展详解

    ES6基础之字符串和函数的拓展详解

    这篇文章主要介绍了ES6基础之字符串和函数的拓展,结合实例形式分析了ES6字符串与函数扩展的相关操作技巧与注意事项,需要的朋友可以参考下
    2019-08-08
  • JS如何获取地址栏的参数实例讲解

    JS如何获取地址栏的参数实例讲解

    本篇文章给大家带来了关于JS如何获取地址栏的参数实例讲解,有需要的朋友们参考下。
    2018-10-10
  • three.js中文文档学习之通过模块导入

    three.js中文文档学习之通过模块导入

    这篇文章主要给大家介绍了关于three.js中文文档学习之通过模块导入的相关资料,文中通过示例代码介绍的非常详细,对大家学习或使用three.js具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-11-11
  • 微信小程序视图控件与bindtap之间的问题的解决

    微信小程序视图控件与bindtap之间的问题的解决

    这篇文章主要介绍了微信小程序视图控件与bindtap之间的问题的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 原生js实现放大镜效果

    原生js实现放大镜效果

    本文主要分享了原生js封装实现放大镜效果的示例代码,具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01

最新评论