- 浏览: 45529 次
- 性别:
- 来自: 大连
-
最新评论
<!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=gb2312" />
<title>动态获取鼠标位置(兼容IE、FF)</title>
<script>
var mousex;
var mousey;
function mouseMove(e){
var obj=e||window.event;
var mousePos = mouseCoords(obj);
mousex=mousePos.x;
mousey=mousePos.y;
}
function mouseCoords(obj){
if(obj.pageX||obj.pageY){//FF浏览器
return {x:obj.pageX, y:obj.pageY};
}
//IE浏览器
return {x:obj.clientX + document.body.scrollLeft-document.body.clientLeft,y:obj.clientY + document.body.scrollTop-document.body.clientTop}
}
document.onmousemove = mouseMove;
var s;
var w =1;
function showInfo(){
var d = document.getElementById("ss");
d.style.display = 'block';
d.style.top = (mousey-10)+'px';
d.style.left = (mousex-320)+'px';
document.getElementById("x").value = mousex;
document.getElementById("y").value = mousey;
if(w==1){
s = d.innerHTML;
w=2;
}
d.innerHTML = s+"ssssssssssssssssssssssssss";
}
function closeDiv(){
document.getElementById("ss").style.display = 'none';
}
</script>
</head>
<body>
<div id="ss" style="border: 1px solid #000; background-color:#F00; width:300px; height:300px;display:none; position:absolute; z-index:9999; margin:0px 0px 0px 0px; padding:0px; ">
<div style="text-align:right; width:100%;margin:0px 0px 0px 0px; padding:0px "><input type="button" value="×" onclick="closeDiv();" style=" padding:0px; margin:0px 0px 0px 0px;"/></div>
</div>
<table border="1px" width="100%" cellpadding="0px" cellspacing="0px" style="text-align:center;">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td onmouseout="closeDiv();" onmouseover="showInfo();" style="color:#009">dddddddddddddddddddddd</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td onmouseout="closeDiv();" onmouseover="showInfo();" style="color:#009">dddddddddddddddddddddd</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td onmouseout="closeDiv();" onmouseover="showInfo();" style="color:#009">dddddddddddddddddddddd</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td onmouseout="closeDiv();" onmouseover="showInfo();" style="color:#009">dddddddddddddddddddddd</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td onmouseout="closeDiv();" onmouseover="showInfo();" style="color:#009">dddddddddddddddddddddd</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td onmouseout="closeDiv();" onmouseover="showInfo();" style="color:#009">dddddddddddddddddddddd</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td onmouseout="closeDiv();" onmouseover="showInfo();" style="color:#009">dddddddddddddddddddddd</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td onmouseout="closeDiv();" onmouseover="showInfo();" style="color:#009">dddddddddddddddddddddd</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td onmouseout="closeDiv();" onmouseover="showInfo();" style="color:#009">dddddddddddddddddddddd</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td onmouseout="closeDiv();" onmouseover="showInfo();" style="color:#009">dddddddddddddddddddddd</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td onmouseout="closeDiv();" onmouseover="showInfo();" style="color:#009">dddddddddddddddddddddd</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td onmouseout="closeDiv();" onmouseover="showInfo();" style="color:#009">dddddddddddddddddddddd</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td onmouseout="closeDiv();" onmouseover="showInfo();" style="color:#009">dddddddddddddddddddddd</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td onmouseout="closeDiv();" onmouseover="showInfo();" style="color:#009">dddddddddddddddddddddd</td>
<td>e</td>
</tr>
</table>
<input type="text" id="x" />
<input type="text" id="y" />
</body>
</html>
发表评论
-
将DIV显示在屏幕中间
2011-08-17 22:03 3944/*设置客户端的高和宽*/ function getClie ... -
jquery弹出层
2011-03-02 20:54 1068<%@ page language="java ... -
Ajax等待
2011-01-17 22:20 801ajaxAnywhere.showLoadingMes ... -
下载文件
2010-11-30 08:54 660private void downloadTeamFile(H ... -
获取浏览器右上角叉号的事件
2010-11-18 00:57 2028<javascrip> function is ... -
当前正在浏览的URL
2010-10-12 13:47 650public String getCurrentURL(Htt ... -
JXL读取Excel
2010-10-12 09:55 1054import java.io.FileInputStream; ... -
JXL写入Excel
2010-10-12 09:47 1732import java.io.File; import jav ... -
比较排序例子
2010-10-11 17:43 787import java.util.*;public class ... -
校验是否为数字
2010-10-11 13:48 878import java.util.regex.Matcher; ... -
sss
2010-09-26 10:16 0http://sol225.iteye.com/blog/51 ... -
【转载】typeof的用法
2010-09-26 10:11 733javascript中的typeof用来返回一个用来表示表达式 ... -
【转载】日历
2010-09-25 20:21 533var Calendar = function(){ ... -
【转载】无缝图片滚动代码
2010-09-25 20:17 842向右滚动： <div id=demo style=ove ... -
【转载】制作flash文件进度条
2010-09-25 20:12 832var ubType = (navigator.userAge ... -
js实现最简单的拖拽
2010-09-25 20:10 862关于js实现最简单的拖 ... -
【转载】Eclipse快捷键大全
2010-09-25 20:06 633Ctrl+1 快速修复(最经典的快捷键,就不用多说了) Ct ... -
【转载】JAVA对XML文件的读写
2010-09-25 20:01 914XML读写有很多的方法~~ JAVA中有丰富的类对XML文件 ... -
【转载】变Enter键为Tab键 实现焦点转移
2010-09-25 19:51 864/// <summary> /// 窗体控 ...
相关推荐
在IT领域，特别是前端开发中，使用JavaScript（简称JS）创建动态元素是常见的需求之一。本次探讨的主题聚焦于“js 创建div层”，这不仅是一种基本的网页操作技能，也是实现网页动态效果、交互设计的基础。以下将从...
1. 获取DOM元素：在JavaScript中，我们通常使用`document.getElementById()`，`document.querySelector()`或`document.querySelectorAll()`来获取页面上的指定DIV元素。例如，如果我们有一个ID为"myDiv"的元素，可以...
标题“js截取div并输出为图片”所描述的就是这样的一个功能，通过JavaScript实现对指定`div`元素的截图并转化为图片格式。在这个项目中，以截取百度地图为例，解决了SVG元素无法正常截取的问题，这对于包含复杂SVG...
这意味着第二个div将会显示在第一个div的上面，因为它有一个更大的z-index值。如果想要让某一个div无论在什么情况下都显示在最前面，可以给它设定一个很大的z-index值，如99999，这样它几乎可以覆盖页面上所有其他...
在这个例子中，JS用于控制Div元素的显示和隐藏，以及文字滚动的行为。 1. **文字滚动**： - 在HTML中，我们可以创建一个Div元素来放置需要滚动的文字。 - 使用CSS设置Div的样式，如宽度、高度、溢出隐藏等，以...
这个“指定div右键菜单”的示例旨在教你如何在HTML和JavaScript中创建一个只在特定div元素上显示的右键上下文菜单。这涉及到事件监听、自定义菜单项的创建以及与DOM（文档对象模型）的交互。 1. **事件监听**：首先...
在网页设计和开发中，有时候我们需要处理多个`iframe`（内联框架）并实现特定的交互效果，例如只显示其中一个`iframe`中的`div`元素，并确保它在所有其他元素之上，即处于最上层显示。这样的需求通常出现在需要创建...
在Web开发中，通过JavaScript（简称JS）和CSS结合可以实现很多动态效果，其中“鼠标经过显示隐藏div”就是一个非常实用的功能。本文将详细解析如何利用这些技术来实现一个响应鼠标事件、能够显示和隐藏特定元素（本...
在这个实例中，我们将探讨如何使用SuperMap iClient 7C for JavaScript来动态地改变地图显示在页面中的DIV元素的大小。 首先，理解基本概念：在HTML中，`<div>`元素是一个可塑性很强的容器，通常用来组织网页内容。...
一种常见方法是利用`window.print()`方法，这个JavaScript原生方法会打开浏览器的打印对话框，显示当前窗口的内容。但是，如果只希望打印指定`div`的内容，我们就需要对这个方法进行封装和调整。 以下是一个简单的...
在这个场景中，我们讨论的是如何利用 "onclick" 事件来控制 `div` 元素的隐藏和显示，这在构建动态网页时非常常见。 首先，我们需要了解 `div` 是HTML中的一个块级元素，通常用于组织页面布局。隐藏和显示 `div` ...
在JavaScript中，隐藏或显示`iframe`框架内的`div`元素是常见的需求，尤其是在构建复杂的网页布局或交互时。以下是一些使用JavaScript实现这一功能的方法，以满足在不同上下文中控制`div`可见性的需求。 首先，我们...
以上就是使用JavaScript实现缓动效果来控制div显示隐藏的基本原理和步骤。在实际开发中，你还可以结合CSS3的transition和animation属性，或者使用现有的库如jQuery或GSAP，以更高效、更简洁的方式实现类似效果。不过...
在JavaScript（JS）编程中，实现一个div元素的拖动动画以及显示其运行轨迹效果是一项常见的交互设计任务。这个"js div拖动动画运行轨迹效果代码.zip"压缩包包含了一个示例项目，它展示了如何使用原生JavaScript来...
"纯CSS3实现DIV高亮显示特效"是一种技术，它利用CSS3的特性，无需依赖JavaScript或图像，就能创建出吸引人的高亮效果。这篇文章将深入探讨如何使用CSS3来实现这一效果。 首先，我们要了解CSS3的一些基本概念。CSS3...
本文将详细探讨如何通过JavaScript（JS）实现这一功能。 首先，我们需要理解CSS中的`width`和`height`属性以及`max-width`和`max-height`属性。在默认情况下，如果一个图片的`width`和`height`被设置为100%，它会...
【漂浮鼠标显示div】是一种常见的网页交互设计技术，它涉及到HTML、CSS和JavaScript的综合应用。当用户将鼠标指针悬停在特定元素上时，一个div层会以浮动的方式出现在屏幕上的指定位置，展示相关信息。这种效果常...
2. **滚动条**: 当div的内容超出其宽度或高度时，浏览器会自动显示滚动条，以便用户查看隐藏的内容。 3. **jQuery**: jQuery是JavaScript的一个库，提供了丰富的API，简化了JavaScript编程，如选择器、事件处理、...
### jQuery 实现点击指定 div 外区域隐藏该 div #### 背景介绍 在 Web 开发中，经常需要处理用户交互事件，如点击、滑动等。其中一个常见的需求是当用户点击某个元素（比如一个下拉菜单）时，这个元素会展开；而当...