本效果是基于sohtanaka所更改,在其基础上处理了一个IE6-8的JS报错。素材来源于:http://www.sohtanaka.com/web-design/simple-tooltip-w-jquery-css/
演示地址:http://www.Joomla178.com/download/Front-end/base-jquery-mousemove-show-div/index.html
下载地址:http://www.Joomla178.com/download/file/23-base-jquery-mousemove-show-div.html
不过sohtanaka的素材,在IE下会有tip未定义的提示,当然为了追求完美,要把提示去掉的话,本站的演示即是正确的,修改方法如下:
原方法:
$(document).ready(function() {
//鼠标经过显示区域(tips)效果
$(".tip_trigger").hover(function(){
tip = $(this).find('.tip');
tip.show(); //调用jquery方法显示tips
}, function() {
tip.hide(); //调用jquery方法隐藏tips
}).mousemove(function(e) {
var mousex = e.pageX + 20; //获取X轴坐标
var mousey = e.pageY -10; //获取Y轴坐标
var tipWidth = tip.width(); //给tips一个宽度
var tipHeight = tip.height(); //给tips一个高度
var tipVisX = $(window).width() - (mousex + tipWidth);
var tipVisY = $(window).height() - (mousey + tipHeight);
if ( tipVisX < 20 ) {
mousex = e.pageX - tipWidth - 20;
} if ( tipVisY < 20 ) {
mousey = e.pageY - tipHeight - 20;
}
tip.css({ top: mousey, left: mousex });
});
});
改为
$(document).ready(function() {
//鼠标经过显示区域(tips)效果
var tip = $(this);//添加本行代码去除IE下提示tip未定义
$(".tip_trigger").hover(function(){
tip = $(this).find('.tip');
tip.show(); //调用jquery方法显示tips
}, function() {
tip.hide(); //调用jquery方法隐藏tips
}).mousemove(function(e) {
var mousex = e.pageX + 20; //获取X轴坐标
var mousey = e.pageY -10; //获取Y轴坐标
var tipWidth = tip.width(); //给tips一个宽度
var tipHeight = tip.height(); //给tips一个高度
var tipVisX = $(window).width() - (mousex + tipWidth);
var tipVisY = $(window).height() - (mousey + tipHeight);
if ( tipVisX < 20 ) {
mousex = e.pageX - tipWidth - 20;
} if ( tipVisY < 20 ) {
mousey = e.pageY - tipHeight - 20;
}
tip.css({ top: mousey, left: mousex });
});
});