鼠标滑在标题上显示图片的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 相关文章推荐
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
Mar 24 Javascript
从盛大通行证上摘下来的身份证验证js代码
Jan 11 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
Oct 20 Javascript
javascript:void(0)的问题使用探讨
Apr 10 Javascript
jquery实现弹出层效果实例
May 19 Javascript
使用Chrome浏览器调试AngularJS应用的方法
Jun 18 Javascript
c#程序员对TypeScript的认识过程
Jun 19 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
Nov 16 Javascript
关于vue项目中搜索节流的实现代码
Sep 17 Javascript
vue引用外部JS的两种种方法
Jan 28 Javascript
Vue实现仿iPhone悬浮球的示例代码
Mar 13 Javascript
解决vue打包 npm run build-test突然不动了的问题
Nov 13 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面向对象全攻略 (九)访问类型
2009/09/30 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
2018/06/20 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
PHP数组实际占用内存大小原理解析
2020/12/11 PHP
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
JavaScript和CSS通过expression实现Table居中显示
2013/06/28 Javascript
jQuery中trigger()方法用法实例
2015/01/19 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
2015/11/27 Javascript
jQuery前端开发35个小技巧
2016/05/24 Javascript
JS中微信小程序自定义底部弹出框
2016/12/22 Javascript
对于input 框限定输入值为浮点型的js代码
2017/09/25 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
2018/08/14 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
在Chrome DevTools中调试JavaScript的实现
2020/04/07 Javascript
Python实现从url中提取域名的几种方法
2014/09/26 Python
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
python通过SSH登陆linux并操作的实现
2019/10/10 Python
Python 下载及安装详细步骤
2019/11/04 Python
python如何写try语句
2020/07/14 Python
Python爬虫与反爬虫大战
2020/07/30 Python
HTML5进度条特效
2014/12/18 HTML / CSS
June Jacobs尊积帕官网:知名的spa水疗护肤品牌
2019/03/21 全球购物
员工评语大全
2014/01/19 职场文书
技校毕业生自荐信范文
2014/03/07 职场文书
社区居务公开实施方案
2014/03/27 职场文书
委托书范本
2014/04/02 职场文书
党的群众路线学习材料
2014/05/16 职场文书
高中运动会广播稿
2014/09/16 职场文书
市级三好学生评语
2014/12/29 职场文书
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers
MySQL常见优化方案汇总
2022/01/18 MySQL
Docker下安装Oracle19c
2022/04/13 Servers
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android