鼠标悬浮提示效果

时间: 2009-10-26 / 分类: jquery / 浏览次数: / 0个评论 发表评论

Demo:http://www.izmax.cn/demo/mk_tips/index.html

JS:

<script type=”text/javascript”>
$(document).ready(function(){
var m_div=$(“<div class=’m_tcont’><div class=’m_top’></div><div class=’m_con’></div><div class=’m_btm’></div></div>”);
m_div.appendTo(“body”);
$(“*[rel=m_tips]“).bind(“mousemove”,function(event){
var m_x=event.pageX ;
var m_y=event.pageY ;
var m_text=$(this).attr(“txt”);
$(“.m_con”).html(m_text);
var t_height=$(“.m_tcont”).height();
m_div.fadeIn(600);
$(“.m_tcont”).css({“left”:m_x+5,”top”:m_y-t_height,”width”:200});
return false;
}).bind(“mouseout”,function(){
$(“.m_tcont”).hide();
return false;
})
//————————————————-应用例子:
mk_tips(“#show”,”第二种文本提示效果”,150);
mk_tips(“#btn”,”确认提交,一经提交不可修改”,300);
})

function mk_tips(elem,txt,m_w){
var m_div=$(“<div class=’m_tcont’><div class=’m_top’></div><div class=’m_con’></div><div class=’m_btm’></div></div>”);
m_div.appendTo(“body”);
if(m_w==”"){
m_w=200;
}
$(elem).bind(“mousemove”,function(event){
var m_x=event.pageX ;
var m_y=event.pageY ;
$(“.m_con”).html(txt);
var t_height=$(“.m_tcont”).height();
m_div.fadeIn(600);
$(“.m_tcont”).css({“left”:m_x+5,”top”:m_y-t_height,”width”:m_w});
return false;
}).bind(“mouseout”,function(){
$(“.m_tcont”).hide();
return false;
})
}
</script>

发表评论

您的昵称 *

您的邮箱 *

您的网站