`
cenhonggang86830
  • 浏览: 45183 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

JS指定DIV显示

    博客分类：
  • Java
CC++C#IE浏览器 
阅读更多

 

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


分享到：
| 将Sequence统一加100000
评论
发表评论

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

相关推荐

    js 创建div层

    在IT领域，特别是前端开发中，使用JavaScript（简称JS）创建动态元素是常见的需求之一。本次探讨的主题聚焦于“js 创建div层”，这不仅是一种基本的网页操作技能，也是实现网页动态效果、交互设计的基础。以下将从...

    javascript操作DIV总结（弹出窗口篇）

    1. 获取DOM元素：在JavaScript中，我们通常使用`document.getElementById()`，`document.querySelector()`或`document.querySelectorAll()`来获取页面上的指定DIV元素。例如，如果我们有一个ID为"myDiv"的元素，可以...

    js截取div并输出为图片

    标题“js截取div并输出为图片”所描述的就是这样的一个功能，通过JavaScript实现对指定`div`元素的截图并转化为图片格式。在这个项目中，以截取百度地图为例，解决了SVG元素无法正常截取的问题，这对于包含复杂SVG...

    妙用z-index让一个div显示在最前面

    这意味着第二个div将会显示在第一个div的上面，因为它有一个更大的z-index值。如果想要让某一个div无论在什么情况下都显示在最前面，可以给它设定一个很大的z-index值，如99999，这样它几乎可以覆盖页面上所有其他...

    js+div实现文字滚动和图片切换效果代码.docx

    在这个例子中，JS用于控制Div元素的显示和隐藏，以及文字滚动的行为。 1. **文字滚动**： - 在HTML中，我们可以创建一个Div元素来放置需要滚动的文字。 - 使用CSS设置Div的样式，如宽度、高度、溢出隐藏等，以...

    鼠标经过显示隐藏div

    在Web开发中，通过JavaScript（简称JS）和CSS结合可以实现很多动态效果，其中“鼠标经过显示隐藏div”就是一个非常实用的功能。本文将详细解析如何利用这些技术来实现一个响应鼠标事件、能够显示和隐藏特定元素（本...

    指定div右键菜单

    这个“指定div右键菜单”的示例旨在教你如何在HTML和JavaScript中创建一个只在特定div元素上显示的右键上下文菜单。这涉及到事件监听、自定义菜单项的创建以及与DOM（文档对象模型）的交互。 1. **事件监听**：首先...

    多个iframe，显示其中一个frame中的div，并处于最上层显示

    在网页设计和开发中，有时候我们需要处理多个`iframe`（内联框架）并实现特定的交互效果，例如只显示其中一个`iframe`中的`div`元素，并确保它在所有其他元素之上，即处于最上层显示。这样的需求通常出现在需要创建...

    onclick事件实现div的隐藏和显示

    在这个场景中，我们讨论的是如何利用 "onclick" 事件来控制 `div` 元素的隐藏和显示，这在构建动态网页时非常常见。 首先，我们需要了解 `div` 是HTML中的一个块级元素，通常用于组织页面布局。隐藏和显示 `div` ...

    JavaScript改变地图DIV大小

    在这个实例中，我们将探讨如何使用SuperMap iClient 7C for JavaScript来动态地改变地图显示在页面中的DIV元素的大小。 首先，理解基本概念：在HTML中，`&lt;div&gt;`元素是一个可塑性很强的容器，通常用来组织网页内容。...

    jquery打印指定的div

    一种常见方法是利用`window.print()`方法，这个JavaScript原生方法会打开浏览器的打印对话框，显示当前窗口的内容。但是，如果只希望打印指定`div`的内容，我们就需要对这个方法进行封装和调整。 以下是一个简单的...

    js如何设置在iframe框架中指定div不显示

    在JavaScript中，隐藏或显示`iframe`框架内的`div`元素是常见的需求，尤其是在构建复杂的网页布局或交互时。以下是一些使用JavaScript实现这一功能的方法，以满足在不同上下文中控制`div`可见性的需求。 首先，我们...

    javascript学习笔记（1） 缓动效果显示隐藏div

    以上就是使用JavaScript实现缓动效果来控制div显示隐藏的基本原理和步骤。在实际开发中，你还可以结合CSS3的transition和animation属性，或者使用现有的库如jQuery或GSAP，以更高效、更简洁的方式实现类似效果。不过...

    js div拖动动画运行轨迹效果代码.zip

    在JavaScript（JS）编程中，实现一个div元素的拖动动画以及显示其运行轨迹效果是一项常见的交互设计任务。这个"js div拖动动画运行轨迹效果代码.zip"压缩包包含了一个示例项目，它展示了如何使用原生JavaScript来...

    通过JS自动调整图片的大小以适应div的高和宽

    本文将详细探讨如何通过JavaScript（JS）实现这一功能。 首先，我们需要理解CSS中的`width`和`height`属性以及`max-width`和`max-height`属性。在默认情况下，如果一个图片的`width`和`height`被设置为100%，它会...

    漂浮鼠标显示div

    【漂浮鼠标显示div】是一种常见的网页交互设计技术，它涉及到HTML、CSS和JavaScript的综合应用。当用户将鼠标指针悬停在特定元素上时，一个div层会以浮动的方式出现在屏幕上的指定位置，展示相关信息。这种效果常...

    jQuery实现将div的滚动条滚动到指定位置

    2. **滚动条**: 当div的内容超出其宽度或高度时，浏览器会自动显示滚动条，以便用户查看隐藏的内容。 3. **jQuery**: jQuery是JavaScript的一个库，提供了丰富的API，简化了JavaScript编程，如选择器、事件处理、...

    DIV折叠展开DIV折叠展开

    此函数用于实现页面中所有指定ID前缀为“DIV”的元素的显示或隐藏。具体实现如下： ```javascript function panall() { for (var i = 1; i ; i++) { var divElement = document.getElementById("DIV" + i); if ...

    JS实现点击复选框变更DIV显示状态的示例代码

    根据提供的文件内容，下面将详细解释使用JavaScript实现点击复选框变更DIV显示状态的示例代码中涉及的知识点。 首先，我们来梳理一下页面上的结构。页面上包含了一个复选框和多个表单项，其中复选框被用于控制DIV块...

Magicbox
Global site tag (gtag.js) - Google Analytics