了解 JavaScript (5)– 翻转器(rollover)
用 JavaScript 最常用的效果就是,当用户将鼠标移动到图片上时,会改变网页上的图像,这样页面就能对用户的操作及时作出反应,这种称为 翻转器(rollover)效果很容易实现,而且有很多应用场合。
创建翻转器
翻转器背后的思想很简单。有两个图像,第一个是原始图像,第二个是替换图像,当鼠标移动到第一个图像上时,浏览器快速地替换为第二个图像,就产生了运动或动画效果。
SimpleRollover.html 脚本,这是在链接标签中实现翻转器的最简单方法。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>A Simple Rollover</title> <link rel="stylesheet" href="rollover.css"> </head><body> <a href="next.html" onmouseover="document.images['arrow'].src='images/arrow_on.gif'" onMouseOut="document.images['arrow'].src='images/arrow_off.gif'"><img src="data:images/arrow_off.gif" id="arrow" alt="arrow"> </a> </body> </html>
rollover.css 样式文件,很多例子中将用到该文件。
@charset "utf-8"; /* CSS Document */ body{background-color: #FFF; }img{border-width: 0; }img#arrow, img#arrowImg{width: 147px;height: 82px; }#button1, #button2{width: 113px;height: 33px; }.centered{text-align: center; }#adBanner{width: 400px;height: 75px; }
脚本执行后,效果如下:
创建更有效的翻转器
为了产生动画效果,需要确保替换图像立刻出现,而不能有从服务器获得图像所造成的延迟。为此,使用 JavaScript 预先将所有图像加载到浏览器的缓存中,并且将图像放进脚本使用的变量中。MoreEffectiveRollover.html 页面和 MoreEffectiveRollover.js 脚本文件将演示具体的做法。
MoreEffectiveRollover.html 页面上唯一的 JavaScript 是对外部 MoreEffectiveRollover.js 文件的引用。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>A More Effective Rollover</title> <script src="MoreEffectiveRollover.js"></script> <link rel="stylesheet" href="rollover.css"> </head><body> <a href="next1.html"><img src="data:images/button1_off.gif" alt="button1" id="button1"></a> <a href="next2.html"><img src="data:images/button2_off.gif" alt="button2" id="button2"></a> </body> </html>
这个脚本 MoreEffectiveRollover.js 是比前面更好的实现翻转器的方法,很灵活。
window.onload = rolloverInit;function rolloverInit(){ for(var i=0; i<document.images.length; i++){if(document.images[i].parentNode.tagName == "A"){setupRollover(document.images[i]);}} }function setupRollover(thisImage){thisImage.outImage = new Image();thisImage.outImage.src = thisImage.src;thisImage.onmouseout = function(){this.src = this.outImage.src;}thisImage.overImage = new Image();thisImage.overImage.src = "images/" + thisImage.id + "_on.gif";thisImage.onmouseover = function(){this.src = thisImage.overImage.src;} }
脚本执行后,效果和上面一样,只是动画更加流畅。
构建三状态翻转器
三状态翻转器就是能够显示图像的 3 个版本的翻转器。除了原始图像和当用户鼠标移动到图像上时显示的图像外,还有一个就是按钮本身被单击时的显示。
ThreeStateRollovers.html 页面和上面两状态翻转器相同,而 ThreeStateRollovers.js 脚本只修改几处而已。
window.onload = rolloverInit;function rolloverInit(){for(var i=0; i<document.images.length; i++){if(document.images[i].parentNode.tagName == "A"){setupRollover(document.images[i]);}} }function setupRollover(thisImage){thisImage.outImage = new Image();thisImage.outImage.src = thisImage.src;thisImage.onmouseout = function(){this.src = this.outImage.src;}thisImage.overImage = new Image();thisImage.overImage.src = "images/" + thisImage.id + "_on.gif";thisImage.onmouseover = function(){this.src = this.overImage.src;}//新增加的第3个状态thisImage.clickImage = new Image();thisImage.clickImage.src = "images/" + thisImage.id + "_click.gif";thisImage.onclick = function(){this.src = this.clickImage.src;} }
脚本执行后,单击按钮,显示绿色按钮,效果如下:
由链接触发翻转器
前面的例子,都是将鼠标移动到图像上来触发翻转器的,也可以通过鼠标指向文本链接时让图像翻转。
LinkRollover.html 页面中有一个文本链接。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Link Rollover</title> <script src="LinkRollover.js"></script> <link rel="stylesheet" href="rollover.css"> </head><body> <h1><a href="next.html" id="arrow">Next page</a></h1> <img src="data:images/arrow_off.gif" id="arrowImg" alt="arrow"> </body> </html>
LinkRollover.js 脚本将实现由链接触发的翻转器。
window.onload = rolloverInit;function rolloverInit(){//寻找链接for(var i=0; i<document.links.length; i++){var linkObj = document.links[i];//指向当前链接,判断链接是否有 id 属性,如果有则创建 imgObj 指向 arrowImgif(linkObj.id){var imgObj = document.getElementById(linkObj.id + "Img");if(imgObj){setupRollover(linkObj, imgObj);}}} }function setupRollover(thisLink, thisImage){//imgToChange 存储了链接对应的图像thisLink.imgToChange = thisImage;thisLink.onmouseout = function(){this.imgToChange.src = this.outImage.src;}thisLink.onmouseover = function(){this.imgToChange.src = this.overImage.src;}thisLink.outImage = new Image();thisLink.outImage.src = thisImage.src;thisLink.overImage = new Image();thisLink.overImage.src = "images/" + thisLink.id +"_on.gif"; }
脚本执行后,如下效果:
让多个链接触发一个翻转器
还可以让几个不同的图像触发同一个翻转器。如果需要对多个图像进行说明,这种技术就非常有用。将鼠标移动到其中一个图像上时,就会显示出这个图像的描述。
我们的例子中正好说明这个技术。
MultiLinksSingleRollover.html ,注意这个页面上的链接和图像都有唯一的 id。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Multiple Links, Single Rollover</title> <script src="MultiLinksSingleRollover.js"></script> <link rel="stylesheet" href="MultiLinks.css"> </head><body> <div id="captionDiv"><img src="data:images/DaVinci.jpg" width="144" height="219" alt="DaVinci"><img src="data:images/bg.gif" id="captionField" alt="Text Field"> </div><div id="inventionDiv"><img src="data:images/leoText.gif" id="heading" alt="Leonardo's Inventions"><a href="flyPage.html" class="captionField" id="flyer"><img src="data:images/flyer.gif" width="293" height="165" alt="Flying Machine" id="flyerImg"></a><a href="tankPage.html" class="captionField" id="tank"><img src="data:images/tank.gif" width="325" height="92" alt="Tank" id="tankImg"></a><a href="heliPage.html" class="captionField" id="helicopter"><img src="data:images/helicopter.gif" width="224" height="160" alt="Helicopter" id="helicopterImg"></a> </div> </body> </html>
LinkRollover.css,我们定义在 HTML 中引用的类。
@charset "utf-8"; body{background-color: #EC9; }img{border-width: 0; }#captionDiv{float: right;width: 210px;margin: auto 50px; }#captionField{margin: 20px auto;width: 208px;height: 27px; }#inventionDiv{width: 375px;margin-left: 20px; }#heading{margin-bottom: 20px;width: 375px;height: 26px; }
MultiLinksSingleRollover.js 这个脚本将演示如何使用多个链接触发一个翻转器。
window.onload = rolloverInit;function rolloverInit(){for(var i=0; i<document.links.length; i++){var linkObj = document.links[i];//无法使用翻转图像的 id 计算出改变过图像 id, id 是唯一的,因此使用 classNameif(linkObj.className){var imgObj = document.getElementById(linkObj.className);if(imgObj){setupRollover(linkObj, imgObj);}}} }function setupRollover(thisLink, textImage){thisLink.imgToChange = textImage;thisLink.onmouseout = function(){this.imgToChange.src = this.outImage.src;}thisLink.onmouseover = function(){this.imgToChange.src = this.overImage.src;}thisLink.outImage = new Image();thisLink.outImage.src = textImage.src;thisLink.overImage = new Image();thisLink.overImage.src = "images/" + thisLink.id + "Text.gif"; }
脚本执行后,效果如下:
处理多个翻转器
如果希望触发翻转器的图像本身也是一个翻转器,那么该怎么办呢?我们在上一个示例的基础上进行改进,演示如何添加这个特性。
在将鼠标移动到一个自创图像上时,与前面一样,描述图像会出现,但是现在自创图像本身也会切换为另一个带阴影的图像,这会向用户提供视觉反馈,明确指出鼠标当前指向的元素。
MultiLinksMultiRollovers.html 除了标题和外部引用外,其余与上一个 HTML 页面一样。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Multiple Links, Multiple Rollovers</title> <script src="MultiLinksMultiRollovers.js"></script> <link rel="stylesheet" href="MultiLinks.css"> </head><body> <div id="captionDiv"><img src="data:images/DaVinci.jpg" width="144" height="219" alt="DaVinci"><img src="data:images/bg.gif" id="captionField" alt="Text Field"> </div><div id="inventionDiv"><img src="data:images/leoText.gif" id="heading" alt="Leonardo's Inventions"><a href="flyPage.html" class="captionField" id="flyer"><img src="data:images/flyer.gif" width="293" height="165" alt="Flying Machine" id="flyerImg"></a><a href="tankPage.html" class="captionField" id="tank"><img src="data:images/tank.gif" width="325" height="92" alt="Tank" id="tankImg"></a><a href="heliPage.html" class="captionField" id="helicopter"><img src="data:images/helicopter.gif" width="224" height="160" alt="Helicopter" id="helicopterImg"></a> </div> </body> </html>
MultiLinksMultiRollovers.js 脚本处理多个翻转器。
window.onload = rolloverInit;function rolloverInit(){for(var i=0; i<document.links.length; i++){var linkObj = document.links[i];if(linkObj.className){var imgObj = document.getElementById(linkObj.className);if(imgObj){setupRollover(linkObj, imgObj);}}} }function setupRollover(thisLink, textImage){//因为有更多图像需要处理,每个翻转器两个图像,用到了数组thisLink.imgToChange = new Array;thisLink.overImage = new Array;thisLink.outImage = new Array;//textImage 存储在了 imgToChange[0] 中thisLink.imgToChange[0] = textImage;thisLink.onmouseout = rollOut;thisLink.onmouseover = rollOver;thisLink.outImage[0] = new Image();thisLink.outImage[0].src = textImage.src;thisLink.overImage[0] = new Image();thisLink.overImage[0].src = "images/" +thisLink.id + "Text.gif"; var rolloverObj = document.getElementById(thisLink.id + "Img");if(rolloverObj){//新的 rolloverObj 存储在 imgToChange[1] 中thisLink.imgToChange[1] = rolloverObj;thisLink.outImage[1] = new Image();thisLink.outImage[1].src = rolloverObj.src;thisLink.overImage[1] = new Image();thisLink.overImage[1].src = "images/" + thisLink.id + "_on.gif";} }function rollOver(){for(var i=0; i<this.imgToChange.length; i++){this.imgToChange[i].src = this.overImage[i].src;} }function rollOut(){for(var i=0; i<this.imgToChange.length; i++){this.imgToChange[i].src = this.outImage[i].src;} }
脚本执行后,效果如下:
示例代码下载
rollover.rar
了解 JavaScript (5)– 翻转器(rollover)相关推荐
- Javascript中的翻转器
当用户将鼠标移动到图像上时,改变网页上的图像,从而让页面对用户的操作作出反应.这种称为翻转器,实现起来还是挺容易的,应用于许多场合. 思想很简单.有两个图像.第一个是原始图像,他与网页的其 ...
- JavaScript前世今生
JavaScript历史 大概在1992年,一家称作Nombas的公司开始开发一种叫做C–(C-minus-minus,简称Cmm)的嵌入式脚本语言. Cmm背后的理念很简单:一个足够强大可以替代宏操 ...
- 1,JavaScript前世今生
JavaScript历史 大概在1992年,一家称作Nombas的公司开始开发一种叫做C–(C-minus-minus,简称Cmm)的嵌入式脚本语言. Cmm背后的理念很简单:一个足够强大可以替代宏操 ...
- Javascript 的addEventListener()及attachEvent()区别分析
Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.d ...
- 怎么用javascript进行拖拽(转摘)
本文译自:http://www.webreference.com/programming/javascript/mk/column2/index.html 所有版权归原文所有 由sohotx.com雪 ...
- javascript框架比较(一)
JavaScript 是面向对象的脚本语言,长期以来用作 Web 浏览器应用程序的客户端脚本接口.JavaScript 让 Web 开发人员能以编程方式处理 Web 页面上的对象,并提供了一个能够动态 ...
- javascript 建模_如何用JavaScript编写3D建模应用程序
javascript 建模 介绍 (Introduction) Modeling in Subsurfer is based on cubes, and every model starts as a ...
- dhtml_DHTML乌托邦:使用JavaScript和DOM的现代Web设计
dhtml 动态HTML(简称DHTML)是一组Web开发技术的名称,这些技术主要用于具有非平凡用户输入功能的Web页面. DHTML意味着处理HTML文档的文档对象模型,在样式信息中摆弄CSS指令, ...
- DHTML乌托邦:使用JavaScript和DOM的现代Web设计
动态HTML(简称DHTML)是一组Web开发技术的名称,这些技术主要用于具有非平凡用户输入功能的Web页面. DHTML意味着处理HTML文档的文档对象模型,在样式信息中摆弄CSS指令,并使用客户端 ...
最新文章
- UVALive5379 UVA270 Lining Up
- easyui 消息框按钮文字修改
- bzoj - 2038: [2009国家集训队]小Z的袜子(hose)
- c++ 利用内存映射读取大文件
- html邮箱地址的正则表达式,javascript写一个校验邮箱的正则表达式
- 什么就像谈恋爱一样?
- codeforces:65
- 前端学习(1477):计算属性文档分析
- Redis protected-mode属性解读
- 地磁计HMC5883L
- 微信小程序 input输入事件
- 代码审查工具 rietveld的安装与使用(二)
- cad打开卡死_cad文件不大,打开就卡死不动或打开异常慢的原因分析
- 影响世界的100条管理名言
- 计算机丢失iggy,我似乎已经丢失了什么
- 项目管理知识点-结合Enovia项目管理模块
- Android-Task execution finished ‘signingReport‘
- Mysql组复制(MGR)——监控
- (第二章)OpGL超级宝典学习:创建我们第一个OpenGL程序,绘制一个点和三角形
- 关于”echarts-JSON请求数据”一文读者反映chart无法显示数据的分析
热门文章
- Github Actions
- 7-21 求特殊方程的正整数解 (15 分)
- 统计字符[2] (15 分)
- ir指令、立即数的作用_ARM-汇编指令集(总结)
- 都说.yml 比 .properties好用,你知道为什么嘛
- android 人机界面设计规范,iPhone 人机界面设计规范(中英对照)
- CacheManager操作缓存
- Q1:spring-boot中Controller路径无法被访问的问题
- 《DSP using MATLAB》Problem 6.16
- 【Python学习笔记】Coursera课程《Python Data Structures》 密歇根大学 Charles Severance——Week6 Tuple课堂笔记...