mousemove-show-div

本效果是基于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 });
});
});

除特殊标明文章转自第三方网站,文章均由JOOMLASK.COM原创提供
欢迎友情转载,请务必保留本文出处并引用本文链接: 基于Jquery的鼠标经过显示区域(tips)效果

支付宝官方话费充值

淘宝充值