鼠标单击位置定位div - 江南听雨 - ITeye博客

`

zengshaotao

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

最近访客更多访客>>

njdccy

AK1343794853

chehaoj

jstl1point0

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

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

鼠标单击位置定位div

阅读更多

<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>

分享到：

Myeclipse6.0破解 | init()和service()

2013-06-24 21:43
浏览 525
评论(0)
分类:Web前端
查看更多

评论

发表评论

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

相关推荐

js实现鼠标单击链接在鼠标位置弹出层: 在JavaScript编程中，"js实现鼠标单击链接在鼠标位置弹出层"是一个常见的交互设计技术，常用于创建用户友好的网页应用。这种技术的主要目的是提高用户体验，让用户能够在一个特定的鼠标点击位置看到一个弹出层，比如...

js实现圆形显示鼠标单击位置: 标题中的“js实现圆形显示鼠标单击位置”指的是在网页中使用JavaScript编程语言来实现在用户鼠标单击屏幕时，于单击位置显示一个圆形的标记。这个功能可以帮助开发者调试或者设计网页时，清晰地看到用户的交互点。...

div+css很好的例子与特效: 分页是网页内容分隔的重要工具，良好的分页设计能够帮助用户更便捷地浏览和定位内容。 “清爽CSS网页.htm”可能是使用Div+CSS构建的简单网页示例，通过合理的布局和色彩搭配，使网页看起来干净整洁。CSS的布局技巧...

DreamweaverCS5网页制作自学教程第11课：DIV层布局与Spry构件3.pdf: 在本教程中，我们将学习如何创建和定位DIV，以及如何使用Float属性让多个DIV并排显示。例如，通过设置`float:left`或`float:right`，可以实现左右排列的布局。同时，使用CSS的`margin: 0 auto`可以实现DIV的水平居中...

使用DivCSS布局网页PPT学习教案.pptx: - **相对定位**：元素相对于其正常位置定位，使用`position:relative;`，可通过`top`、`right`、`bottom`、`left`进行微调。 - **浮动定位**：通过`float`属性实现，可以是`none`（不浮动）、`left`（向左浮动）或...

使用框架和APDiv布局页面.ppt: 可以单击【插入】 / 【布局】面板上的（绘制 AP Div）按钮，将鼠标光标移至文档窗口中，当鼠标光标变为+形状时，拖曳鼠标光标，绘制一个自定义大小的 AP Div。如果想一次绘制多个 AP Div，在单击（绘制 AP Div）按钮...

页面右下角弹出窗口: <div id="popup">这是一个右下角弹出窗口</div> $(document).ready(function(){ setTimeout(function(){ $("#popup").fadeIn(); }, 3000); // 延迟3秒显示 $("#popup").click(function(){ $(this)....

图片轮播效果: 4. 控制按钮（本案例中为鼠标单击换图）：一般包括“上一张”和“下一张”按钮，用户可以通过点击这些按钮来手动切换图片。在这个特殊的案例中，文字图片是固定的，这意味着它始终在轮播下方显示，而不会随图片...

js 单击式的下拉菜单效果实例: `dropit`函数在支持`event`对象的浏览器中处理点击事件，它根据鼠标坐标调整菜单的位置，并切换菜单的可见性。`hidemenu`和`hidemenu2`函数用于隐藏菜单，前者在文档被点击时调用，后者则在下拉菜单外部被点击时调用...

BrentEditor: 8) 目前的画布布局为 flow，对象的位置由flow算法决定，所以只能调整大小，不能调整位置。下一步将实现的是： 1) 绘制table 2) 更改字体 3) 更改DIV、cell边框属性，设置填充颜色 4) 实现absolute定位 5) ...

Excel表格的隔行调整行高的4种方法.docx: 现在选中这两个单元格，将鼠标定位于选区右下角的填充句柄，按下鼠标右键，向下拖动至最后一行。松开鼠标后，在弹出的快捷菜单中选择"复制单元格"的命令。好了，现在该列的奇数行均是数字1，而偶数行则都是"#DIV/0!...

天地图-拾取经纬度坐标-实例: 这种功能通常通过JavaScript的GIS库实现，如OpenLayers或Leaflet，它们可以与天地图的API结合，获取地图交互事件，并将鼠标点击位置转换为经纬度坐标。实现这一功能的关键步骤包括： 1. 引入GIS库：在HTML中引入...

超实用的jQuery代码段: 3.8 鼠标单击实现div的选取 3.9 模拟鼠标单击事件 3.10 设定时间间隔的方法 3.11 设定时间延迟的方法 3.12 延时显示子菜单的方法 3.13 通过事件获取页面加载时间 3.14 如何为动态添加的元素绑定事件处理函数 3.15 为...

网页设计cs3复习资料(无答案).pdf: 13. `onclick`动作代表鼠标单击对象时触发事件执行，常用于交互式功能的实现。 14. 要将表格列的宽度值从百分比转换为像素，需要选中表格并更改“宽”属性的值。 15. 层（Layer）可以实现对象浮动在页面之上，提供...

multisim仪器仪表的使用方法: - 使用垂直光标定位到需要读取的数据位置，屏幕下方会显示该点的时间和电压值，以及两个光标之间的差值。 #### 六、波特图仪(Bode Plotter) **功能介绍** 波特图仪用于测量和显示电路的幅频特性与相频特性。它有...

点击图片显示说明文字: /* 设置绝对定位 */ background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */ color: white; padding: 10px; z-index: 100; /* 确保文字层在图片之上 */ } ``` 最后，JavaScript负责实现交互逻辑。这里...

jquery单击文字或图片内容放大并居中显示: 在本示例中，我们将探讨如何使用jQuery实现一个功能，即当用户单击文本或图片时，内容将放大并在页面中央显示。这个效果通常用于图片预览或详细信息查看，提供了一个用户友好的交互体验。首先，为了实现这个功能，...

《ASP.NET网页设计与网站开发》习题参考解答: ### ASP.NET与VS2005开发平台 ...2. 在需要添加样式规则的地方（大括号外面），单击鼠标右键。 3. 在弹出的快捷菜单中选择“添加样式规则”命令。 4. 在弹出的对话框中选择需要添加样式的元素，并设置相应的样式属性。

Global site tag (gtag.js) - Google Analytics