JS指定DIV显示

最新推荐文章于 2022-08-05 16:37:16 发布
最新推荐文章于 2022-08-05 16:37:16 发布
阅读量234 收藏
点赞数
分类专栏： Java 文章标签： C C++ C# IE 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cenhonggang86/article/details/83813150
版权

 

<!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="×" οnclick="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  οnmοuseοut="closeDiv();" οnmοuseοver="showInfo();" style="color:#009">dddddddddddddddddddddd</td>

        <td>e</td>

    </tr>

    <tr>

     <td>a</td>

        <td>b</td>

        <td>c</td>

        <td  οnmοuseοut="closeDiv();" οnmοuseοver="showInfo();" style="color:#009">dddddddddddddddddddddd</td>

        <td>e</td>

    </tr>

    <tr>

     <td>a</td>

        <td>b</td>

        <td>c</td>

        <td  οnmοuseοut="closeDiv();" οnmοuseοver="showInfo();" style="color:#009">dddddddddddddddddddddd</td>

        <td>e</td>

    </tr>

    <tr>

     <td>a</td>

        <td>b</td>

        <td>c</td>

        <td  οnmοuseοut="closeDiv();" οnmοuseοver="showInfo();" style="color:#009">dddddddddddddddddddddd</td>

        <td>e</td>

    </tr>

    <tr>

     <td>a</td>

        <td>b</td>

        <td>c</td>

        <td  οnmοuseοut="closeDiv();" οnmοuseοver="showInfo();" style="color:#009">dddddddddddddddddddddd</td>

        <td>e</td>

    </tr>

    <tr>

     <td>a</td>

        <td>b</td>

        <td>c</td>

        <td  οnmοuseοut="closeDiv();" οnmοuseοver="showInfo();" style="color:#009">dddddddddddddddddddddd</td>

        <td>e</td>

    </tr>

    <tr>

     <td>a</td>

        <td>b</td>

        <td>c</td>

        <td  οnmοuseοut="closeDiv();" οnmοuseοver="showInfo();" style="color:#009">dddddddddddddddddddddd</td>

        <td>e</td>

    </tr>

    <tr>

     <td>a</td>

        <td>b</td>

        <td>c</td>

        <td  οnmοuseοut="closeDiv();" οnmοuseοver="showInfo();" style="color:#009">dddddddddddddddddddddd</td>

        <td>e</td>

    </tr>

    <tr>

     <td>a</td>

        <td>b</td>

        <td>c</td>

        <td  οnmοuseοut="closeDiv();" οnmοuseοver="showInfo();" style="color:#009">dddddddddddddddddddddd</td>

        <td>e</td>

    </tr>

    <tr>

     <td>a</td>

        <td>b</td>

        <td>c</td>

        <td  οnmοuseοut="closeDiv();" οnmοuseοver="showInfo();" style="color:#009">dddddddddddddddddddddd</td>

        <td>e</td>

    </tr>

    <tr>

     <td>a</td>

        <td>b</td>

        <td>c</td>

        <td  οnmοuseοut="closeDiv();" οnmοuseοver="showInfo();" style="color:#009">dddddddddddddddddddddd</td>

        <td>e</td>

    </tr>

    <tr>

     <td>a</td>

        <td>b</td>

        <td>c</td>

        <td  οnmοuseοut="closeDiv();" οnmοuseοver="showInfo();" style="color:#009">dddddddddddddddddddddd</td>

        <td>e</td>

    </tr>

    <tr>

     <td>a</td>

        <td>b</td>

        <td>c</td>

        <td  οnmοuseοut="closeDiv();" οnmοuseοver="showInfo();" style="color:#009">dddddddddddddddddddddd</td>

        <td>e</td>

    </tr>

    <tr>

     <td>a</td>

        <td>b</td>

        <td>c</td>

        <td  οnmοuseοut="closeDiv();" οnmοuseοver="showInfo();" style="color:#009">dddddddddddddddddddddd</td>

        <td>e</td>

    </tr>

</table>

<input type="text" id="x" />

<input type="text" id="y" /> 

</body>

</html>


