JavaScript 动态网页实例 —— 图像显示

news2024/11/15 6:58:57

        图像是网页设计中必不可少的内容之一,而图像的显示方式更是关系到网站的第一印象。本章介绍图像的显示,主要包括:图片的随机显示、图像的显示和隐藏、图像的滚动显示、图像的探照灯扫描显示、多幅图像的翻页显示、图像的水纹效果显示、全景图效果显示手电照射效果显示以及雷达扫描效果显示等。在这些显示效果中,应用了很多CSS的内容读者需要对CSS和JavaScript对CSS的处理有一定了解。

图片的随机显示

        本节给出一段图片随机显示的示例代码。页面出现一幅图像,不断刷新页面,则页面中的图像不断变化。

要点

本节代码主要使用了Math对象的random()方法和round()方法,主要功能和用法如下。

  • Math 对象用于进行属性运算。其属性是数学中一些常见的常数值。
  • 在 Math 对象的方法中,除random()外的所有方法都需要一个或几个参数。典型的是三角函数在作为一个参数的值上进行操作,其他参数决定传递的参数中哪一个是最大值或最小值。random()方法没有参数,返回0~1之间的随机浮点数。
  • Math 对象的 foor(n)返回一个小于或等于n的整数。
  • Math.random()方法返回0~1之间的随机浮点数,假如要设计一个掷骰子的游戏,需要生成1~6之间的随机数。如果要生成0和上限之间的随机数,可使用“Math.floor(Mathrandom()*n)”格式,其中n表示上限。
  • 若要生成不同范围的随机数,使用“Math.floor(Math.random()*n)+m”格式,其中m是下限,n是上限。
  • Math 对象的round(n)方法返回n的四舍五入值。
<script language="JavaScript">
<!--
a = 3 //要显示的图片的数量
var pp = Math.random();  //产生一个随机数
var foot = Math.round(pp * (a-1))+1; //由随机数产生要选择的图片的序号
function create() 
{ //自定义3个属性
this.src = ''
this.border = ''
this.alt = ''	
}
b = new Array()
for(var i=1; i<=a; i++)
{
b[i] = new create()
}  //创建3个数组
//分别定义每个图片的相关属性
b[1].src    = "图片的随机显示.1.gif"
b[1].border = "0"
b[1].alt    = ""
b[2].src    = "图片的随机显示.2.gif"
b[2].border = "0"
b[2].alt    = ""
b[3].src    = "图片的随机显示.3.gif"
b[3].border = "0"
b[3].alt    = ""
var pic = "";  //定义一个变量,存储要显示的图片的相关显示属性
pic += '<img width=222 src='+b[foot].src+' border="0"'+' alt='+b[foot].alt+'>';
document.write(pic) //将图片显示出来
//-->
</script>

分析

  • (1)程序首先使用“Math.random()”产生一个随机数,并将其存储在变量pp中,然后,使用“Math.round(pp*(a-1))+1”产生一个1到图片数量之间的随机数,并将其存储在变量 foot 中。
  • (2)函数 create()用于定义图像的3个属性:src、border 和 alt。
  • (3)随后,使用一个for 循环,定义了a个(a为图像个数)数组对象。然后,分别定义每个数组对象的src属性、border属性和alt属性。
  • (4)最后,使用一个 pic 变量将要显示的图像的属性连接起来,并使用document.write()方法将 pic 输出到页面上。

图像显隐

        本节给出一段图像显示和隐藏的示例代码,程序中出现一幅图像,不断刷新页面,页面中的图像不断显隐交替变化。

要点

本节代码主要使用了 setTimeout()方法、clearTimeout()方法、innerHtml属性、length属性和CSS滤镜的alpha属性,主要功能和用法如下。

  • Window对象支持一些设置计时器的方法,用于执行特定函数。这些方法包括setTimeout()和 clearTimeout( )。
  • setTimeout()方法的功能是设置一个超时,以便在将来的某个时间触发某段代码的运行。基本语法是“timerld=setTimeout(要执行的代码,以毫秒为单位的时间);”。其中,“要执行的代码”可以是一个函数,也可以是其他 JavaScript语句;“以毫秒为单位的时间”指代码执行前需要等待的时间,即超时的时间。
  • 可以在超时事件未执行前中止该超时设置,使用Window对象的 clearTimeout()方法来实现。其语法为“clearTimeout(timerld)”。
  • 不管是由构造函数 Amay()创建的数组,还是由数组直接量创建的数组,都有一个特殊的属性 length,用于说明这个数组包含的元素个数。由于数组可能包含未定义的元素所以属性 length 总是比数组最多元素的个数大1.和常规对象的属性不同,数组的 length属性总是自动更新的,以便在给数组添加新元素时能够保持更新。
  • 在JavaScript中,字符串是一组被引号(单引号或双引号)括起来的文本。例如,“varstringl="This is astring";”和“var string2='So am!,;”分别定义了两个字符串 string!和 string2。
  • 还可以使用 length()方法求出字符串的长度。例如对上述已定义的myName 字符串,可用“var strlen=myName.length();”求出其长度,得到的结果为 6。
  • Netscape 6+、Opera 7+以及【E 4+ 都支持非标准的 innerHTML 属性,该属性允许对HTML元素内容的简单读取和修改。
  • 在IE中,还支持innerText、outerText、outerHTML属性,innerText与innerHTML类似,只是用 innerText设置的内容都被作为纯文本处理。因此,不会生成相应的 HTML 元素。outerText与 outerHTML属性,分别和相对的 Inner 属性相似,只是这两个属性还对元素本身进行修改。
  • alpha属性的 opacity 为可选项,用于设置或检索透明渐变的开始透明度。是一个取值范围为0~100的整数值,默认值为0,即完全透明,100为完全不透明。
  • alpha 属性的 finishOpacity 为可选项,用于设置或检索透明渐变的结束透明度。是一个取值范围为0~100的整数值。默认值为0,即完全透明,100为完全不透明。
