鼠标滑在标题上显示图片的JS代码_javascript技巧
程序员文章站
2022-04-17 11:08:30
...
复制代码 代码如下:
机型:${air.aircrafttype}
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(" ");
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() $("#simpleTooltip").css("left", tipX).css("top", tipY).fadeIn("medium");
});
}
});
}})(jQuery);
上一篇: 介绍几种Mysql多字段大表的优化方法
下一篇: CSS 派生选择器通过什么来定义
推荐阅读
-
js 鼠标移动显示图片的简单实例_javascript技巧
-
始终在屏幕中间显示Div的代码(css+js)_javascript技巧
-
始终在屏幕中间显示Div的代码(css+js)_javascript技巧
-
js 鼠标移动显示图片的简单实例_javascript技巧
-
在图片上显示左右箭头类似翻页的代码_javascript技巧
-
鼠标放在图片上显示大图的JS代码_javascript技巧
-
鼠标滑在标题上显示图片的JS代码_javascript技巧
-
鼠标放在图片上显示大图的JS代码_javascript技巧
-
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示_javascript技巧
-
在图片上显示左右箭头类似翻页的代码_javascript技巧