鼠标滑在标题上显示图片的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 相关文章推荐
JavaScript事件列表解说
Dec 22 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
Oct 17 Javascript
jquery获取当前元素索引值用法实例
Jun 10 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
May 10 Javascript
JavaScript函数柯里化原理与用法分析
Mar 31 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
Jun 08 Javascript
React Native基础入门之调试React Native应用的一小步
Jul 02 Javascript
微信小程序自定义底部弹出框
Nov 16 Javascript
详解VSCode配置启动Vue项目
May 14 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
Apr 13 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
Sep 21 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
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
javascript add event remove event
2008/04/07 Javascript
摘自启点的main.js
2008/04/20 Javascript
图片在浏览器中底部对齐 解决方法之一
2011/11/30 Javascript
Jquery简单实现GridView行高亮的方法
2015/06/15 Javascript
JS选取DOM元素的简单方法
2016/07/08 Javascript
AngularJS实现单独作用域内的数据操作
2016/09/05 Javascript
原生js实现选项卡功能
2017/03/08 Javascript
jQuery实现一个简单的验证码功能
2017/06/26 jQuery
Python爬虫利用cookie实现模拟登陆实例详解
2017/01/12 Python
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
python正则实现计算器功能
2017/12/14 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
django自带的server 让外网主机访问方法
2018/05/14 Python
Python实现端口检测的方法
2018/07/24 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
python中下标和切片的使用方法解析
2019/08/27 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
python中matplotlib实现随鼠标滑动自动标注代码
2020/04/23 Python
Python3 requests模块如何模仿浏览器及代理
2020/06/15 Python
python七种方法判断字符串是否包含子串
2020/08/18 Python
Python GUI库Tkiner使用方法代码示例
2020/11/27 Python
Skyscanner阿联酋:全球领先的旅游搜索平台
2017/11/25 全球购物
初一家长会邀请函
2014/01/31 职场文书
学习十八届三中全会精神实施方案
2014/02/17 职场文书
服装采购员岗位职责
2014/03/15 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
《北京的春节》教学反思
2014/04/07 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
社区三八妇女节活动总结
2015/02/06 职场文书
员工工作表现自我评价
2015/03/06 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
行政复议答复书
2015/07/01 职场文书
五一晚会主持词
2015/07/01 职场文书
HR在给员工开具离职证明时,需要注意哪些问题?
2019/07/03 职场文书
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android