<script language=javaScript>
<!--

var i_strngth=1
var i_image=0
var imageurl = new Array()
//Ҫϔʾµij·ùͼƬ
imageurl[0] ="图像显隐.1.jpg"
imageurl[1] ="图像显隐.2.jpg"
imageurl[2] ="图像显隐.3.jpg"
function showimage()
{ 
if(document.all) 
{
if (i_strngth <=110) 
{
testimage.innerHTML="<img width=230 height=250 style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>";
i_strngth=i_strngth+10
var timer=setTimeout("showimage()",100)
}
else 
{
clearTimeout(timer)
var timer=setTimeout("hideimage()",1000)
}
}
if(document.layers) 
{
clearTimeout(timer)
document.testimage.document.write("<img width=230 height=250 src="+imageurl[i_image]+" border=0>")
document.close()
i_image++
if (i_image >= imageurl.length) {i_image=0} 
var timer=setTimeout("showimage()",2000)
} 
}
function hideimage() 
{ 
if (i_strngth >=-10) 
{
testimage.innerHTML="<img width=230 height=250 style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>";
i_strngth=i_strngth-10
var timer=setTimeout("hideimage()",100)
} 
else 
{
clearTimeout(timer)
i_image++
if (i_image >= imageurl.length) {i_image=0}
i_strngth=1
var timer=setTimeout("showimage()",500) 
}
}
//-->
</script>

分析

  • (1)程序首先定义了一个名为imageurl的数组,其中存放要显示的图像。读者可根据实际情况进行增、减。
  • (2)函数showimage()的功能用于显示图像。其中,区分正和Netscape 浏览器,在IE中,将要显示图像的相关属性存储在testimage.innerHTML中进行显示输出;在Netscape中,则通过 document.testimage.document.write()方法将图像输出至页面。
  • (3)函数hideimage()的功能用于隐藏图像。将要显示隐藏的相关属性存储在testimage.innerHTML中,通过设置其alpha( )属性来对图像进行隐藏。

图像滚动显示

本节给出一段图像滚动显示的示例代码,页面出现两组图像,两组图像分别沿水平方向和垂直方向滚动显示。

要点

