以下的代码为实现跟随的Div,可直接复制并用html运行看效果:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div</title>
</head>
<script language="javascript">
var rT=true;
var bT=true;
var tw=100;
var endaction=false;
var ns4 = document.layers;
var ns6 = document.getElementById && !document.all;
var ie4 = document.all;
offsetX = 10;
offsetY = 10;
var toolTipSTYLE="";
function initToolTips()
{
if(ns4||ns6||ie4)
{
if(ns4) toolTipSTYLE = document.toolTipLayer;
else if(ns6) toolTipSTYLE = document.getElementById("toolTipLayer").style;
else if(ie4) toolTipSTYLE = document.all.toolTipLayer.style;
if(ns4) document.captureEvents(Event.MOUSEMOVE);
else
{
toolTipSTYLE.visibility = "visible";
toolTipSTYLE.display = "none";
}
document.onmousemove = moveToMouseLoc;
}
}
function toolTip(msg, fg, bg)
{
if(toolTip.arguments.length < 1) // hide
{
if(ns4)
{
toolTipSTYLE.visibility = "hidden";
}
else
{
//--图象过渡,淡出处理--
if (!endaction) {toolTipSTYLE.display = "none";}
if (rT) document.all("msg1").filters[1].Apply();
if (bT) document.all("msg1").filters[2].Apply();
document.all("msg1").filters[0].opacity=0;
if (rT) document.all("msg1").filters[1].Play();
if (bT) document.all("msg1").filters[2].Play();
if (rT){
if (document.all("msg1").filters[1].status==1 || document.all("msg1").filters[1].status==0){
toolTipSTYLE.display = "none";}
}
if (bT){
if (document.all("msg1").filters[2].status==1 || document.all("msg1").filters[2].status==0){
toolTipSTYLE.display = "none";}
}
if (!rT && !bT) toolTipSTYLE.display = "none";
//----------------------
}
}
else // show
{
//alert('998');
if(!fg) fg = "#777777";
if(!bg) bg = "#eeeeee";
var content =
'<table id="msg1" name="msg1" border="0" cellspacing="0" cellpadding="1" bgcolor="' + fg + '" class="trans_msg"><td>' +
'<table border="0" cellspacing="0" cellpadding="3" bgcolor="' + bg +
'"><td width=' + tw + '><font face="Arial" color="' + fg +
'" size="-2">' + msg +
' \;</font></td></table></td></table>';
if(ns4)
{
toolTipSTYLE.document.write(content);
toolTipSTYLE.document.close();
toolTipSTYLE.visibility = "visible";
}
if(ns6)
{
document.getElementById("toolTipLayer").innerHTML = content;
toolTipSTYLE.display='block'
}
if(ie4)
{
document.all("toolTipLayer").innerHTML=content;
toolTipSTYLE.display='block'
//--图象过渡,淡入处理--
var cssopaction=document.all("msg1").filters[0].opacity
document.all("msg1").filters[0].opacity=0;
if (rT) document.all("msg1").filters[1].Apply();
if (bT) document.all("msg1").filters[2].Apply();
document.all("msg1").filters[0].opacity=cssopaction;
if (rT) document.all("msg1").filters[1].Play();
if (bT) document.all("msg1").filters[2].Play();
//----------------------
}
}
}
function moveToMouseLoc(e)
{
if(ns4||ns6)
{
x = e.pageX;
y = e.pageY;
}
else
{
x = event.x + document.body.scrollLeft;
y = event.y + document.body.scrollTop;
}
toolTipSTYLE.left = x + offsetX;
toolTipSTYLE.top = y + offsetY;
return true;
}
</script>
<body>
<div id="toolTipLayer" style="position:absolute; visibility: hidden"></div>
<p>
<script>initToolTips()</script>
</p>
<a href='#' onMouseOver="toolTip('admin','#FFFF00', 'orange')" onMouseOut="toolTip()">move here</a>
</body>
</html>
分享到:
相关推荐
主要为大家详细介绍了jQuery实现div跟随鼠标移动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
用jQuery实现div跟着鼠标走 鼠标移动时,层也跟着鼠标的移动而移动
项目需求是这样的:在一个页面放2个悬浮框,悬浮框随页面的上下滚动有上下波动的效果,最终固定在同一位置,下面通过本文给大家分享基于JavaScript实现div层跟随滚动条滑动的相关资料,对js div跟随滚动条滑动相关...
通过Div+CSS 结合Jquery制作的具有左侧菜单、导航菜单、下拉菜单、自动适应窗口大小、自动控制iframe高度,动态修改CSS样式,利用CSS的expression表达式,自动调整div大小,实现div左侧跟随的诸多布局应用。
本文实例讲述了JS实现的简单鼠标跟随DiV层效果。分享给大家供大家参考,具体如下: 这段代码呈现一串跟随鼠标的Div效果,并有拖影特效,随着鼠标快速的晃动,Div层效果会不断的增加,后面的Div会自动消失,不过还...
JavaScript实现跟随鼠标移动的盒子 本文实例为大家分享了JavaScript实现跟随鼠标移动的具体代码,供大家参考,具体内容如下 跟随鼠标移动的盒子(包括检测边界值) 效果图: 代码: <!DOCTYPE ...
主要介绍了jQuery实现div浮动层跟随页面滚动效果,需要的朋友可以参考下
下面小编就为大家带来一篇用jQuery向div中添加Html文本内容的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
NULL 博文链接:https://hugang357.iteye.com/blog/971213
下面小编就为大家分享一篇jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
主要介绍了vue实现给div绑定keyup的enter事件,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
下面小编就为大家带来一篇JQuery实现DIV其他动画效果的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
13.11 实例九:鼠标文字跟随 第14章 CSS与XML的综合运用 14.1 XML基础 14.2 XML链接CSS文件 14.3 XML文字阴影效果 14.4 XML古诗字画 14.5 XML实现隔行变色的表格 第15章 CSS...
本文实例为大家分享了js实现跟随鼠标移动的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>follow mouse</title> </head> <style type=text/css&...
div不随滚动条的滚动而动 可以兼容到IE6 绝对好用
本文实例讲述了jQuery实现鼠标跟随提示层效果代码。分享给大家供大家参考,具体如下: 运行效果截图如下: Web网站有不少需要用到tip提示层的地方,结合jquery的jquery.cluetip.js ,可以实现本地字符或ajax异步...
实现星星跟随鼠标的特效 if (!document.layers&&!document.all) event="test" function showtip2(current,e,text){ if (document.all&&document.readyState=="complete"){ document.all.tooltip2.innerHTML='...
13.11 实例九:鼠标文字跟随 第14章 CSS与XML的综合运用 14.1 XML基础 14.2 XML链接CSS文件 14.3 XML文字阴影效果 14.4 XML古诗字画 14.5 XML实现隔行变色的表格 第15...