DIV 鼠标定位 - 江南听雨 - ITeye博客

`

zengshaotao

浏览: 787550 次
性别:
来自: 上海

最近访客更多访客>>

njdccy

AK1343794853

chehaoj

jstl1point0

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

zengshaotao： jstl1point0 写道很好啊，如果有带Session会话 ...
Nginx+Tomcat搭建高性能负载均衡集群
jstl1point0：很好啊，如果有带Session会话的怎么搞呢
Nginx+Tomcat搭建高性能负载均衡集群

DIV 鼠标定位

博客分类：

javascript

阅读更多

<head>

<script language="javascript" src="jquery-1.6.1.js"></script>
<style type="text/css">
.tanchuang_wrap {
width: 400px;
height: 300px;
position: absolute;
background-color: green;
left: 200px;
top: 200px;
}
</style>
</head>
<script type="text/javascript">
function bodyclick(){
  var x = window.event.clientX;//鼠标点击时相对本文档里body标签的位置
        var y = window.event.clientY;
        //alert("clientX:"+x+"-clientY"+y)
            var xx = window.event.screenX;
            var yy = window.event.screenY;
            var temp = $(window).scrollTop();
            var rr =$("#aaaa").width();
            //var tt = x-;

             //alert("screenX:"+xx+"-screenY"+yy)
             document.getElementById("aaaa").style.left=x-rr/2;
             document.getElementById("aaaa").style.top=y+temp;
}
</script>
<body onclick="bodyclick()">
<pre>
     这里为了出现滚动条
     这里为了出现滚动条
      这里为了出现滚动条
     这里为了出现滚动条
      这里为了出现滚动条
     这里为了出现滚动条
      这里为了出现滚动条
     这里为了出现滚动条
      这里为了出现滚动条
     这里为了出现滚动条
      这里为了出现滚动条
     这里为了出现滚动条
      这里为了出现滚动条
     这里为了出现滚动条
      这里为了出现滚动条
     这里为了出现滚动条
      这里为了出现滚动条
     这里为了出现滚动条
      这里为了出现滚动条
     这里为了出现滚动条
      这里为了出现滚动条
     这里为了出现滚动条
      这里为了出现滚动条
     这里为了出现滚动条
      这里为了出现滚动条
     这里为了出现滚动条
      这里为了出现滚动条
     这里为了出现滚动条
      这里为了出现滚动条
     这里为了出现滚动条
      这里为了出现滚动条
     这里为了出现滚动条
      这里为了出现滚动条
     这里为了出现滚动条
      这里为了出现滚动条
     这里为了出现滚动条
      这里为了出现滚动条
     这里为了出现滚动条

    </pre>


   <div class="tanchuang_wrap" id="aaaa" onclick="">

   </div>
</body>

<这里是div的框架页面》

<html>
<head>
    <base href="<%=basePath%>">
<script language="javascript" src="jquery-1.6.1.js"></script>
</head>
<script type="text/javascript">
$(function(){

})
</script>

<frameset cols="200,*" rows="100%" border="1px" frameborder="1" framespacing="0px">
<frame src="frameset/left.jsp" scrolling="no" noresize name="left">
<frameset name rows="130,*,100" cols="*" border="1" framespacing="0" frameborder="yes" >
  <frame name="rightup" src="frameset/rightup.jsp" frameborder="yes" scrolling="no" noresize >
  <frame name="" src="frameset/rightmidd.jsp" scrolling="" noresize>
  <frame name="bottomFrame" src="frameset/rightdown.jsp" frameborder="1" scrolling="no" noresize>
</frameset>

<noframes>
  <body>
  <p>您的浏览器不支持框架</p>
  </body>
</noframes>
</frameset>
</html>

0
顶

0
踩

分享到：

JQuery-xml | Mybatis

2012-11-20 20:08
浏览 979
评论(0)
分类:Web前端
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

鼠标移动到div上显示制定信息或者div（自适应显示位置）: /* 使div相对于文档定位 */ background-color: white; padding: 10px; border: 1px solid #ccc; display: none; /* 默认隐藏 */ } ``` 现在，我们需要使用JavaScript（这里我们可以使用jQuery库，因为它简洁...

DivCss鼠标划过滑动门效果: "DivCss鼠标划过滑动门效果"就是利用CSS来实现的一种特定的滑动门效果，它通过改变鼠标悬停在元素上时的背景图像位置，创造出一种类似门开启或关闭的动画效果。具体来说，滑动门效果主要基于以下CSS属性： 1. **...

鼠标滚动div内容: 在实现鼠标滚动div内容之前，我们首先需要对div进行适当的布局和定位。CSS中的`position`属性（如`relative`, `absolute`, 或 `fixed`）可以控制元素相对于其父元素或浏览器窗口的位置。`overflow`属性则决定了内容...

菜单表情 div 定位判断鼠标: 菜单表情 div 定位判断鼠标主要提供一个网页全局定位函数，根据OBJ来定位,让DIV定位到OBJ上或者下或者右或者右或者增加偏移量(不规则图形背景) 支持左对齐定位，右对齐定位另外还有个鼠标判断函数，判断在或者...

