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. 逻辑运算符&&和&的区别 ||和|的区别

    A:最终结果一样. B:&& 和 || 有短路作用,左边是false ,右边不执行.

  2. 用CMake设置Visual Studio工程中第三方库

    较大的工程文件中一般会调用动态库或者静态库,如果这些库文件是当前工程包含的项目,CMake会自动识别并添加Debug和Release编译时需要的库文件路径和文件名,可以使用命令: Target_Lin ...

  3. 多媒体（2）：WAVE文件格式分析

    目录 多媒体(1):MCI接口编程 多媒体(2):WAVE文件格式分析 多媒体(3):基于WindowsAPI的视频捕捉卡操作 多媒体(4):JPEG图像压缩编码 多媒体(2):WAVE文件格式分析

  4. RabbitMQ 入门指南（Java）

    RabbitMQ是一个受欢迎的消息代理,通常用于应用程序之间或者程序的不同组件之间通过消息来进行集成.本文简单介绍了如何使用 RabbitMQ,假定你已经配置好了rabbitmq服务器. Rabbit ...

  5. IndexedDB参考资料网址

    IndexedDB:浏览器里内置的数据库, Web骇客 http://www.webhek.com/indexeddb/ 前端的数据库:IndexedDB入门(很全面) http://web.jobb ...

  6. php 之跨域上传图片

    因为要将所有上传的图片上传到一台独立的图片服务器上面,js上传时存在跨域问题,网上找到这种,通过php curl方式,将图片重新发送到另外一台服务器上保存,并返回图片路径!这种方式存在一定问题:1,上 ...

  7. Spark+Hadoop问题小结

    1.spark执行./start-all.sh报"WARN Utils: Service 'sparkWorker' could not bind on port 0. Attempting ...

  8. Response.ContentType 详细列表

    不同的ContentType 会影响客户端所看到的效果.默认的ContentType为 text/html 也就是网页格式. 代码如: <% response.ContentType =&quo ...

  9. 经典的Hello World VFP前端调后端C# Webservice

    1.按我设想的三层架构中,VFP是完全可以做为前端UI的,我们可以划分如下三层结构: 图片:三层架构图.jpg[设为封面] [删除] 其实大家看图,都明白大致意思,但是要明白各层数据是怎么流动的,却要 ...

  10. nodejs require

    The rules of where require finds the files can be a little complex, but a simple rule of thumb is th ...