cenhonggang86
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js如何设置在iframe框架中指定div不显示
10-26
在iframe框架中指定div不显示，有多种实现方法，接下来与大家分享下使用js的具体实现，感兴趣的朋友可以参考下
原生JS在指定div制作一个文件夹管理器，实现新增，删除文件夹等功能（上篇）
蜡笔不新的博客
05-10 563
制作一个属于自己的文件夹管理器，实现删除，新增，重命名文件夹等功能，可任意用于指定的div中
js页面指定div刷新（局部刷新）
u010209010的博客
08-05 9138
js页面指定div刷新
JS/Jquery_实现打印页面指定div的方法_个人总结
u010556471的专栏
12-18 1万+
最近正在开发OA系统，涉及到了页面打印的相关操作。在实际的开发过程中，浏览器本身自带的打印操作默认打印整个可视界面，但是往往不能满足实际项目需要，打印页面指定内容的功能在OA系统中更加常见。网络上有很多的方法实现，本人结合自身实际体会，绝大多数的方法进行归纳。 本文使用的例子是3个4X3表格，分别写在，1号：内，2号：由载入页面内，3号：由iframe引入页面内，如图： 方法一：将table放
js实现页面指定div局部刷新
he110_的博客
08-19 2万+
https://blog.csdn.net/qq_38082431/article/details/79204454 下面介绍全页面刷新方法：有时候可能会用到 window.location.reload()刷新当前页面. parent.location.reload()刷新父亲对象（用于框架） opener.location.reload()刷新父窗口对象（用于单开窗口） top.locati...
用JS将页面定位到某个位置（DIV）
信念堤岸
09-22 1万+
，发现使用javascript中的window.scrollBy()存在一个问题：每刷新一次页面，滚动距离顶部的高度都会比上次递增我们定义的scroll_y值。  所以还是建议大家使用window.location.hash方法来自动将页面滚动到指定位置。  $(function(){ window.location.hash = "#title"; })   window.locatio
js使用removeChild方法动态删除div元素
12-12
所以考虑到用js来搞。 这个for循环就是移除已有的表单。然后根据Ajax请求过来的数据，动态生成新的表单对象。一定要注意j变量从大往小循环，否则，删除div元素后会引起serchResultLenth=serchResult.children.length...
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
10-29
今日闲来无事就写写JS，用来显示/隐藏制定的DIV区域。
Js Div属性大全
10-30
1.js 控制　DIV　 2.js通过标签对DIV操作． 例如： accessKey　设置或获取对象的快捷键。 align　设置或获取对象相对于显示或表格的排列方式。 atomicselection　指定元素及其内容是否可以一不可见单位统一选择。 ...
JavaScript显示和隐藏某个div
dusea的博客
10-03 2631
JavaScript显示和隐藏某个div var target=document.getElementById('rightup'); if (target.style.display=="block"){ target.style.display="none"; } else { t
简单js控制div的显示与隐藏
热门推荐
冰蒂的博客
02-24 5万+
这样的例子有很多；但是这个最简单最容易理解； 以下两个页面代码粘贴复制就可以看效果，拿去玩吧！1. div初始隐藏页面<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:/
js实现点击一个div显示另一个div
weixin_42630877的博客
08-06 6290
&lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="UTF-8"&gt;         &lt;title&gt;&lt;/title&gt;     &lt;/head&gt;     &lt;body&gt;         &lt;div on
js实现点击显示一个div,点击其他任何地方div消失
叶子先生的博客
10-21 1195
https://bbs.csdn.net/topics/390853007 https://www.itranslater.com/qa/details/2125411084126389248 https://blog.csdn.net/Mr_ito/article/details/104232251
js生成div并在指定位置显示出来
weixin_43545329的博客
12-05 5529
点击客户名称输入内容 ，触发post请求向后台请求数据（模糊查询）。然后将请求后的数据 生成一个div 在该输入框下方显示出来。下面是具体实现方法； js： 创建请求 //创建请求 function createXMLHttpRequest() { xmlHttp = false; if (window.XMLHttpRequest) { //for Mozilla...
js中div的显示和隐藏
weixin_44389107的博客
01-20 2765
一.方式1：隐藏后仍占有页面空间，显示空白     div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白     style="visibility: none;"      //在Div中设置style属性     document.getElementById("typediv1").style.visibility="hidden";//隐藏     documen...
下拉列表用JS控制指定的div显示、隐藏
chuge6367的博客
05-26 201
<style type="text/css"> div{display:none;} </style> <body> <select name="select1" id="select1"> <option name="option1" ...
vue 点击div以外隐藏指定div,再次查询如果有数据则重新显示div
最新发布
06-09
您可以使用Vue的v-on指令，以及事件修饰符来实现点击div以外隐藏指定div的功能，再次查询如果有数据则重新显示div的功能可以使用Vue的watch监听数据变化，当数据发生变化时再显示指定div。 具体实现方法如下： 1. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值