CSS--CSS与JavaScript的结合

桃扇骨 2021-09-27 05:30 334阅读 0赞

# 前言 #

CSS与JavaScript的结合是非常紧密的，所以在这方面我们需要好好的学习，接下来我将用一个例子来介绍CSS如何和JavaScript结合使用的。

# 内容 #

图片淡入淡出效果

<html>
    <head>
    <title>图片淡入淡出</title>
    <style type="text/css">  </style>
       </head>
    <body>
    <script language="javascript"> function img1(x){ // 获取数组记录数 this.length=x; } //申明数组并给数组元素赋值，也就是把图片的相对路径保存起来 //若是图片较多，可增加数组元素的个数， //在这个例子中用了五张图片，所以数组元素个数为“5"。 iname=new img1(5); iname[0]="photo/01.jpg"; iname[1]="photo/02.jpg"; iname[2]="photo/03.jpg"; iname[3]="photo/04.jpg"; iname[4]="photo/05.jpg"; var i=0; function play1(){ // 演示变换效果 if (i==4){ i=0; } //当进行到iname[4]时，返回iname[0] else{ i++; } tp1.filters[0].apply(); //tp为图像的name，在<img>标记中定义 tp1.src=iname[i]; tp1.filters[0].play(); mytimeout=setTimeout("play1()",4000); //设置演示时间，这里是以毫秒为单位的，所以“4000 ”是指每张图片的演示时间是4秒 //这个时间值要大于滤镜中设置的转换时间值，这样当转换结束后还能停留一段时间，看清楚图片。 } </script>
    <p><img src="photo/04.jpg" name="tp1"></p>
    <script language="javascript">//play1();</script>
    </body>

# 总结 #

例子在这，大部分内容已经在注释中介绍了，所以如果不懂的话多看几篇，或者自己敲一下，立马就能明白。

# end #

谢谢您的阅读！

发表评论取消回复

表情：

评论列表（有 0 条评论，334人围观）

还没有评论，来说两句吧...

相关阅读

相关【Java 进阶篇】JavaScript 与 HTML 的结合方式

![在这里插入图片描述][ee6246a97e76456ea2a96231b3fde401.png] JavaScript是一种广泛应用于Web开发中的脚本语言，它与HTML

我不是女神ヾ/ 2024年02月23日 08:17/ 0 赞/ 59 阅读

相关 JavaScript与编程：创造力的奇妙结合！

JavaScript是一种广泛应用于网页开发的脚本语言，而编程则是一种通过编写代码来实现特定任务的技能。它们之间存在着密切的联系，可以说JavaScript是编程的一部分。本文

柔情只为你懂/ 2023年10月16日 17:22/ 0 赞/ 17 阅读

相关 JSoup与代理IP的结合

Java 的jsoup 是标准的HTML解析器，可采集指定的网页网站数据。通过简洁易用的API，调用DOM、CSS实现jQuery的操作提取特定的数据。jsoup 的

小灰灰/ 2022年11月21日 01:25/ 0 赞/ 274 阅读

相关反射与工厂模式的结合

1.先说说为什么这两个东西会在一起先看一个简单的工厂模式这是一个通过字符串的形式判断该输出什么九九乘法表的 public class NineFacto

柔情只为你懂/ 2022年11月07日 13:29/ 0 赞/ 144 阅读

相关 django 与 vue 的完美结合

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 最近接到一个任务，就是用django后端，前段用vue，

深碍√TFBOYSˉ_/ 2022年10月02日 00:38/ 0 赞/ 202 阅读

相关 fragment与viewPager的结合

通过fragment与viewPager实现如下的效果（可以手指滑动切换界面，也可以点击按钮切换界面）： ![这里写图片描述][20160303233024944] 1、

ゝ一世哀愁。/ 2022年08月20日 15:11/ 0 赞/ 194 阅读

相关 Spark与mongodb的结合

Mongodb > Mongodb的安装 > 实验环境：ubuntu16.04 安装：suso apt-get install mongodb 查看

旧城等待，/ 2022年06月02日 05:56/ 0 赞/ 173 阅读

相关 JavaScript与HTML的结合方法详解

这篇文章主要介绍了JavaScript与HTML的结合方法，利用实例向大家介绍JavaScript与HTML是如何结合的，内容很详细，感兴趣的小伙伴们可以参考一下 HTML中

╰+哭是因爲堅強的太久メ/ 2022年05月22日 01:58/ 0 赞/ 226 阅读

相关 CSS--CSS与JavaScript的结合

前言 CSS与JavaScript的结合是非常紧密的，所以在这方面我们需要好好的学习，接下来我将用一个例子来介绍CSS如何和JavaScript结合使用的。内容

桃扇骨/ 2021年09月27日 05:30/ 0 赞/ 335 阅读

相关枚举与Lambda的结合

枚举与Lambda的结合实现可读性良好的策略模式 > 枚举类： > 1.枚举类很安全，不能被实例化对象，甚至用反射都无法创建对象； > 2.可以使用name()

傷城~/ 2021年09月16日 13:24/ 0 赞/ 386 阅读