Javascript控制DIV层显示与隐藏两个实例

简单指向文字显示内容实例

 代码如下 复制代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>oec2003</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function toggle(targetid){
    if (document.getElementById){
        target=document.getElementById(targetid);
            if (target.style.display=="block"){
                target.style.display="none";
            } else {
                target.style.display="block";
            }
    }
}
-->
</script>
<style type="text/css">
<!--
#div1{
background-color:#000000;
height:400px;
width:400px;
display:none;
}
-->
</style>
</head>

<body>
<input type="button" id="butn" value="显示/隐藏" onclick="toggle('div1')" />
<center>
<div id="div1"></div></center>
居中的DIV
</body>
</html>

经过连接时显示图片

 代码如下 复制代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script type="text/javascript">
        var path = './'; //图片相对路径
        function show(obj) {
            var name = obj.innerText;
            var sDiv = document.getElementById('img_' + name.split('.')[0]);//文件名自己判断
            if (!sDiv) {
                sDiv = document.createElement("DIV");
                sDiv.id = 'img_' + name.split('.')[0];
                sDiv.style.position = 'absolute';
                sDiv.style.top = obj.offsetTop + obj.offsetWidth + 'px';
                sDiv.style.left = obj.offsetLeft +obj.offsetHeight + 'px';
                sDiv.style.border = '1px red solid';
                var img = document.createElement("img");
                img.src = path + name;
                sDiv.appendChild(img);
                document.body.appendChild(sDiv);
            }
            sDiv.style.display = 'block';
        }
        function f(obj) {
            var name = obj.innerText;
            var sDiv = document.getElementById('img_' + name.split('.')[0]);//文件名自己判断
            if (sDiv) {
                sDiv.style.display = 'none';
            }
        }
    </script>
</head>
<body>
<div onmouseover="show(this)" onmouseout="f(this)" style="position:absolute;">
    wait.gif
</div>
</body>
</html>
时间： 2024-09-13 00:55:16

Javascript控制DIV层显示与隐藏两个实例的相关文章

用javascript控制div的显示与隐藏

javascript|控制|显示 <html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><script language="JavaScript" type="text/JavaScript"><!--

javascript控制Div层透明属性由浅变深由深变浅逐渐显示_javascript技巧

搬运的留着以后自己看! 复制下面蓝色的代码保存为html格式的文件,使用网页浏览器浏览效果 代码支持IE6.7.8/firefox/Chrome浏览器 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

如何使js控制DIV层显示隐藏(页面可刷新)时,只能隐藏不能显示,

问题描述 这段代码中,是可以用JS控制cookies隐藏DIV层,并且刷新也可以始终隐藏,但是如何做到当DIV层隐藏后,页面中有显示DIV层的提示我的设想是:当DIV层显示时,选择隐藏,页面刷新依然隐藏(已经做到了)当DIV隐藏后,可以选择显示,页面刷新可以显示DIV层(没做到)也就是用Js控制DIV的显示与隐藏,并存入cookies,直到下一次操作JS依然有效控制<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"&q

javascript实现div的显示和隐藏的小例子

代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>oec2003</title> <script language="JavaScript" type="text/JavaScript"> <!-- fun

javascript实现div的显示和隐藏的小例子_javascript技巧

复制代码 代码如下: <html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>oec2003</title><script language="JavaScript" type="text/JavaScript"><!--func

javascript控制层显示或隐藏的方法_javascript技巧

本文实例讲述了javascript控制层显示或隐藏的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>中国风</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <script language="JavaScript&qu

javascript在一个function里控制loading的显示与隐藏

问题描述 代码如下,不知为何无法执行出loading显示后又隐藏的效果.<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>javascript在一个function里控制loading的显示与隐藏</title><script type="text/javascrip

js html 渐隐渐出-JS 控制div 的显示和慢慢隐藏

问题描述 JS 控制div 的显示和慢慢隐藏 我主要是想实现一个浮动窗体,当触发某种事件后div显示出来(默认为隐藏的),等几秒后又会隐藏,但是当鼠标进入该div后,div又一直显示,离开后才会慢慢隐藏,这该怎么实现呢,有人知道吗?? 我的代码如下:<br> #div1 {<br> width: 200px;<br> height: 200px;<br> border: 1px solid red;<br> font-family: "

jQuery基于toggle实现click触发DIV的显示与隐藏问题分析_jquery

本文实例讲述了jQuery基于toggle实现click触发DIV的显示与隐藏.分享给大家供大家参考,具体如下: 研究了一下toggle之click触发DIV的显示与隐藏,现在把代码发上来. HTML代码: <input type="button" id="btn" title="Click me 你会看到效果" value="点击此处" /> <div id="content" styl