本节代码主要使用了setTimeout()方法、onmouseover事件与onmouseout事件、Math 对象的 foor(n)方法、sin(n)方法、cos(n)方法、ceil(n)方法、random()方法,以及和网页元素坐标位置及尺寸等应用,主要功能和用法如下。

  • Window对象支持一些设置计时器的方法,用于执行特定函数。这些方法包括setTimeout()和 clearTimeout( )。
  • setTimeout()方法的功能是设置一个超时,以便在将来的某个时间触发某段代码的运行。基本语法是“(immerId=setTimeout(要执行的代码,以毫秒为单位的时间);”。其中,“要执行的代码”可以是一个函数,也可以是其他JavaScript语句;“以毫秒为单位的时间”指代码执行前需要等待的时间,即超时时间。
  • 可以在超时事件未执行前中止该超时设置,使用 Window 对象的 clearTimeout()方法来实现。其语法为“clearTimeout(timerld)”。
  • HTML 支持对绝大多数元素进行事件绑定,这些绑定通常作为元素的属性使用,例如onclick与 onouseover,可以使用等号与JavaScript 进行连接。当与之绑定的对象有事件发生时,就会执行相应的JavaScript代码。
  • onmouseover 事件,当鼠标移动过某个元素时被触发。可应用于大部分可显示元素,在正中还有<applet>、<font>,在Netscape Navigator 中还有<ilayer>、<layer>。
  • onmouseout事件,当鼠标移开某个元素(鼠标已不在元素上方)时被触发。可应用于大部分可显示元素,在E中还有<applet>、<font>,在Netscape Navigator 中还有<ilayer>、<layer>。
  • Math 对象用于进行属性运算。其属性是数学中一些常见的常数值。在Math 对象的方法中,除了 random()之外的所有方法都需要一个或几个参数。典型的是三角函数在作为一个参数的值上进行操作,其他参数决定传递的参数中哪一个是最大值或最小值。
  • Math.ceil(n)方法用于求大于或等于n的整数,参数n指定要进行运算的数值。与其对应的方法是 Math.floor(n)。
  • Math.random()方法返回0~1之间的随机浮点数,假如要设计一个掷骰子的游戏,需要生成1~6之间的随机数。如果要生成0和上限之间的随机数,可使用“Math.floor(Math.random()*n)”格式,其中n表示上限。
  • 若要生成不同范围的随机数,使用“Math.floor(Math.random()*n)+m”格式,其中m是下限,n是上限。
  • Math.sin(n)方法和 Math.cos(n)方法用于产生n的正弦值和余弦值。其中的参数n为弧度值。
  • DOM 提供了各种类型的元素对象定位及尺寸属性,这些属性基本上只用于读取,而不可进行设置,使用时的语法规则是“网页元素对象.DOM属性名”。其中,属性名中包含“client”的宽度和高度表示真正能够显示网页内容的区域;属性名中包含“ofset”的宽度和高度表示包括了元素对象边线在内的所有区域;属性名中包含“scroll”的宽度和高度表示包含所有全部网页内容的区域。
<script type='text/java

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1801204.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

揭秘800G以太网——简介

什么是800G以太网&#xff1f; 800G以太网是一种高带宽以太网标准&#xff0c;每秒可传输800 Gbps&#xff08;千兆位每秒&#xff09;的数据速率。它代表了以太网技术的又一进步&#xff0c;旨在满足不断增长的数据传输需求以及处理大量数据的能力。因此&#xff0c;800G以太…

杰理AC632N提升edr的hid传输速率, 安卓绝对坐标触摸点被识别成鼠标的修改方法

第一个问题: 首先修改edr的hid传输速率.修改你的板级配置,里面的一个地方给注释掉了,请打开那个注释就能提升edr的hid传输效率了 第二个问题: 修改632n系别把触摸板的hid报告描述符识别成鼠标点,修改如下: 注释掉上面的pnp,改成下面的

RocketMQ的安装

首先到RocketMQ官网下载页面下载 | RocketMQ (apache.org)&#xff0c;本机解压缩&#xff0c;作者在这里用的是最新的5.2.0版本。按照如下步骤安装。 1、环境变量配置rocket mq地址 ROCKETMQ_HOME D:\rocketmq-all-5.2.0-bin-release 在变量path中添加”%ROCKETMQ_HOME%\bi…

04 架构核心技术之分布式消息队列

本课时的主题是分布式消息队列&#xff0c;分布式消息队列的知识结构如下图。 本课时主要介绍以下内容。 同步架构和异步架构的区别。异步架构的主要组成部分&#xff1a;消息生产者、消息消费者、分布式消息队列。异步架构的两种主要模型&#xff1a;点对点模型和发布订阅模型…

RandomDate(接口参数化-随机生成日期)

目录 1、入口位置&#xff1a;2、验证函数生成值3、获取 年月日时分秒 的全随机4、时间函数 前言&#xff1a;有时候我们做性能测试或者接口测试时&#xff0c;参数需要传入日期格式&#xff0c;但是又不想每次都是用同一个日期&#xff0c;我们就可以使用Jmeter工具中函数助手…

[MQTT]服务器EMQX搭建SSL/TLS连接过程(wss://)

&#x1f449;原文阅读 &#x1f4a1;章前提示 本文采用8084端口进行连接&#xff0c;是EMQX 默认提供了四个常用的监听器之一&#xff0c;如果需要添加其他类型的监听器&#xff0c;可参考官方文档&#x1f517;管理 | EMQX 文档。 本文使用自签名CA&#xff0c;需要提前在L…

三次谐波式发电机定子单相接地保护Simulink仿真

在用于接地保护的发电机定子回路的仿真模型的基础上增加三次谐波电动势,得到用于仿真三次谐波式接地保护的发电机定子回路的Simulink仿真模型,如图1所示。 图 1发电机定子回路的Simulink仿真模型 发电机端和中性点侧的三次谐波电压的获取采用如图2所示的方法。 图 2 …

校园生活服务平台的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;管理员管理&#xff0c;用户管理&#xff0c;跑腿管理&#xff0c;文娱活动管理&#xff0c;活动申请管理&#xff0c;备忘录管理 前台账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff…

使用wheelnav.js构建酷炫的动态导航菜单

目录 前言 一、WheelNav是什么 1、项目地址 2、关于开源协议 3、相关目录介绍 二、如何使用wheelnav.js 1、新建html页面 2、设置style样式 3、创建展示元素实现动态导航 三、参数即方法介绍 1、参数列表 2、运行方法 3、实际成果 四、总结 前言 用户体验永远是一…

数据结构和算法一轮

前言 本文参考《2025年数据结构考研复习指导&#xff08;王道论坛组编&#xff09;》和相关文章&#xff0c;为考试前复习而写。 目录 前言 第一章线性表 1.1顺序表 1.2单链表 1.3循环链表 ​1.4双向链表 第二章栈和队列 2.1栈 2.2共享栈 2.3链栈 2.4队列 2.5循环…

大学生创新与创业搜题软件?推荐7个搜题软件和学习工具 #媒体#知识分享

随着大学课程的增多和知识的不断积累&#xff0c;大学生们常常面临着繁重的作业和复杂的题目。为了解决这一问题&#xff0c;许多大学生搜题软件应运而生。 1.彩虹搜题 这个是公众号 个性化推荐功能&#xff0c;精准满足需求。更高效地获取你想要的答案。 下方附上一些测试的…

项目质量保证措施(Word原件)

一、 质量保障措施 二、 项目质量管理保障措施 &#xff08;一&#xff09; 资深的质量经理与质保组 &#xff08;二&#xff09; 全程参与的质量经理 &#xff08;三&#xff09; 合理的质量控制流程 1&#xff0e; 质量管理规范&#xff1a; 2&#xff0e; 加强协调管理&…

高通CSIPHY combo mode介绍

目录 使用MIPI Switch 使用高通平台CSIPHY的Combo Mode YYYY使用Combo Mode电路图如下: 如何设置combo PHY mode CSIInfo configuration when camera works in normal mode 平台SoC一般都有多个CSIPHY以满足当前手机相机设计多摄的情况,但是一款SoC CSIPHY的个数也是一定…

Nested KVM Hypervisor Support

​​​​​​​Description Nested KVM是指基于虚拟化技术的虚拟机管理系统。 Nested KVM在Intel处理器上&#xff0c;KVM使用Intel的vmx&#xff08;virtualmachine eXtensions&#xff09;来提高虚拟机性能&#xff0c;即硬件辅助虚拟化技术。如果一台虚拟机能够和物理机一…

从VS Code源码看清晰代码之美

VS Code的产品做的很优秀&#xff0c;其源码也质量颇高&#xff0c;清晰、整洁、富有美感。 下面是 src\vs\workbench\common\notifications.ts 文件中的两段代码&#xff0c;大家感受一下&#xff1a; get sticky(): boolean {if (this._sticky) {return true; // explicitl…

【开源】课程智能组卷系统 SSM+JSP+MySQL

目录 一、项目介绍 学生模块 老师模块 试卷模块 试题模块 考试模块 二、项目界面 三、核心代码 一、项目介绍 经典老框架SSM打造入门项目《课程智能组卷系统》,可以给管理员们、学生、教师使用&#xff0c;包括学生模块、老师模块、试卷模块、试题模块、考试模块、公告…

深入理解并应用KTT求解约束性极值问题

KT 很简单&#xff0c;口诀记心端&#xff0c;等式求最优&#xff0c;不等式验证——小飞打油 以后每期尝试编一句口诀&#xff0c;帮助大家记忆&#xff0c;可以是打油诗&#xff0c;也可以是类似“奇变偶不变&#xff0c;符号看象限”的口诀&#xff0c;如果编的不好&#xf…

C51学习归纳7 --- LED点阵显示静态图片和动画

今天学习一个非常常用的功能。外面的流动字母的LED大屏大家应该很常见吧。今天&#xff01;学完这个&#xff0c;你就可以自己设计一个LED大屏了&#xff01; 一、开发板原理图 首先我们看点阵屏幕的输入信号&#xff0c;有P0_X和DP_X控制。P0_X直接就是芯片的P0输出端口&…

离散数学---树

目录 1.基本概念及其相关运用 2.生成树 3.有向树 4.最优树 5.前缀码 1.基本概念及其相关运用 &#xff08;1&#xff09;无向树&#xff1a;连通而且没有回路的无向图就是无向树&#xff1b; 森林就是有多个连通分支&#xff0c;每个连通分支都是树的无连通的无向图&…

【CVE-2024-4577】PHP CGI 远程代码执行漏洞

# 转载 本文出自&#xff1a;【CVE-2024-4577】PHP CGI 远程代码执行漏洞 - 极核GetShell (get-shell.com) # 漏洞描述 PHP 语言在设计时忽略Windows 作业系统内部对字元编码转换的Best-Fit特性&#xff0c;导致未认证的攻击者可透过特定的字元序列绕过旧有CVE-2012-1823的保…