鼠标滑在标题上显示图片的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 相关文章推荐
xml和web特殊字符
Apr 28 Javascript
js禁止页面使用右键(简单示例代码)
Nov 13 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 Javascript
html5+javascript实现简单上传的注意细节
Apr 18 Javascript
js中document.referrer实现移动端返回上一页
Feb 22 Javascript
vue父组件点击触发子组件事件的实例讲解
Feb 08 Javascript
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
vue实现日历备忘录功能
Sep 24 Javascript
JavaScript对象属性操作实例解析
Feb 04 Javascript
springboot+vue实现文件上传下载
Nov 17 Vue.js
如何在现代JavaScript中编写异步任务
Jan 31 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
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
php 使用curl模拟ip和来源进行访问的实现方法
2017/05/02 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
javascript 函数式编程
2007/08/16 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
2010/12/28 Javascript
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
2016/10/21 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
详解Vue 全局引入bass.scss 处理方案
2018/03/26 Javascript
详解JSON Web Token 入门教程
2018/07/30 Javascript
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
JS实现横向轮播图(中级版)
2020/01/18 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
python使用range函数计算一组数和的方法
2015/05/07 Python
python3实现全角和半角字符转换的方法示例
2017/09/21 Python
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
python3+PyQt5实现支持多线程的页面索引器应用程序
2018/04/20 Python
Python堆排序原理与实现方法详解
2018/05/11 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
keras K.function获取某层的输出操作
2020/06/29 Python
全球最受追捧的运动服品牌领先数字目的地:Stylerunner
2020/11/25 全球购物
高中毕业自我鉴定
2013/12/13 职场文书
弘扬雷锋精神活动演讲稿
2014/03/04 职场文书
反四风对照检查材料思想汇报
2014/09/16 职场文书
麦田里的守望者读书笔记
2015/06/30 职场文书
导游词之山西关帝庙
2019/11/01 职场文书
2019年共青团工作条例最新版
2019/11/12 职场文书
HDFS免重启挂载新磁盘
2022/04/06 Servers