鼠标滑在标题上显示图片的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 与 php 通过json数据进行通讯示例
Mar 26 Javascript
jquery获取节点名称
Apr 26 Javascript
基于jquery实现的树形菜单效果代码
Sep 06 Javascript
jQuery实现的可编辑表格完整实例
Jun 20 Javascript
javascript 解决浏览器不支持的问题
Sep 24 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 Javascript
angularJS模态框$modal实例代码
May 27 Javascript
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
May 08 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
Vue3实现简易音乐播放器组件
Aug 14 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
日本收入最高的漫画家:海贼王作者版税年收入高达8.45亿元
2020/03/04 日漫
php删除页面记录 同时刷新页面 删除条件用GET方式获得
2012/01/10 PHP
PHP获取当前完整URL地址的函数
2014/12/21 PHP
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
php getcwd与dirname(__FILE__)区别详解
2016/09/24 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
php获取访问者浏览页面的浏览器类型
2017/01/23 PHP
自制PHP框架之路由与控制器
2017/05/07 PHP
JS 树形递归实例代码
2010/05/18 Javascript
JavaScript对数字的判断与处理实例分析
2015/02/02 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
获取url中用&amp;隔开的参数实例(分享)
2017/05/28 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
Angular4集成ng2-file-upload的上传组件
2018/03/14 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
2019/03/27 Javascript
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
[01:03:03]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
[01:46]新英雄登场
2019/09/10 DOTA
TensorFlow实现模型评估
2018/09/07 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
pandas处理csv文件的方法步骤
2020/10/16 Python
python 基于opencv实现高斯平滑
2020/12/18 Python
德国药房apodiscounter中文官网:德国排名前三的网上药店
2019/06/03 全球购物
大学毕业生通用求职信
2013/09/28 职场文书
大学生就业自我鉴定
2013/10/26 职场文书
个人课题方案
2014/05/08 职场文书
需求分析说明书
2014/05/09 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
营销与策划实训报告
2014/11/05 职场文书
安装工程师岗位职责
2015/02/13 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL