`
hhr_michael
  • 浏览: 74302 次
  • 性别: Icon_minigender_1
  • 来自: 惠州
社区版块
存档分类
最新评论

实现跟随的Div

阅读更多
     以下的代码为实现跟随的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 +
    '&nbsp\;</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>
分享到:
评论

相关推荐

    js移动层和跟随鼠标的div

    在JavaScript编程中,创建一个移动...综上所述,"js移动层和跟随鼠标的div"涉及了JavaScript事件处理、DOM操作、CSS样式布局以及动画效果的实现。通过理解并实践这些知识点,开发者可以创建出更多有趣的网页交互元素。

    jQuery实现div跟随鼠标移动

    这个类`.aa`被应用到需要实现跟随功能的div上,通过设置`position: absolute;`,我们使得div脱离了文档流,可以自由地定位。 #### 8. jQuery库的引入 实现上述功能的前提是必须在HTML文件中引入jQuery库。本例中...

    JS实现的简单鼠标跟随DiV层效果完整实例

    本实例讲述了一个使用JS实现的简单鼠标跟随Div层效果,这种效果通常用于增强网站的互动性。在这个实例中,Div元素会跟随用户的鼠标移动,同时呈现出拖影效果,即新出现的Div会出现在鼠标位置,而旧的Div会逐渐向左上...

    div跟随固定在浏览器左边,上下不浮动,左右可跟随主体浮动

    在网页设计中,"div跟随固定在浏览器左边,上下不浮动,左右可跟随主体浮动"是一种常见的布局技巧,主要用于创建侧边栏或者导航菜单。这种布局模式可以使元素在页面滚动时始终保持在用户视野的左侧,提供持续的导航...

    利用jquery实现点击表格某一行,其后跟随div弹出框效果

    在本文中,我们将深入探讨如何使用jQuery库来实现一个功能,即当用户点击HTML表格的某一行时,随后会弹出一个div对话框。这个功能常用于数据展示和交互式应用,例如查看详情、编辑记录或者确认操作。我们将分为以下...

    .net js代码实现div拖拽功能

    2. 我们监听mousemove事件,当鼠标移动时,更新div的位置,使其跟随鼠标移动。这通过改变div的left和top样式属性实现。 3. 当用户释放鼠标按钮(mouseup事件)时,我们移除mousemove和mouseup事件监听器,防止进一步...

    DIV CSS iframe 实现的主页布局

    通过Div+CSS 结合Jquery制作的具有左侧菜单、导航菜单、下拉菜单、自动适应窗口大小、自动控制iframe高度,动态修改CSS样式,利用CSS的expression表达式,自动调整div大小,实现div左侧跟随的诸多布局应用。

    图片跟随鼠标出入div

    【标题】"图片跟随鼠标出入div"所涉及的知识点主要集中在网页交互设计和CSS样式上。这个效果通常用于创建一种动态、有趣的用户体验,使图片在鼠标进入和离开div区域时,根据设定的行为跟随鼠标移动。以下是对这个...

    前端实现鼠标跟随动画

    JavaScript可以通过监听`mousemove`事件,实时更新元素的位置来实现跟随效果。以下是一个简单的例子: ```javascript document.addEventListener('mousemove', function(e) { var follower = document....

    JS DIV拖动交换位置DEMO

    4. **防止页面跟随**:为了防止用户拖动`div`时整个页面跟着滚动,我们可能需要阻止默认的`dragstart`事件,或者在`mousedown`事件中设置`event.preventDefault()`。 5. **交换位置**:当两个`div`元素重叠时,我们...

    Jquery跟随滚动条移动的div动画效果

    "Jquery跟随滚动条移动的div动画效果"就是一个典型的例子,它利用jQuery库实现了一个div元素随着页面滚动条移动而同步移动的特效,而且这个div在移动过程中保持平滑,避免了闪烁现象,提升了用户体验。 首先,...

    在HTML页面中实现拖动Div层

    然后,在`mousemove`事件中计算新的位置并更新Div的`left`和`top`样式属性,使其跟随鼠标移动。当鼠标释放(`mouseup`)时,移除`mousemove`事件监听器以停止移动。 注意,这样的实现只适用于在同一个HTML文档内拖动...

    div悬浮在canvas上

    如果需要在canvas上进行动态交互,比如点击canvas时检测是否与div重叠,或者让div跟随鼠标移动,我们需要用到JavaScript。例如,可以监听canvas的`mousedown`和`mousemove`事件,然后通过计算鼠标位置与div的位置...

    js实现下划线跟随选择卡滑动.rar

    在JavaScript(js)中实现选择卡(tab)的下划线滑动效果是一种常见的交互设计,它可以提升用户体验,使得用户能够清晰地看到当前所选的选项。这种效果常见于网页和移动应用中,用于切换不同的内容区域。下面将详细...

    jquery特效DIV层跟随页面向下滚动

    标题中的"jquery特效DIV层跟随页面向下滚动"指的是在网页设计中使用jQuery库实现的一种交互效果。当用户滚动页面时,一个特定的div元素(通常包含重要的信息或导航)会固定在屏幕的一侧,保持可见,即使用户滚动页面...

    js鼠标浮动显示div

    3. **定义监听器函数**:在监听器函数内,我们可以获取鼠标的位置(通过`event.clientX`和`event.clientY`),并根据这些坐标调整div的位置,使其跟随鼠标。同时,通过改变div的`display`属性,使其从隐藏变为可见。...

    js实现div拖动

    在本主题中,我们将深入探讨如何使用纯JavaScript实现div元素的拖动功能。 首先,我们需要理解HTML中的`&lt;div&gt;`元素。`&lt;div&gt;`是一个通用的容器标签,用来组织页面内容。为了让`&lt;div&gt;`元素可以被拖动,我们需要通过...

Global site tag (gtag.js) - Google Analytics