JavaScript基础知识整理（2）

2022-09-19 09:51:35

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：其中所用图片来源于网络。

码农公寓

相关文章