提示浮层跟随鼠标移动(js版和jquery版)
2009-07-09 14:35
519 查看
jquery实现：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery实现简单文字提示</title>
<style type="text/css">
#preview{border:1px solid #cccccc; background:#9900CC;color:#fff; padding:5px; display:none; position:absolute;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.js"></script>
</head>
<body>
<a class="preview">把鼠标放到这里1</a>
<br/><br/><br/>
<a class="preview">把鼠标放到这里2</a>
<br/><br/><br/>
<a class="preview">把鼠标放到这里3</a>
<br/><br/><br/>
<a class="preview">把鼠标放到这里4</a>
<br/><br/><br/>
<a class="preview">把鼠标放到这里5</a>
<script type="text/javascript">
this.imagePreview = function(){
/* CONFIG */
xOffset = 10;
yOffset = 30;
// 可以自己设定偏移值
/* END CONFIG */
$("a.preview").hover(function(e){
$("body").append("<div id='preview'>jquery实现简单文字提示</div>");
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("slow");
},
function(){
$("#preview").fadeOut("fast");
});
$("a.preview").mousemove(function(e){
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
// 页面加载完执行
$(document).ready(function(){
imagePreview();
});
</script>
</body>
</html>
javascript实现：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY><script>
var c$={};
var w$=function(s){document.write(s);}
var o$=function(id){return document.getElementById(id);}
w$("<div id=\"ts\" style=\"position:absolute;background-color:#FFFFE6;font-size: 12px;padding: 3px; border: 1px solid #FFCC99;display:none\"></div>");
c$.mmove=function(evt,o,s){
var evt=evt||window.event;
var x=evt.clientX+15;
var y=evt.clientY+20;
var bt=document.body.scrollTop;
var bl=document.body.scrollLeft;
x+=bl; y+=bt
o$("ts").style.left=x+"px";
o$("ts").style.top=y+"px";
if(s==""||typeof(s)=="undefined"){
o$("ts").innerHTML=o.innerHTML;
}else{
o$("ts").innerHTML=s
}
o$("ts").style.display="";
}
c$.mout=function(){
o$("ts").style.display="none";
}
//如果是图片，分开左右
c$.img=function(o){
if(o.src!="undefined"){
var x=o.offsetLeft;
var w=o.width;
w=w%2==0?w/2:(w+1)/2;
return [x,w];
}
return [];
}
c$.imgmove=function(evt,o,sl,sr){
var evt=evt||window.event;
var x=evt.clientX+15;
var y=evt.clientY+20;
var ar=c$.img(o);
var bt=document.body.scrollTop;
var bl=document.body.scrollLeft;
x+=bl; y+=bt
o$("ts").style.left=x+"px";
o$("ts").style.top=y+"px";
if(x<(ar[0]+ar[1])){
o$("ts").innerHTML=sl;
}else{
o$("ts").innerHTML=sr;
}
o$("ts").style.display="";
}
</script>
<p><a href="#" onmousemove="c$.mmove(event,this)" onmouseout="c$.mout();">aaaaaaaaa<br><font color=red>aaaaaaa></font></a></p>
<p><a href="#" onmousemove="c$.mmove(event,this,'哈哈')" onmouseout="c$.mout();">bbbbbbbbbbb</a></p>
<p><a href="#" onmousemove="c$.mmove(event,this)" onmouseout="c$.mout();">cccccccccccc</a></p>
<p><a href="#" onmousemove="c$.mmove(event,this)" onmouseout="c$.mout();">dddddddddddd</a></p>
<p><img src="http://bbs.blueidea.com/images/default/logo.gif" onmousemove="c$.imgmove(event,this,'<font color=red>这是图片左半部分</font>','<font color=blue>这是图片右半部分</font>')" onmouseout="c$.mout();">></p>
<p><a href="#" onmousemove="c$.mmove(event,this)" onmouseout="c$.mout();">eeeeeeeeeeeee</a></p>
<p><img src="http://news.beelink.com.cn/20050404/beelink20050404zh10.jpg" onmousemove="c$.imgmove(event,this,'<font color=red>这是图片左半部分</font>','<font color=blue>这是图片右半部分</font>')" onmouseout="c$.mout();">></p> <p><a href="#" onmousemove="c$.mmove(event,this)" onmouseout="c$.mout();">想做个特效就是移到文字上面或是图片上面出现提示，title能够定义属性吗？如换行，文字色彩等<br />
<br />
在坛内看到一个移<span><font color=blue>到小图片上出现大图片的效果，效果不错</font></span>，感觉挺复杂，不知道有没有更简单一点的。
</a></p>
<p><a href="#" onmousemove="c$.mmove(event,this)" onmouseout="c$.mout();">ggggggggggggggggggggggggggg</a></p>
<p><a href="#" onmousemove="c$.mmove(event,this)" onmouseout="c$.mout();">hhhhhhhhhhhhhhhhhhhhhhhhh</a></p>
<p><a href="#" onmousemove="c$.mmove(event,this)" onmouseout="c$.mout();">想做个特效就是移到文字上面或是图片上面出现提示，title能够定义属性吗？如换行，文字色彩等<br />
<br />
在坛内看到一个移<span><font color="#CC0000">到小图片上出现大图片的效果，效果不错</font></span>，感觉挺复杂，不知道有没有更简单一点的。
</a></p>
</BODY>
</HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery实现简单文字提示</title>
<style type="text/css">
#preview{border:1px solid #cccccc; background:#9900CC;color:#fff; padding:5px; display:none; position:absolute;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.js"></script>
</head>
<body>
<a class="preview">把鼠标放到这里1</a>
<br/><br/><br/>
<a class="preview">把鼠标放到这里2</a>
<br/><br/><br/>
<a class="preview">把鼠标放到这里3</a>
<br/><br/><br/>
<a class="preview">把鼠标放到这里4</a>
<br/><br/><br/>
<a class="preview">把鼠标放到这里5</a>
<script type="text/javascript">
this.imagePreview = function(){
/* CONFIG */
xOffset = 10;
yOffset = 30;
// 可以自己设定偏移值
/* END CONFIG */
$("a.preview").hover(function(e){
$("body").append("<div id='preview'>jquery实现简单文字提示</div>");
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("slow");
},
function(){
$("#preview").fadeOut("fast");
});
$("a.preview").mousemove(function(e){
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
// 页面加载完执行
$(document).ready(function(){
imagePreview();
});
</script>
</body>
</html>
javascript实现：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY><script>
var c$={};
var w$=function(s){document.write(s);}
var o$=function(id){return document.getElementById(id);}
w$("<div id=\"ts\" style=\"position:absolute;background-color:#FFFFE6;font-size: 12px;padding: 3px; border: 1px solid #FFCC99;display:none\"></div>");
c$.mmove=function(evt,o,s){
var evt=evt||window.event;
var x=evt.clientX+15;
var y=evt.clientY+20;
var bt=document.body.scrollTop;
var bl=document.body.scrollLeft;
x+=bl; y+=bt
o$("ts").style.left=x+"px";
o$("ts").style.top=y+"px";
if(s==""||typeof(s)=="undefined"){
o$("ts").innerHTML=o.innerHTML;
}else{
o$("ts").innerHTML=s
}
o$("ts").style.display="";
}
c$.mout=function(){
o$("ts").style.display="none";
}
//如果是图片，分开左右
c$.img=function(o){
if(o.src!="undefined"){
var x=o.offsetLeft;
var w=o.width;
w=w%2==0?w/2:(w+1)/2;
return [x,w];
}
return [];
}
c$.imgmove=function(evt,o,sl,sr){
var evt=evt||window.event;
var x=evt.clientX+15;
var y=evt.clientY+20;
var ar=c$.img(o);
var bt=document.body.scrollTop;
var bl=document.body.scrollLeft;
x+=bl; y+=bt
o$("ts").style.left=x+"px";
o$("ts").style.top=y+"px";
if(x<(ar[0]+ar[1])){
o$("ts").innerHTML=sl;
}else{
o$("ts").innerHTML=sr;
}
o$("ts").style.display="";
}
</script>
<p><a href="#" onmousemove="c$.mmove(event,this)" onmouseout="c$.mout();">aaaaaaaaa<br><font color=red>aaaaaaa></font></a></p>
<p><a href="#" onmousemove="c$.mmove(event,this,'哈哈')" onmouseout="c$.mout();">bbbbbbbbbbb</a></p>
<p><a href="#" onmousemove="c$.mmove(event,this)" onmouseout="c$.mout();">cccccccccccc</a></p>
<p><a href="#" onmousemove="c$.mmove(event,this)" onmouseout="c$.mout();">dddddddddddd</a></p>
<p><img src="http://bbs.blueidea.com/images/default/logo.gif" onmousemove="c$.imgmove(event,this,'<font color=red>这是图片左半部分</font>','<font color=blue>这是图片右半部分</font>')" onmouseout="c$.mout();">></p>
<p><a href="#" onmousemove="c$.mmove(event,this)" onmouseout="c$.mout();">eeeeeeeeeeeee</a></p>
<p><img src="http://news.beelink.com.cn/20050404/beelink20050404zh10.jpg" onmousemove="c$.imgmove(event,this,'<font color=red>这是图片左半部分</font>','<font color=blue>这是图片右半部分</font>')" onmouseout="c$.mout();">></p> <p><a href="#" onmousemove="c$.mmove(event,this)" onmouseout="c$.mout();">想做个特效就是移到文字上面或是图片上面出现提示，title能够定义属性吗？如换行，文字色彩等<br />
<br />
在坛内看到一个移<span><font color=blue>到小图片上出现大图片的效果，效果不错</font></span>，感觉挺复杂，不知道有没有更简单一点的。
</a></p>
<p><a href="#" onmousemove="c$.mmove(event,this)" onmouseout="c$.mout();">ggggggggggggggggggggggggggg</a></p>
<p><a href="#" onmousemove="c$.mmove(event,this)" onmouseout="c$.mout();">hhhhhhhhhhhhhhhhhhhhhhhhh</a></p>
<p><a href="#" onmousemove="c$.mmove(event,this)" onmouseout="c$.mout();">想做个特效就是移到文字上面或是图片上面出现提示，title能够定义属性吗？如换行，文字色彩等<br />
<br />
在坛内看到一个移<span><font color="#CC0000">到小图片上出现大图片的效果，效果不错</font></span>，感觉挺复杂，不知道有没有更简单一点的。
</a></p>
</BODY>
</HTML>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery 鼠标停留显示提示框，提示框位置跟随鼠标移动
- jquery 鼠标停留显示提示框，提示框位置跟随鼠标移动
- jquery实现的提示浮层跟随鼠标移动
- jquery实现：提示文本/图片跟随鼠标移动
- jquery实现的提示浮层跟随鼠标移动
- js实现跟随鼠标移动且带关闭功能的图片广告实例
- js实现的跟随鼠标移动的时钟效果(中英文日期显示)
- 图片定义的title提示信息的样式以及提示信息跟随鼠标的移动而移动的效果
- jquery插件实现鼠标移动到中国地图提示框地区数据提示的特效
- js制作鼠标移动提示层
- js实现文字跟随鼠标移动而移动的方法
- js 实现div跟随鼠标移动
- 给超链接添加特效-鼠标移动到上展示提示信息-提示信息跟随鼠标移动
- jquery实现跟随鼠标移动显示页面信息
- jquery 跟随鼠标移动
- js+css跟随鼠标的提示框(tips)
- jquery实现鼠标移动出现提示信息
- 结合jquery，使得textarea自适应高度，并且提示层跟随光标移动
- jquery获得鼠标焦点（跟随鼠标移动而变化）
- jQuery实现div跟随鼠标移动