鼠标滑在标题上显示图片的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);

相关文章

  • Javascript 匿名函数及其代码模式原理

    Javascript 匿名函数及其代码模式原理

    很多同学知道怎么用这种匿名函数,却或许并不明白为什么这样写就能够调用匿名函数。也许知道后面的圆括号是执行前面的函数,而并不清楚前面的圆括号具有何种含义!本文将带你了解匿名函数的代码模式原理。
    2010-03-03
  • javascript深拷贝的原理与实现方法分析

    javascript深拷贝的原理与实现方法分析

    这篇文章主要介绍了javascript深拷贝的原理与实现方法,简单分析了值传递和引用传递的原理与实现方法,并结合实例形式给出了深拷贝的具体实现技巧,需要的朋友可以参考下
    2017-04-04
  • 数据库管理工具PHPMyAdmin

    数据库管理工具PHPMyAdmin

    这篇文章主要为大家介绍了数据库管理工具PHPMyAdmin使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • javascript委托(Delegate)blur和focus用法实例分析

    javascript委托(Delegate)blur和focus用法实例分析

    这篇文章主要介绍了javascript委托(Delegate)blur和focus用法,实例分析了javascript委托的用法及针对常见浏览器的使用技巧,需要的朋友可以参考下
    2015-05-05
  • bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路

    bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解

    这篇文章主要介绍了bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路的相关资料,需要的朋友可以参考下
    2016-09-09
  • 关于Promise 异步编程的实例讲解

    关于Promise 异步编程的实例讲解

    下面小编就为大家带来一篇关于Promise 异步编程的实例讲解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • JS实现鼠标框选效果完整实例

    JS实现鼠标框选效果完整实例

    这篇文章主要介绍了JS实现鼠标框选效果,可实现鼠标点击出现框选效果的功能,同时下方实时显示框选大小,涉及javascript鼠标事件的响应与页面元素的动态运算技巧,需要的朋友可以参考下
    2016-06-06
  • Javascript异步编程模型Promise模式详细介绍

    Javascript异步编程模型Promise模式详细介绍

    异步模式在 Web 编程中变得越来越重要,如何处理异步请求后的操作是一件麻烦事。Promise 是一种异步编程模型,术语称作 Deferred 模式,它通过一组API来规范化异步操作,让异步操作的流程控制更加容易。
    2014-05-05
  • JavaScript Canvas实现验证码

    JavaScript Canvas实现验证码

    这篇文章主要为大家详细介绍了JavaScript Canvas实现验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • ES6入门教程之变量的解构赋值详解

    ES6入门教程之变量的解构赋值详解

    这篇文章主要给大家介绍了关于ES6入门教程之变量的解构赋值的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用ES6具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-04-04

最新评论