JavaScript获取鼠标位置和鼠标与div的相对位置: 在JavaScript中，获取鼠标位置和计算鼠标与特定div元素的相对位置是常见的需求，这在交互式网页开发中尤其重要。下面将详细讲解如何实现这些功能。首先，我们需要理解两个基本概念：`event.clientX` 和 `event....

鼠标移到DIV上特效: 在网页设计中，"鼠标移到DIV上特效"是一种常见的交互设计技术，用于增强用户体验。它主要涉及JavaScript（JS）、HTML和CSS这三种核心技术。本文将详细介绍如何实现这一效果，并通过实例解析来帮助理解。首先，HTML...

js移动层和跟随鼠标的div: 这里，我们设置了一个id为`floatingDiv`的div，使用绝对定位，以便我们可以自由地改变其位置。接着，我们需要在`mouseFollow.js`中编写JavaScript代码来实现鼠标跟随效果。主要逻辑包括： 1. **事件监听**：使用`...

鼠标拖动DIV，DIV移动后加载后台JSON数据: 在网页开发中，实现鼠标拖动DIV元素并根据其移动位置动态加载后台JSON数据是一项常见的交互功能。这个功能可以用于创建可自定义布局的界面、拖放式编辑器或者地图等应用。以下是对这一技术的详细说明：首先，我们...

js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动改变位置: js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动改变位置两个功能demo js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动改变位置两个功能demo js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动改变位置两个功能demo js模拟...

js 随鼠标滚动条滚动的div: 在JavaScript中，实现一个div元素随鼠标滚动条滚动的效果，主要涉及到两个关键概念：事件监听和CSS定位。这个效果常用于创建固定定位的侧边栏、头部导航等元素，即使页面滚动，它们仍然保持在视口中的特定位置。 ...

根据鼠标位置弹出div: 3. **动态定位div**：利用CSS的`position`属性（如`absolute`或`fixed`），结合JavaScript计算出div的left和top值，使其跟随鼠标位置显示。 4. **CSS样式**：设置div的透明度、背景色、边框、阴影等样式，以提高...

当鼠标悬停在文本上面的时候显示相对位置的div: 标题“当鼠标悬停在文本上面的时候显示相对位置的div”描述了一种常见的用户界面（UI）设计技术，即使用JavaScript或者CSS来实现动态效果。这种效果使得当用户将鼠标光标悬停在特定文本上时，一个div元素会出现在...

JS实现鼠标拖动div移动(附效果演示).zip: 在JavaScript中，实现鼠标拖动div移动的效果是前端开发中常见的交互设计，它涉及到DOM操作、事件处理以及坐标计算等多个知识点。以下将详细介绍这个过程。首先，我们需要理解`div`在HTML中的作用。`div`元素是块级...

鼠标悬停在按钮上弹出DIV层页面，鼠标离开后层消失jquery实例: 本文将深入探讨如何使用jQuery实现一个“鼠标悬停在按钮上弹出DIV层页面，鼠标离开后层消失”的功能，这通常被称为“浮动提示框”或“悬停弹窗”。这个功能在很多网站，如当当网，被广泛应用来展示更多的信息或者...

div css移动鼠标改变样式弹出div层: 本话题主要探讨如何利用 `div` 和 `css` 实现一个动态效果：当鼠标移动到特定`div`上时，能够改变样式并弹出一个相关信息的`div`层。首先，我们需要创建两个`div`元素：一个作为主内容区域，另一个作为弹出层。在...

漂浮鼠标显示div: `jquery.qtip-1.0.0-rc3.js`是这个插件的早期版本，它提供了丰富的自定义选项，如定位方式（如跟随鼠标、固定位置等）、样式、内容类型等。通过调用jQuery的`.qtip()`方法，我们可以轻松地为任何元素添加提示功能。...

jQuery图片展示滑动div鼠标滚轮时间: **jQuery图片展示滑动div鼠标滚轮事件** 在网页设计中，动态的图片展示往往能够提升用户体验，使得网站更加生动有趣。本示例利用jQuery库，结合div元素和鼠标滚轮事件，创建了一个图片展示区域，用户可以通过滚动...

js鼠标悬浮显示详细内容: 当鼠标进入`#target`元素范围时，`mouseover`事件触发，显示并定位`#detail`；当鼠标离开`#target`，`mouseout`事件触发，隐藏`#detail`。此外，为了优化用户体验，还可以考虑添加动画效果，比如使用CSS3的`...

div+css制作的鼠标经过放大字体样式的特效: ### div+css实现鼠标经过时字体放大的特效详解在网页设计中，为了提升用户体验以及增强页面的互动性，开发者经常需要实现各种各样的动态效果。本文将详细介绍如何使用div和CSS来制作一个简单的鼠标经过时字体放大...

jQuery实现div跟随鼠标移动: ### jQuery实现div跟随鼠标移动的知识点 #### 1. jQuery基础在深入讨论如何使用jQuery实现div跟随鼠标移动之前，需要了解jQuery的基本概念。jQuery是一个快速、小巧、功能丰富的JavaScript库，通过使用jQuery，...

Global site tag (gtag.js) - Google Analytics