手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >鼠标滑在标题上显示图片的JS代码
鼠标滑在标题上显示图片的JS代码
摘要:复制代码代码如下:机型:${air.aircrafttype}jquery.tooltip.execute.js:$(document).r...

复制代码 代码如下:

<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" 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: 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'>" + 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);

【鼠标滑在标题上显示图片的JS代码】相关文章:

一些有关检查数据的JS代码

js判断鼠标位置是否在某个div中的方法

Js和JQuery获取鼠标指针坐标的实现代码分享

javascript鼠标滑动评分控件完整

Javascript特效:随机显示图片的源代码

实现DIV圆角的JavaScript代码

js实现鼠标划过给div加透明度的方法

js兼容火狐显示上传图片预览效果的方法

鼠标图片振动代码

一个特帅的展示图片的js+css

精品推荐
分类导航