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 ...
随机推荐
- oracle重装系统后恢复
前提:各种文件都存在 1.将原oracle文件夹app更名为app_old 2.重新安装oracle(路径,实例等最好都一样),配置监听,服务能正常启动,连接进入数据库 3.关掉oracle服务,将新 ...
- The C Programming Language Exercise
1-9 : Write a program to copy its input to its output, replacing each string of one or more blanks b ...
- 实现ApplicationContextAware接口时，获取ApplicationContext为null
将懒加载关闭,@Lazy(false),默认为true import org.springframework.beans.BeansException; import org.springframew ...
- Html注册表单示例
注册表单示例,出自<网页开发手记:Html,CSS,JavaScript实战详解>. <html> <head> <title>注册表单&l ...
- 简单配置webpack自动刷新浏览器
文档地址 http://webpack.github.io/docs/usage.html 首先全局安装webpack(我这里使用的是淘宝的cnpm) cnpm install webpack 检查 ...
- 百度云 + GIT
百度云同步 百度云同步,会将本地的某个文件目录和云端进行同步.如果在本地将这个同步的目录设置为Git的中心服务器,那么本地push到中心服务器的内容也会被同步到云端.其他开发者只要也进行相同的设置,就 ...
- Nginx配置文件说明
在此记录下Nginx服务器nginx.conf的配置文件说明, 部分注释: #运行用户user www-data; #启动进程,通常设置成和cpu的数量相等worker_processes 1 ...
- 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法
这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...
- XML.03-DOM和SAX解析
body,td { font-family: calibri; font-size: 10pt } XML.03-DOM和SAX解析 XML的DOM解析 解析 处理 回写 XML的SAX解析 SAX和 ...
- Java类额应用
基本数据类型包装类 Integer Character 其他的都是将首字母大写; 包装类和基本类型之间的转换: Integer int Integer i = new Integ ...