鼠标滑在标题上显示图片的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 获取链接(url)参数的方法
Feb 15 Javascript
js调用图片隐藏&amp;显示实现代码
Sep 13 Javascript
javascript简单实现图片预加载
Dec 03 Javascript
javascript实现左右控制无缝滚动
Dec 31 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 Javascript
jquery+ajax+text文本框实现智能提示完整实例
Jul 09 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
Oct 09 Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 Javascript
AngularJS ionic手势事件的使用总结
Aug 09 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
Nov 29 Javascript
JS中封装axios来管控api的2种方式
Sep 11 Javascript
Nuxt的路由配置和参数传递方式
Nov 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脚本的10个技巧(1)
2006/10/09 PHP
php echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
宝塔面板在NGINX环境中TP5.1如何运行?
2021/03/09 PHP
[原创]图片分页查看
2006/08/28 Javascript
Javascript调用C#代码
2011/01/17 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
2016/01/12 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
2016/11/20 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
2017/01/19 Javascript
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
ES6扩展运算符用法实例分析
2017/10/31 Javascript
使用webpack打包koa2 框架app
2018/02/02 Javascript
js+html实现周岁年龄计算器
2019/06/25 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
vue制作toast组件npm包示例代码
2020/10/29 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
2020/11/16 Javascript
[06:21]完美世界亚洲区首席发行官竺琦TI3采访
2013/08/26 DOTA
[48:38]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs Secret
2018/03/31 DOTA
Python写的服务监控程序实例
2015/01/31 Python
Pytorch提取模型特征向量保存至csv的例子
2020/01/03 Python
如何在django中运行scrapy框架
2020/04/22 Python
Python3.7安装PyQt5 运行配置Pycharm的详细教程
2020/10/15 Python
[原创]赚疯了!转手立赚800+?大佬的python「抢茅台脚本」使用教程
2021/01/12 Python
美国最大的半成品净菜电商:Blue Apron(蓝围裙)
2018/04/27 全球购物
音乐教学反思
2014/02/02 职场文书
安全教育月活动总结
2014/05/05 职场文书
全国优秀辅导员事迹材料
2014/05/14 职场文书
银行保安拾金不昧表扬稿
2015/05/05 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书
某某店铺的开业庆典主持词范本
2019/11/25 职场文书
vue.js 使用原生js实现轮播图
2022/04/26 Vue.js