鼠标滑在标题上显示图片的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 相关文章推荐
js 与或运算符 || &amp;&amp; 妙用
Dec 09 Javascript
Js切换功能的简单方法
Nov 23 Javascript
Javascript学习笔记-详解in运算符
Sep 13 Javascript
js取得url地址参数实例
Feb 22 Javascript
JS:window.onload的使用介绍
Nov 13 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
Dec 29 Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 Javascript
JQuery入门基础小实例(1)
Sep 17 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
May 12 Javascript
JS代码实现table数据分页效果
May 26 Javascript
vue-cli和v-charts实现可视化图表过程解析
Oct 08 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 MySQL与分页效率
2008/06/04 PHP
理解和运用PHP中的多态性[译]
2011/08/02 PHP
PHP实现视频文件上传完整实例
2014/08/28 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
PHP+MySQL使用mysql_num_rows实现模糊查询图书信息功能
2018/05/31 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
Javascript 页面模板化很多人没有使用过的方法
2012/06/05 Javascript
js操作iframe的一些方法介绍
2013/06/25 Javascript
Javascript 浮点运算的问题分析与解决方法
2013/08/27 Javascript
js和jquery中循环的退出和继续学习记录
2014/09/06 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
Web开发必知Javascript技巧大全
2016/02/23 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
discuz表情的JS提取方法分析
2017/03/22 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
基于webpack 实用配置方法总结
2017/09/28 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
js实现搜索提示框效果
2020/09/05 Javascript
Python字符串处理之count()方法的使用
2015/05/18 Python
Python 正则表达式实现计算器功能
2017/04/29 Python
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
Python面向对象类继承和组合实例分析
2018/05/28 Python
tensorflow2.0保存和恢复模型3种方法
2020/02/03 Python
浅谈django不使用restframework自定义接口与使用的区别
2020/07/15 Python
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
请说出几个常用的异常类
2013/01/08 面试题
大学生职业生涯设计书
2014/01/02 职场文书
怎样写演讲稿
2014/01/04 职场文书
经销商培训邀请函
2014/01/21 职场文书
王老吉广告词
2014/03/20 职场文书
2014年绩效考核工作总结
2014/12/11 职场文书
golang中的struct操作
2021/11/11 Golang