鼠标滑在标题上显示图片的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 相关文章推荐
通过JAVASCRIPT读取ASP设定的COOKIE
Nov 24 Javascript
获取当前网页document.url location.href区别总结
May 10 Javascript
实现连缀调用的map方法(prototype)
Aug 05 Javascript
jquery的$(document).ready()和onload的加载顺序
May 26 Javascript
JQuery动态给table添加、删除行 改进版
Jan 19 Javascript
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 Javascript
Highcharts入门之基本属性
Aug 02 Javascript
jQuery实现获取h1-h6标题元素值的方法
Mar 06 Javascript
详解如何使用微信小程序云函数发送短信验证码
Mar 13 Javascript
基于JS实现数字动态变化显示效果附源码
Jul 18 Javascript
JS代码优化的8点建议
Feb 04 Javascript
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广告加载类用法实例
2014/09/23 PHP
PHP验证码类ValidateCode解析
2017/01/07 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
sina的lightbox效果。
2007/01/09 Javascript
jquery ajax 局部刷新小案例
2014/02/08 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
jquery实现简单实用的弹出层效果代码
2015/10/15 Javascript
javascript中checkbox使用方法实例演示
2015/11/19 Javascript
JavaScript 字符串常用操作小结(非常实用)
2016/11/30 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
JS实现的点击表头排序功能示例
2017/03/27 Javascript
Node错误处理笔记之挖坑系列教程
2018/06/05 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
解决VUE双向绑定失效的问题
2019/10/29 Javascript
javascript实现点击小图显示大图
2020/11/29 Javascript
[02:41]DOTA2英雄基础教程 谜团
2013/12/10 DOTA
推荐下python/ironpython:从入门到精通
2007/10/02 Python
python实现黑客字幕雨效果
2018/06/21 Python
使用Django连接Mysql数据库步骤
2019/01/15 Python
更新pip3与pyttsx3文字语音转换的实现方法
2019/08/08 Python
python lambda表达式(匿名函数)写法解析
2019/09/16 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
Python @property装饰器原理解析
2020/01/22 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
python中round函数保留两位小数的方法
2020/12/04 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
创业计划书六个要素
2013/12/26 职场文书
《骑牛比赛》教后反思
2014/04/22 职场文书
对外汉语专业大学生职业生涯规划范文
2014/09/13 职场文书
同事打架检讨书
2015/05/06 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL
Python快速优雅的批量修改Word文档样式
2021/05/20 Python