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. Linux 集群

    html,body { } .CodeMirror { height: auto } .CodeMirror-scroll { } .CodeMirror-lines { padding: 4px 0 ...

  2. autolayout

    autolayout.因为之前都是用frame,用代码来做,并且在布局时也很少用storyboard和xib.使得我再这方便经验很欠缺,想用,但是又怕用不好,出现各种意想不到的bug.但是又忽然想到, ...

  3. Gridview实现删除弹出提示信息

    实现方法: 双击GridView的OnRowDataBound事件: 在后台的GridView1_RowDataBound()方法添加代码,最后代码如下所示:       protected void ...

  4. Winform button按钮设置快捷键

    1)Text属性命名时后面&加键名,如:文件(&F) 2)添加一个ContextMenuStrip控件,同时在Items里添加一个项,并为项设置快捷键,把Visible设置为false ...

  5. Google V8编程详解（四）Context

    http://blog.csdn.net/feiyinzilgd/article/details/8266780 上一章,比较略提了下V8的Context.本章将详细的讲解下Context的概念以及用 ...

  6. 21.2 Partitioning Types

    分区类型: range:根据列值得一个给定的范围 list:和range相似,除了分区被选择基于的列被匹配在一个被设定为分离的值 hash 基于列组成的表达式返回的非负值 key  相似hash ,除 ...

  7. Qt中让Qwidget置顶的方法

    一般来是说窗体置顶和取消只要        setWindowFlags(Qt::WindowStaysOnTopHint);        setWindowFlags(Qt::Widget); 要 ...

  8. 清空form表单

    // 真正清空 form 表单中的内容 $("input").not(":button, :submit, :reset, :hidden").val(&quo ...

  9. Android_layout 布局(二)

    昨天学习了layout 布局的线性布局和相对布局. 今天我们学习剩余的三个布局,分别是: 一.帧布局(FrameLayout) 在这个布局中,所有的子元素都不能被指定放置的位置,它们通通放于这块区域的 ...

  10. javascript篇-----函数apply()和call()

    转自:http://www.jb51.net/article/28013.htm 如果没接触过动态语言,以编译型语言的思维方式去理解javaScript将会有种神奇而怪异的感觉,因为意识上往往不可能的 ...