JavaScript基础知识整理（2）
15、处理图像
注意：（1）在写js文件时，尽量将函数的声明往后写，将函数调用写在前面，这样能够使代码结构很清晰。
（2）一个网页中翻转器一般超过3个，所以使用for循环减少重复使用翻转器代码的次数。
由于还在学习中，JavaScript部分和所用书籍《JavaScript基础教程》中的代码非常相似，所以不粘贴JavaScript代码，只进行简单的描述：
（1） 定义一个函数，此函数有两个参数，一个是链接，一个是图像，此函数能够实现的功能：当鼠标移到链接上时，图片发生相应的变化。
给链接参数添加onmouseover方法，该方法用于当鼠标在链接上方时，改变图像的路径。
链接的class名称和图像的id名相同，链接和图像通过getElementById(theLink.className)联系起来。
链接的id名与对应图像的名称相同，将包含theLink.id的路径赋值给需要改变的图像的src达到显示不同图片的效果。
（2） 定义当前链接和要使其发生变化的图像这两个变量，以这两个变量为实参，调用1中函数。
一开始我直接在Chrome中点击F12进行检错，在Console部分看见报错为：js文件的第13行出了一个错误：意外的记号{
但是仔细查看代码后发现所有的{ 都是成双成对的，搞不懂它为什么错了。于是我准备下载一个比较好的代码分析工具JSHint。
在使用JSHint前必须先安装好Node.js,
Node.js安装步骤：http://jingyan.baidu.com/article/b0b63dbfca599a4a483070a5.html#!/home/homepage
JSHint配置：http://m.jb51.net/article/50453.htm
使用JSHint检查出来的错误为：
显示imgObj这个变量使用超出了范围，以及缺少分号这两种错误。
仔细检查该部分内容后发现是在使用另一个变量时把该变量的名称打错了，解决了“imgObj变量的使用超出了范围”这个问题；
又仔细检查后发现在定义函数的部分忘了写上 function ，解决了“缺少分号”的问题。
（在使用cd该变路径的过程中，老是出现文件名、目录名或卷标语法不正确这样的报错，我把路径中的文件全部改成了英语单词，也把各个盘的卷标全改成了英语单词，但是还是没用，只好就在C盘里的建好的App文件里使用JSHint检查.js文件，无错之后再粘贴到别处。）
最终的效果如下：
当鼠标在链接上方时，会显示对应的图片。
html代码：
<!DOCTYPE html>
<head>
<script src="rollover.js"></script>
<link rel="stylesheet" href="rollover.css">
</head>
<body>
<ul>
<li><a href="wind.html" class="image" id="wind">风<a></li>
<li><a href="rain.html" class="image" id="rain">雨<a></li>
<li><a href="fearl.html" class="image" id="fearl">无<a></li>
<li><a href="difficu.html" class="image" id="difficu">阻<a></li>
</ul>
<img src="data:images/default.png" id="image" alt="风雨无阻">
</body>
</html>
CSS代码：
body{
margin:0 auto;
margin-top:60px;
width:1006px;
height:600px;
}
ul{
position:absolute;
z-index:;
float:left;
list-style:none;
padding-top:150px;
}
.img{
position:absolute;
z-index:;
float:left;
}
a{
text-decoration:none;
font-size:30px;
}
a:hover{
color:white;
}
ps：其中所用图片来源于网络。
JavaScript基础知识整理（2）的更多相关文章
- JavaScript基础知识整理
只整理基础知识中关键技术,旨在系统性的学习和备忘. 1.在 JScript 中 null 和 undefined 的主要区别是 null 的操作象数字 0,而 undefined 的操作象特殊值NaN ...
- Javascript 基础知识整理
Javascript的作用 表单验证,减轻服务器压力 添加页面动画效果 动态更改页面内容 Ajax网络请求(异步加载数据) -它属于前端的核心,主要用来控制和重新调整DOM,通过修改DOM结构,从而达 ...
- JavaScript基础知识整理（1）
粗略理解,努力入门中 1.在html中引入外部脚本: <script src="filename.js"></script> 2.注释: 多于一行的长注 ...
- JavaScript基础知识整理（1）数组
第一:创建. 1,var arr= new Array(); //数组为空.长度为0. arr[0]="apple"; arr[1]="orange"; arr ...
- javascript基础知识整理（不定时更新）
1.js中真与假的定义: 真:true,非零数字,非空字符串,非空对象 假:false,数字零,空字符串,空对象(null),undefined 2.使用for循环对json进行循环操作 for(va ...
- Kali Linux渗透基础知识整理（二）漏洞扫描
Kali Linux渗透基础知识整理系列文章回顾 漏洞扫描 网络流量 Nmap Hping3 Nessus whatweb DirBuster joomscan WPScan 网络流量 网络流量就是网 ...
- Javascript基础知识总结一
Javascript基础知识总结一 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...
- Kali Linux渗透基础知识整理（四）：维持访问
Kali Linux渗透基础知识整理系列文章回顾 维持访问 在获得了目标系统的访问权之后,攻击者需要进一步维持这一访问权限.使用木马程序.后门程序和rootkit来达到这一目的.维持访问是一种艺术形式 ...
- 学习javascript基础知识系列第二节 - this用法
通过一段代码学习javascript基础知识系列 第二节 - this用法 this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象.但是在javascr ...
随机推荐
- Python学习二(生成器和八皇后算法)
看书看到迭代器和生成器了,一般的使用是没什么问题的,不过很多时候并不能用的很习惯 书中例举了经典的八皇后问题,作为一个程序员怎么能够放过做题的机会呢,于是乎先自己来一遍,于是有了下面这个ugly的代码 ...
- RabbitMQ学习: 介绍
1. 介绍 RabbitMQ是一个由erlang开发的基于AMQP(Advanced Message Queue )协议的开源实现.用于在分布式系统中存储转发消息,在易用性.扩展性.高可用性等方面都非 ...
- vs2012安装Microsoft.AspNet.WebApi.WebHost
工具---库程序包管理器---程序包管理器控制台:输入下面命令: Install-Package Microsoft.AspNet.WebApi.WebHost
- caj转pdf
1,准备工具 福昕阅读器 CAJViewer 2: CAJViewer打开caj文件,选项打印,选择福昕阅读器打印机,开始. 3:等待结束即可 提示:打印时间可能会稍长 请勿乱操作
- XML.03-DOM和SAX解析
body,td { font-family: calibri; font-size: 10pt } XML.03-DOM和SAX解析 XML的DOM解析 解析 处理 回写 XML的SAX解析 SAX和 ...
- 自动备份SQL数据库 并删除指定日期之前的备份文件
/// <summary> /// 数据备份 /// </summary> /// public bool DataBackup(st ...
- 实现android手机来电拦截系统页面弹出自定义页面特效
如何实现android手机来电拦截系统页面弹出自定义页面特效, 首先: 我们需要注册一个监听来电的广播PhoneStateReceiver 类:其次: 在onReceive里面我们获取an ...
- GIT GUI的使用
http://blog.csdn.net/fym0512/article/details/7713006
- robot framework 安装配置
robot framework 是一款专门用作自动化测试的框架,提供了丰富的内置库,与第三方库,也支持用户自己编写的库,robot framework +library 可以 用来做ui的自动化测试, ...
- c++ 成员函数
#include <iostream> #include "Sales_item.h" int main() { Sales_item item1, item2; st ...