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）的更多相关文章

  1. JavaScript基础知识整理

    只整理基础知识中关键技术,旨在系统性的学习和备忘. 1.在 JScript 中 null 和 undefined 的主要区别是 null 的操作象数字 0,而 undefined 的操作象特殊值NaN ...

  2. Javascript 基础知识整理

    Javascript的作用 表单验证,减轻服务器压力 添加页面动画效果 动态更改页面内容 Ajax网络请求(异步加载数据) -它属于前端的核心,主要用来控制和重新调整DOM,通过修改DOM结构,从而达 ...

  3. JavaScript基础知识整理（1）

    粗略理解,努力入门中 1.在html中引入外部脚本:  <script src="filename.js"></script> 2.注释:  多于一行的长注 ...

  4. JavaScript基础知识整理（1）数组

    第一:创建. 1,var arr= new Array(); //数组为空.长度为0. arr[0]="apple"; arr[1]="orange"; arr ...

  5. javascript基础知识整理（不定时更新）

    1.js中真与假的定义: 真:true,非零数字,非空字符串,非空对象 假:false,数字零,空字符串,空对象(null),undefined 2.使用for循环对json进行循环操作 for(va ...

  6. Kali Linux渗透基础知识整理（二）漏洞扫描

    Kali Linux渗透基础知识整理系列文章回顾 漏洞扫描 网络流量 Nmap Hping3 Nessus whatweb DirBuster joomscan WPScan 网络流量 网络流量就是网 ...

  7. Javascript基础知识总结一

    Javascript基础知识总结一 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

  8. Kali Linux渗透基础知识整理（四）：维持访问

    Kali Linux渗透基础知识整理系列文章回顾 维持访问 在获得了目标系统的访问权之后,攻击者需要进一步维持这一访问权限.使用木马程序.后门程序和rootkit来达到这一目的.维持访问是一种艺术形式 ...

  9. 学习javascript基础知识系列第二节 - this用法

    通过一段代码学习javascript基础知识系列 第二节 - this用法 this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象.但是在javascr ...

随机推荐

  1. android开发--数据库（更新或者降低版本）

    Andoird的SQLiteOpenHelper类中有一个onUpgrade方法. 1. 帮助文档里说的"数据库升级"是指什么? 你开发了一个应用,当前是1.0版本.该程序用到了数 ...

  2. java学习第15天（Linklist Vector）

    根据集合的分类(上一天有说),首先接触的是ArrayList但是和Collection一样,他没有什么特殊的功能,直接跳过,然后是Vector. 一   Vector A:有特有功能 a:添加 pub ...

  3. IE8下服务端获取客户端文件的路径为C：/fakePath问题的解决方案

    上一篇文章上提到,IE8下服务端获取客户端文件的路径时,会变成C:/fakePath问题,于是乎通过文件路径去获得文件大小就失败了. 上网搜了一下,主要原因是IE8因为安全考虑,在上传文件时屏蔽了真实 ...

  4. JQuery 插件之Ajax Autocomplete（ajax自动完成）搜索引擎自动显示下拉框

    平时用百度,谷歌搜索的时候 会有一个下 拉列表进行提示 这是一个非常好的功能 本文要介绍的这个JQuery 插件 名叫Ajax Autocomplete 顾名思义 ajax 也就是用ajax的方式获取 ...

  5. teeChart 修改注册表实现无试用到期提示

    teechart在注册表的跟目录为HKEY_CLASSES_ROOT\CLSID,以下的子目录会根据版本的不同发生改变,但是最底级的目录是TypeLib(例如[HKEY_CLASSES_ROOT\CL ...

  6. tp框架总结（四）

    一 ajax的返回 调用实例: $this->ajaxReturn(返回数据,提示信息,操作状态); $this->ajaxReturn(返回数据,‘json’); js: <scr ...

  7. python反射原理

    1.反射原理 通过字符串的形式导入模块: __import__(),可以以字符串的形式导入模块. 通过字符串的形式导入函数: 反射: 根据字符串去某个对象里面取东西,可以是字符串,函数,数字. 根据字 ...

  8. VS使用过程中，编写JS没有智能提示解决方法

    问题:编写基本Script代码没有问题,但是在编写DOM代码时候没有智能提示.也就是在编写一般javascript代码时候没有问题,但是要写DOM代码的时候发现没有智能提示,如document等都需要 ...

  9. python第二天-linux权限管理

    (1)linux登陆密码忘了,怎么办? 把系统重启,在进入系统之前不断的按键盘左上角的"Esc"键会进入这样一个画面,按键盘上的e进入编辑. 进入这个画面以后,通过键盘的上下方向键 ...

  10. 深入理解js——作用域和上下文环境

    如图除全局作用域外,每个函数都会创建自己的作用域.作用域在函数定义时就确定了,而不是在函数调用时确定. 下面按照程序执行的步骤加上上下文环境. 第一步:程序加载时已经确定全局上下文环境,并随着程序的执 ...