鼠标滑在标题上显示图片的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 相关文章推荐
Express作者TJ告别Node.js奔向Go
Jul 14 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
Aug 27 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
Apr 24 Javascript
JS打字效果的动态菜单代码分享
Aug 21 Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
Jan 27 Javascript
JS生成不重复的随机数组的简单实例
Jul 10 Javascript
使用react-router4.0实现重定向和404功能的方法
Aug 28 Javascript
Js中将Long转换成日期格式的实现方法
Jun 05 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 Javascript
vue3中provide && inject的使用
Jul 01 Vue.js
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
Drupal读取Excel并导入数据库实例
2014/03/02 PHP
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
PHP中unset,array_splice删除数组中元素的区别
2014/07/28 PHP
php-fpm添加service服务的例子
2018/04/27 PHP
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
js对字符的验证方法汇总
2015/02/04 Javascript
JavaScript入门基础
2015/08/12 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
jQuery 选择器(61种)整理总结
2016/09/26 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
JS深入学习之数组对象排序操作示例
2020/05/01 Javascript
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python if not in 多条件判断代码
2016/09/21 Python
Sanic框架应用部署方法详解
2018/07/18 Python
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
浅析python参数的知识点
2018/12/10 Python
Python 中包/模块的 `import` 操作代码
2019/04/22 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
Python学习笔记基本数据结构之序列类型list tuple range用法分析
2019/06/08 Python
浅析python redis的连接及相关操作
2019/11/07 Python
Python实现队列的方法示例小结【数组,链表】
2020/02/22 Python
Python绘图实现台风路径可视化代码实例
2020/10/23 Python
python爬虫请求头的使用
2020/12/01 Python
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
美国最古老的精致书写工具制造商:A.T. Cross(高仕)
2018/01/30 全球购物
面向对象编程的优势是什么
2015/12/17 面试题
在使用非全零作为空指针内部表达的机器上, NULL是如何定义
2014/11/09 面试题
教育学专业实习生的自我鉴定
2013/11/26 职场文书
产品发布会策划方案
2014/05/12 职场文书
保护地球的标语
2014/06/17 职场文书
英语投诉信范文
2015/07/03 职场文书
初中运动会前导词
2015/07/20 职场文书