鼠标滑在标题上显示图片的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 相关文章推荐
Prototype Selector对象学习
Jul 23 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
Apr 24 Javascript
js调用图片隐藏&amp;显示实现代码
Sep 13 Javascript
js实现身份证号码验证的简单实例
Feb 19 Javascript
window.location.hash知识汇总
Nov 09 Javascript
BootStrap实用代码片段之一
Mar 22 Javascript
JavaScript操作选择对象的简单实例
May 16 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
Jul 06 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
js如何实现元素曝光上报
Aug 07 Javascript
ES6中Promise的使用方法实例总结
Feb 18 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/04/10 PHP
redis+php实现微博(三)微博列表功能详解
2019/09/23 PHP
jquery tools系列 expose 学习
2009/09/06 Javascript
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
javascript Deferred和递归次数限制实例
2014/10/21 Javascript
json实现添加、遍历与删除属性的方法
2016/06/17 Javascript
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
微信小程序中使用wxss加载图片并实现动画效果
2018/08/13 Javascript
BootStrap modal实现拖拽功能
2018/12/01 Javascript
Python中splitlines()方法的使用简介
2015/05/20 Python
python各种语言间时间的转化实现代码
2016/03/23 Python
Python 3中print函数的使用方法总结
2017/08/08 Python
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
老生常谈python中的重载
2018/11/11 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
python设置环境变量的原因和方法
2019/06/24 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
Python csv文件记录流程代码解析
2020/07/16 Python
微信端html5页面调用分享接口示例
2018/03/14 HTML / CSS
HTML5 FileReader对象的具体使用方法
2020/05/22 HTML / CSS
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
介绍一下Java的安全机制
2012/06/28 面试题
如何打开WebSphere远程debug
2014/10/10 面试题
门卫岗位职责
2013/11/15 职场文书
物业消防安全责任书
2014/07/23 职场文书
优秀纪检干部材料
2014/08/27 职场文书
2014和解协议书范文
2014/09/15 职场文书
2014年党员个人剖析材料
2014/10/08 职场文书
合作与交流自我评价
2015/03/09 职场文书
高二英语教学反思
2016/03/03 职场文书
员工试用期工作总结
2019/06/20 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书
[有人@你]你有一封绿色倡议书,请查收!
2019/07/18 职场文书
浅析Python中的随机采样和概率分布
2021/12/06 Python