鼠标滑在标题上显示图片的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 iframe的相互操作浅析
Oct 14 Javascript
javascript中typeof的使用示例
Dec 19 Javascript
jQuery使用andSelf()来包含之前的选择集
May 19 Javascript
JS实现仿QQ效果的三级竖向菜单
Sep 25 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
jquery ui dialog替代confirm实例分析
Jan 25 Javascript
Sea.JS知识总结
May 05 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
Jan 06 Javascript
javascript计算渐变颜色的实例
Sep 22 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
Sep 15 Javascript
javascrit中undefined和null的区别详解
Apr 07 Javascript
JS开发 富文本编辑器TinyMCE详解
Jul 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
php中取得URL的根域名的代码
2011/03/23 PHP
PHP删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
PHP 中关于ord($str)&amp;gt;0x80的详细说明
2012/09/23 PHP
ThinkPHP3.2.3框架Memcache缓存使用方法实例总结
2019/04/15 PHP
jQuery性能优化的38个建议
2014/03/04 Javascript
js取模(求余数)隔行变色
2014/05/15 Javascript
javascript中传统事件与现代事件
2015/06/23 Javascript
javascript实现在线客服效果
2015/07/15 Javascript
基于JavaScript实现瀑布流布局(二)
2016/01/26 Javascript
jQuery实现select模糊查询(反射机制)
2017/01/14 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
[40:29]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第一场
2018/04/10 DOTA
python中的yield使用方法
2014/02/11 Python
python中sets模块的用法实例
2014/09/30 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
python取均匀不重复的随机数方式
2019/11/27 Python
python生成特定分布数的实例
2019/12/05 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
python中如何使用虚拟环境
2020/10/14 Python
如何用Python 实现全连接神经网络(Multi-layer Perceptron)
2020/10/15 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
俄罗斯优惠券网站:BIGLION
2017/05/21 全球购物
写出二分查找算法的两种实现
2013/05/13 面试题
计算机软件个人的自荐信范文
2013/12/01 职场文书
历史专业个人求职信范文
2013/12/07 职场文书
保安岗位职责
2014/02/21 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
个人自荐书怎么写
2015/03/26 职场文书
新年祝酒词大全
2015/08/11 职场文书
vue如何使用模拟的json数据查看效果
2022/03/31 Vue.js