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


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);
Javascript 相关文章推荐
会自动逐行上升的文本框
Jun 30 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
Apr 16 Javascript
js判断设备是否为PC并调整图片大小
Feb 12 Javascript
JQuery中节点遍历方法实例
May 18 Javascript
JavaScript在网页中画圆的函数arc使用方法
Nov 13 Javascript
Javascript动画效果(2)
Oct 11 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
如何抽象一个Vue公共组件
Oct 17 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
May 09 Javascript
json字符串传到前台input的方法
Aug 06 Javascript
使用gulp构建前端自动化的方法示例
Dec 25 Javascript
jQuery实现放大镜案例
Oct 19 jQuery
JS简单实现登陆验证附效果图
Nov 19 #Javascript
JS随机漂浮广告代码具体实例
Nov 19 #Javascript
JS简单实现元素复制示例附图
Nov 19 #Javascript
js获取当月最后一天实例代码
Nov 19 #Javascript
基于jquery自定义的漂亮单选按钮RadioButton
Nov 19 #Javascript
基于jquery扩展漂亮的下拉框可以二次修改
Nov 19 #Javascript
showModelDialog弹出文件下载窗口的使用示例
Nov 19 #Javascript
You might like
php报表之jpgraph柱状图实例代码
2011/08/22 PHP
php删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
解析用PHP实现var_export的详细介绍
2013/06/20 PHP
Laravel 5框架学习之Laravel入门和新建项目
2015/04/07 PHP
详解PHP的Laravel框架中Eloquent对象关系映射使用
2016/02/26 PHP
PHP array_shift()用法实例分析
2019/01/07 PHP
javascript得到XML某节点的子节点个数的脚本
2008/10/11 Javascript
Javascript String对象扩展HTML编码和解码的方法
2009/06/02 Javascript
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
不使用浏览器运行javascript代码的方法
2013/07/24 Javascript
jquery查找tr td 示例模拟
2014/05/08 Javascript
javascript白色简洁计算器
2015/05/04 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
JavaScript必知必会(九)function 说起 闭包问题
2016/06/08 Javascript
Js利用Canvas实现图片压缩功能
2017/09/13 Javascript
理解 JavaScript EventEmitter
2018/03/29 Javascript
学习Vue组件实例
2018/04/28 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
2019/07/26 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
分享一个常用的Python模拟登陆类
2015/03/29 Python
python实现多人聊天室
2020/03/31 Python
python实现的生成word文档功能示例
2019/08/23 Python
python计算n的阶乘的方法代码
2019/10/25 Python
Python HTMLTestRunner库安装过程解析
2020/05/25 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
TCP/IP的分层模型
2013/10/27 面试题
酒店管理求职信范文
2014/04/06 职场文书
法学专业毕业实习自我鉴定2014
2014/09/27 职场文书
出国留学英文自荐信
2015/03/25 职场文书
小学德育工作总结2015
2015/05/12 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书