您的位置：首页 > Web前端 > JavaScript

记录我的旅程7之JavaScript Dom学习笔记

2012-07-28 20:26 288 查看

前言:下面我们接着旅程6继续我们的JavaScript Dom征程7。这篇博客我们主要做了几个很实用的小案例来练习一下控制层，使我们能够更加的了解这个知识点，而且这些案例都是网站上面基本用的到，比如当我们单机登录的时候不是跳转页面，而是在本页面上面浮出一个层的登录方式，还有小图片看不清看大图片的效果等等。

控制层的练习

(1) 练习1：点击【登录】按钮，弹出一个显示用户名，密码的层，将用户名，密码等写入一个层中，层默认是隐藏的，点击【登录】超链接以后将层显示出来，如果点击层中的关闭按钮，则隐藏层。

<script type="text/javascript">

function showLogin() {

var loginDiv = document.getElementById("LoginDiv");

loginDiv.style.display = '';

}

function hideLogin() {

var loginDiv = document.getElementById("LoginDiv");

loginDiv.style.display = 'none';

}

</script>

<a href="javascript:showLogin()">登录</a>

<div style="position:absolute; top:220px; left:500px; border-style:solid; border-color:Blue; border-width:thin; display:none" id="LoginDiv">

<img src="../images/close.png" alt="关闭" onclick="hideLogin()" style="float:right" />

<table>

<tr>

<td><label for="username">用户名：</label></td>

<td><input type="text" id="username" /></td>

</tr>

<tr>

<td><label for="password">密 码：</label></td>

<td><input type="text" id="password" /></td>

</tr>

</table>

</div>

(2) 练习2：一副图片，点击小图，弹出一个层再点击的位置显示小图对应的大图，并且显示姓名，身高等信息，点击层中的关闭按钮关闭层。进阶：元素的额外属性，动画效果显示出来。

<script type="text/javascript">

function showDetails() {

var details = document.getElementById("details");

details.style.display = '';

details.style.left = window.event.clientX;

details.style.top = window.event.clientY;

}

function hideDetails() {

var details = document.getElementById("details");

details.style.display = 'none';

}

</script>

<img src="../images/00_01small.jpg" alt="美丽" onmouseover="showDetails()" />

<div style="display:none; position:absolute;" id="details">

<img src="../images/00_01.jpg" alt="美丽大图" /><p>韩迎龙</p><p>Kencery</p>

<p><input type="button" value="关闭" onclick="hideDetails()" /></p>

</div>

2)动态实现这种效果实现的代码如下:

<script type="text/javascript">

var data = { "../images/00_00small.jpg": ["../images/00_00.jpg", "韩迎龙", "180"],

"../images/00_01small.jpg": ["../images/00_01.jpg", "博客园", "170"],

"../images/00_02small.jpg": ["../images/00_02.jpg", "CSDN", "175"]

};

function loadImg() {

for (var smallImgPath in data) {

var smallImg = document.createElement("img");

smallImg.src = smallImgPath;

//setAttribute(string name, string value)：增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。

smallImg.setAttribute("a1", data[smallImgPath][0]);

smallImg.setAttribute("a2", data[smallImgPath][1]);

smallImg.setAttribute("a3", data[smallImgPath][2]);

smallImg.onmouseover = function () {

document.getElementById("detailImg").src = this.getAttribute("a1");

document.getElementById("detailHeight").innerHTML = this.getAttribute("a2");

document.getElementById("detailName").innerHTML = this.getAttribute("a3");

var details = document.getElementById("details");

details.style.top = window.event.clientY;

details.style.left = window.event.clientY;

details.style.display = '';

};

document.body.appendChild(smallImg);

}

}

function hideDetails() {

var details = document.getElementById("details");

details.style.display = 'none';

}

</script>

<body onload="loadImg()">

<div style="position:absolute; display:none;" id="details">

<img id="detailImg" src="" />

<p id="detailHeight"></p><p id="detailName"></p>

<p><input type="button" value="关闭" onclick="hideDetails()" /></p>

</div>

</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航