鼠标滑在标题上显示图片的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 相关文章推荐
jquery Moblie入门—hello world的示例代码学习
Jan 08 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
Jan 06 Javascript
seajs中模块的解析规则详解和模块使用总结
Mar 12 Javascript
javascript制作的滑动图片菜单
May 15 Javascript
详解JavaScript数组的操作大全
Oct 19 Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
Mar 11 Javascript
node.js 和HTML5开发本地桌面应用程序
Dec 13 Javascript
jQuery中Chosen三级联动功能实例代码
Mar 07 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
Mar 21 Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 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开发微信支付获取用户地址
2015/10/04 PHP
Yii使用技巧大汇总
2015/12/29 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
golang实现php里的serialize()和unserialize()序列和反序列方法详解
2018/10/30 PHP
javaScript同意等待代码实现心得
2011/01/01 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
2015/09/06 Javascript
jQuery 实现评论等级好评差评特效
2016/05/06 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
2020/05/30 Javascript
ReactNative短信验证码倒计时控件的实现代码
2017/07/20 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
2019/02/28 Javascript
vue通过数据过滤实现表格合并
2020/11/30 Javascript
Node.js学习之内置模块fs用法示例
2020/01/22 Javascript
Postman环境变量全局变量使用方法详解
2020/08/13 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
2020/11/09 Javascript
vue+Element-ui实现分页效果
2020/11/15 Javascript
[01:34]2014DOTA2 TI预选赛预选赛 选手比赛房大揭秘!
2014/05/20 DOTA
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
scrapy头部修改的方法详解
2020/12/06 Python
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
英国综合网上购物商城:The Hut
2018/07/03 全球购物
新西兰购物网站:TheMarket NZ
2020/09/19 全球购物
配件采购员岗位职责
2013/12/03 职场文书
个人收入证明范本
2014/01/12 职场文书
小学后勤管理制度
2014/01/14 职场文书
擅自离岗检讨书
2014/02/11 职场文书
国庆宣传标语
2014/06/30 职场文书
联片教研活动总结
2014/07/01 职场文书
教师学期末个人总结
2015/02/13 职场文书
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS
Python requests用法和django后台处理详解
2022/03/19 Python