鼠标滑在标题上显示图片的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 相关文章推荐
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
Feb 27 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
Dec 14 Javascript
node.js+express制作网页计算器
Jan 17 Javascript
javascript 广告移动特效的实现代码
Jun 25 Javascript
JavaScript中闭包之浅析解读(必看篇)
Aug 25 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 Javascript
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
vue使用Google地图的实现示例代码
Dec 19 Javascript
解决layui-open关闭自身窗口的问题
Sep 10 Javascript
小程序自定义弹框效果
Nov 16 Javascript
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 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 获取当前访问的url文件名的方法小结
2010/02/08 PHP
PHP实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
PHP统计目录下的文件总数及代码行数(去除注释及空行)
2011/01/17 PHP
php批量上传的实现代码
2013/06/09 PHP
php计算两个日期时间差(返回年、月、日)
2014/06/19 PHP
PHP面向对象精要总结
2014/11/07 PHP
php表单敏感字符过滤类
2014/12/08 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
2013/11/30 Javascript
javascript动态修改Li节点值的方法
2015/01/20 Javascript
js关于命名空间的函数实例
2015/02/05 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
2016/05/28 Javascript
js如何编写简单的ajax方法库
2017/08/02 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
JS简单添加元素新节点的方法示例
2018/02/10 Javascript
Vue-cli配置打包文件本地使用的教程图解
2018/08/02 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
2019/05/07 Javascript
基于Node.js的大文件分片上传示例
2019/06/19 Javascript
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
python中xrange用法分析
2015/04/15 Python
Python中type的构造函数参数含义说明
2015/06/21 Python
python绘制简单折线图代码示例
2017/12/19 Python
对pandas中Series的map函数详解
2018/07/25 Python
Python使用matplotlib绘制随机漫步图
2018/08/27 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
python的pstuil模块使用方法总结
2019/07/26 Python
使用python处理题库表格并转化为word形式的实现
2020/04/14 Python
北京银河万佳Java面试题
2012/03/21 面试题
写好自荐信的要点
2013/11/06 职场文书
应届生污水处理求职信
2013/11/06 职场文书
《掌声》教学反思
2014/02/23 职场文书
社团招新宣传语
2015/07/13 职场文书
2016年春季运动会通讯稿
2015/11/25 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS