鼠标滑在标题上显示图片的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学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
Jul 18 Javascript
详谈jQuery中的this和$(this)
Nov 13 Javascript
浅析js中substring和substr的方法
Nov 09 Javascript
jQuery的内容过滤选择器学习教程
Apr 18 Javascript
原生js实现可爱糖果数字时间特效
Dec 30 Javascript
vue项目tween方法实现返回顶部的示例代码
Mar 02 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
Sep 05 Javascript
JavaScript 实现同时选取多个时间段的方法
Oct 17 Javascript
JS实现页面鼠标点击出现图片特效
Aug 19 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
thinkPHP+ajax实现统计页面pv浏览量的方法
2017/03/15 PHP
JQuery 文本框使用小结
2010/05/22 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
2011/08/09 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
2020/09/12 Javascript
jQuery中click事件用法实例
2014/12/26 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
详解javascript遍历方式
2015/11/11 Javascript
JavaScript获取对象在页面中位置坐标的方法
2016/02/03 Javascript
jquery输入数字随机抽奖特效的简单实现代码
2016/06/10 Javascript
详解jQuery的Cookie插件
2016/11/23 Javascript
javascript实现获取图片大小及图片等比缩放的方法
2016/11/24 Javascript
使用node.js中的Buffer类处理二进制数据的方法
2016/11/26 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
2017/02/04 Javascript
基于JavaScript实现每日签到打卡轨迹功能
2018/11/29 Javascript
浅谈webpack性能榨汁机(打包速度优化)
2019/01/09 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
Vue实现滑动拼图验证码功能
2019/09/15 Javascript
微信小程序实现侧边分类栏
2019/10/21 Javascript
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
[01:34]2016国际邀请赛中国区预选赛IG战队教练采访
2016/06/27 DOTA
机器学习之KNN算法原理及Python实现方法详解
2018/07/09 Python
解析python实现Lasso回归
2019/09/11 Python
PyTorch里面的torch.nn.Parameter()详解
2020/01/03 Python
5行Python代码实现图像分割的步骤详解
2020/05/25 Python
python 读取yaml文件的两种方法(在unittest中使用)
2020/12/01 Python
Notino法国:购买香水和化妆品
2019/04/15 全球购物
股东协议书范本
2014/04/14 职场文书
《梅花魂》教学反思
2014/04/30 职场文书
活动总结新闻稿
2014/08/30 职场文书
国家机关领导干部民主生活会对照检查材料思想汇报
2014/09/17 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书
建国大业电影观后感
2015/06/01 职场文书
反邪教观后感
2015/06/11 职场文书
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers