鼠标滑在标题上显示图片的JS代码

发布时间:2020-07-14 09:33:18 作者:xiaoxuanyunmeng
来源:网络 阅读:272

<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='p_w_picpaths/plane/${air.aircrafttype}.jpg'/>" >${air.aircrafttype}</a>
jquery.tooltip.execute.js:
$(document).ready(function(){
$(".with-tooltip").simpletooltip();
});
tooltip.v.1.1.js: www.jb51.net
/**
*
* 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);

推荐阅读:
  1. 不用js代码,在selenium里面实现鼠标悬停
  2. 高级Java研发人员在解决大数据问题上的技巧

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

web js代码 鼠标滑在标题上显示图片

上一篇:python中extend的意思是什么

下一篇:dom4j如何解析xml文件代码

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》