鼠标滑在标题上显示图片的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数据结构与算法之栈详解
Mar 12 Javascript
JQuery限制复选框checkbox可选中个数的方法
Apr 20 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
Oct 20 Javascript
JavaScript Length 属性的总结
Nov 02 Javascript
react.js CMS 删除功能的实现方法
Apr 17 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
Oct 14 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
May 07 Javascript
React注册倒计时功能的实现
Sep 06 Javascript
Node.js中的不安全跳转如何防御详解
Oct 21 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 Javascript
jquery实现点击弹出对话框
Feb 08 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
ThinkPHP中create()方法自动验证实例
2017/04/26 PHP
php实现对文件压缩简单的方法
2019/09/29 PHP
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
vue实现表格数据的增删改查
2017/07/10 Javascript
Vue实现内部组件轮播切换效果的示例代码
2018/04/07 Javascript
JavaScript实现创建自定义对象的常用方式总结
2018/07/09 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
2019/04/02 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
vue使用showdown并实现代码区域高亮的示例代码
2019/10/17 Javascript
vue动画—通过钩子函数实现半场动画操作
2020/08/09 Javascript
Vue项目开发常见问题和解决方案总结
2020/09/11 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
[56:41]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs OG
2018/04/01 DOTA
[55:32]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第二场
2018/04/05 DOTA
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
基于DATAFRAME中元素的读取与修改方法
2018/06/08 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
Python 读取用户指令和格式化打印实现解析
2019/09/02 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
python3 kubernetes api的使用示例
2021/01/12 Python
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
法律专业应届本科毕业生求职信
2013/10/25 职场文书
销售简历自我评价
2014/01/24 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
匿名信格式范文
2015/05/27 职场文书
公司员工奖惩制度
2015/08/04 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书
适合毕业生创业的项目怎么找?
2019/08/08 职场文书
详解python网络进程
2021/06/15 Python