<!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>
<title></title>
<script type="text/javascript">
function initLogin() {
var divLogin = document.getElementById("divLogin");
divLogin.style.display = "";
}
function closeLogin() {
var divLogin = document.getElementById("divLogin");
divLogin.style.display ="none";
}
</script>
</head>
<body onload="initPhotos();initUL();">
<input type="button" value="登录" onclick="initLogin()"/><br />
<div id="divLogin" style="width:250px;display:none;position:absolute;border-style:solid;border-color:Blue;border-width:2px;color:Black">
<img src="images/cc.jpg" alt="关闭" style="float:right" onclick="closeLogin()" />
<table id="tableLogin">
<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="password" id="password"/></td></tr>
</table>
</div>
<br />
<script type="text/javascript">
function showDetails() {
var details = document.getElementById("details");
details.style.display = "";
}
function closeButton() {
var details = document.getElementById("divDetails");
details.style.display = "none";
}
function initPhotos() {
var data = {
"images/mm_small.jpg": ["images/MM.jpeg", "MM", "175cm"],
"images/00_small.jpg": ["images/00.jpg", "小甜甜", "165cm"],
"images/01_small.jpg": ["images/01.jpg", "小玉玉", "175cm"],
"images/02_small.jpg": ["images/02.jpg", "小猫猫", "185cm"]
};
for (var smallPhotoPath in data) {
var smallImg = document.createElement("img");
smallImg.src = smallPhotoPath;
var detailData = data[smallPhotoPath];
smallImg.setAttribute("imageSrc", detailData[0]);
smallImg.setAttribute("detailHeight", detailData[2]);
smallImg.setAttribute("detailName", detailData[1]);
smallImg.alt = "MM";
smallImg.onmouseover = function () {
document.getElementById("imgID").src = this.getAttribute("imageSrc");
document.getElementById("detailHeight").innerHTML = this.getAttribute("detailHeight");
document.getElementById("detailName").innerHTML = this.getAttribute("detailName");
var divDetails = document.getElementById("divDetails");
divDetails.style.display = "";
}
smallImg.onmouseout = function () {
var divDetails = document.getElementById("divDetails");
// divDetails.style.display = "none";
}
document.body.appendChild(smallImg);
};
}
</script>
<div id="divDetails" style="display:none;">
<img src="" id="imgID" alt="MM" style="width:350px;height:350px"/>
<p id="detailHeight"></p>
<p id="detailName"></p>
<input type="button" onclick="closeButton()" value="关闭"/>
</div>
<script type="text/javascript">
function initUL() {
var ulName = document.getElementById("ulName");
var lis = ulName.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
var li = lis[i];
li.onmouseover = function () {
var ulName = document.getElementById("ulName");
var lis = ulName.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
var li = lis[i];
if (li == this) {
li.style.fontSize = 30;
li.style.background = "red";
} else {
li.style.fontSize = 14;
li.style.background = "white";
}
}
}
}
}
</script>
<ul id="ulName">
<li>我们的</li>
<li>你们的</li>
<li>她们的</li>
<li>他们的</li>
</ul>
<script type="text/javascript">
function searchOnfoucs() {
var searchText = document.getElementById("searchText");
if (searchText.value == "输入搜索关键词") {
searchText.value = "";
searchText.style.color = "Black";
}
}
function searchBlur() {
var searchText = document.getElementById("searchText");
if (searchText.value.length <= 0) {
searchText.value = "输入搜索关键词";
searchText.style.color = "Gray";
}
}
</script>
<input value="输入搜索关键词" onblur="searchBlur()" onfocus="searchOnfoucs()" type="text" id="searchText" style="color:Gray;"/><input type="button" value="开始搜索" onclick=""/><br />
</body>
</html>
分享到：
相关推荐
dom4j 目录的介绍： 1）docs 是文档目录 2）如何查 Dom4j 的文档 3）Dom4j 快速入门 2）lib 目录 ...第三方的解析： jdom 在 dom 基础上进行了封装、 dom4j 又对 jdom 进行了封装。 pull 主要用在 And
文中以高分辨率遥感影像为基础,以甘肃省阿克塞县作为研究区,依据三调正射影像生产规程,系统介绍卫星影像生产流程,着重介绍了基于集群软件快速生产DOM的处理流程和镶嵌、修改影像的快速方法。结果表明,基于影像快速...
NULL 博文链接：https://hotstrong.iteye.com/blog/1032536
测绘资料-CH_T 1015.3-2007《基础地理信息数字产品1：100001：50000生产技术规程第3部分：数字正射影像图(DOM).pdf
三、使用dom4j解析xml文件 5 1. 构建dom4j树 5 2. 获取节点 5 3. 获取属性 6 4. 使用XPath获取节点和属性 6 四、使用dom4j修改xml文件 7 五、常用方法 8 1．Element元素API 8 2. Attribute属性API 8 2. 字符串转化 8...
头歌教学实践平台 Web前端开发基础 JavaScript学习手册十三：HTML DOM——文档元素的操作（一）。源码txt格式。
纯js 实现virtual dom与简易diff算法更新dom,有多重实现方式，第一个是通过生成vd对象，与旧vd对象生成差异对象，然后通过差异对象和旧dom进行对比 ...第三种就是在第二种的基础上直接由新vd更新dom
dom操作一般可以分为三个方面即DOM Core(核心)、HTM-Dom和CSS-DOM。 每一个网页都可以用DOM表示出来，每个DOM都可以看作是一棵DOM树。下面的html页面结构可以构建出一棵DOM树，代码： 代码如下： <!DOCTYPE ...
DOM封装 原始码： : 增 创建新节点 dom.create(`<div><span>chuangjian</span></div>`) 创建弟弟节点(原节点后面新增一个节点) dom.after(node,node2) 创建哥哥节点（原节点前面新增一个节点） dom.before(node,...
本文是基础知识系列的第三篇文章，主要介绍javascript中BOM,DOM的一些心得总结，非常实用，有需要的朋友可以参考下
Dom基础—创建表格 利用js来动态创建表格有两种格式，appendChild()和insertRow、insertCell()。但第一种有可能在IE上有问题，所以推荐使用第二种。 1、insertRow(index)：index从0开始 这个函数将新行添加到index的...
其中包括：第一章 HTML基础 第二章 HTML基础(2).ppt 第三章 CSS样式表_语法规则 第四章 CSS样式表_样式控制 第五章 CSS样式表_盒子模型.ppt 第六章 CSS样式表_页面布局 第七章 Javascript基础语法 第八章 Javascript...
新一代数字摄影测量系统DPGRID作为一个完整的高新系统,实现了从空三到DEM自动生成以及DOM自动生成的过程。...文中主要研究SSK系统空三成果与DPGRID系统的转换对接,在此基础上发挥DPGRID系统的DEM、DOM产品生产的作用。
Java基础笔记， 第一章：编程基础 第二章：数组 第三章：面向对象程序开发 第四章：异常机制 第五章：多线程技术 第六章：常用类API 第七章：集合框架（容器）+其他类对象使用 第八章：IO流 第九章：GUI编程 第十章...
jQuery基础、jQuery操作DOM、事件和动画 4. 表单验证 2.本次目标： 了解JavaScript的作用及组成 掌握JavaScript的基本结构 掌握JavaScript在页面中使用的三种形式 掌握JavaScript的核心语法 会使用工具进行...
第一季c#编程基础 ...第三季widnowForm基础 第四季sql从入门到提高 第五集ADO.Net 第六季HTML 第七季javaScipt 第八季Dom 第九季JQuery 第十季asp.net基础 第十一季asp.net终极 第十二季asp.net高级 第十三集ajax
步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
React开发基础文件下载，包含react.js、react-dom.js、browser.main.js 等相关文件