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. Maximo-删除应用程序

    执行如下SQL: delete from maxapps where app='<APPLICATION NAME>';delete from maxpresentation where  ...

  2. Nodejs+Express创建HTTPS服务器

    为了使我的Nodejs服务器提供HTTPS服务,学习了一下如何利用express创建https服务器,现记录如下.(一点一点的积累与掌握吧) 1. Http与Https 介绍 HTTP: 超文本传输协 ...

  3. sea.js 入门

    上个月学了 require.js 现在顺便来学学 sea.js. 对比下这两种的区别,看自己喜欢哪个,就在接下来的项目中去使用它吧. seajs中的所有 JavaScript 模块都遵循 CMD 模块 ...

  4. Python实现插件机制——自动import一个目录下的所有.py文件

    假设有这样一个目录结构: /src          main.py          /plugins                __init__.py                a.py  ...

  5. PHP实现异步调用方法研究

    作者: Laruence 本文地址: http://www.laruence.com/2008/04/14/318.html 转载请注明出处 , ,); curl_setopt_array(, ); ...

  6. (转)IC验证概述

    验证是确保设计和预定的设计期望一致的过程,设计期望通常是通过设计规范来定义的.对于芯片设计,在不同的阶段可以分为:寄存器传输级(RTL)的功能验证.门级的仿真验证.形式验证以及时序验证.我们通常所说的 ...

  7. poj3678 Katu Puzzle 2-SAT

    Katu Puzzle Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6714   Accepted: 2472 Descr ...

  8. ubuntu 安装 git & smartgit

    1. 安装 git # sudo apt-get update# sudo apt-get install git   2. 配置 # git config --global user.name &q ...

  9. VS2010中没有ado.net entity data model实体数据模型这一选项-解决办法

    前提先安装VS2010 SP1包. 解决办法: 1.从VS2010的安装盘目录下面的WCU\EFTools找到ADONETEntityFrameworkTools_chs.msi和ADONETEnti ...

  10. java.util.regex.PatternSyntaxException: Dangling meta character '*' near index 0

    使用repalceAll 方法出现java.util.regex.PatternSyntaxException: Dangling meta character '*' near index 0异常 ...