图片百页窗（JS特效）

最新推荐文章于 2023-03-17 09:27:49 发布
最新推荐文章于 2023-03-17 09:27:49 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： javascript 文章标签： function javascript transition generator html filter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhihua_1983/article/details/1720480
版权
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
 
<script language=Javascript>
var tupian=new Array();
var adNum=0;
var imgID;

 

tupian[0]="http://wps.kingsoft.com/cte/images1/hylng.jpg";
tupian[1]="http://wps.kingsoft.com/cte/images1/quanjingg.jpg";
tupian[2]="http://wps.kingsoft.com/cte/images1/gkg.jpg";
tupian[3]="http://wps.kingsoft.com/cte/images1/twg.jpg";


var currentimage=new Array();
for (i=1;i<=4;i++)
{
 currentimage[i]=new Image();
    currentimage[i].src=tupian[i];
}
function setCo()
{
 if (document.all)
 {
 $(imgID).filters.revealTrans.Transition=Math.floor(Math.random()*23);
 $(imgID).filters.revealTrans.apply();
 }
}
function playCo()
{
 if (document.all)
 $(imgID).filters.revealTrans.play()
}
function nextAd(img)
{
 imgID=img;
 if(adNum<tupian.length-1)adNum++ ;

 else adNum=0;
 setCo();
 $(imgID).src=tupian[adNum];
 playCo();
 theTimer=setTimeout("nextAd('"+img+"')", 3000);
}

function $(id){
 return document.getElementById(id);
}
</script>

 

</HEAD>

<BODY>
<img id="tmgTag" style="FILTER:revealTrans(duration=2,transition=20)" src="javascript:nextAd('tmgTag')">
</BODY>
</HTML>


 
zhihua_1983
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS+Html百页窗特效
10-27
四种不同样式的百叶窗，原生js,酷炫的效果.
JavaScript83
zhang_zchao的专栏
11-05 574
 var idcard,Y,JYM;    var S,M;    var idcard_array = new Array();    idcard_array = idcard.split("");    //地区检验    if(area[parseInt(idcard.substr(0,2))]==null) {        alert(Errors[4]);        return
.ascx文件中使用js
weixin_34413802的博客
11-04 325
.ascx使用js，由于.ascx没有form，所以在使用的时候有点麻烦，我在实验过几次之后，发现使用包含.ascx的.aspx中的form的name就可以，比如有一个test.aspx的form.name=frtest,包括了test.ascx，在test.ascx里面使用document.frtest.就可以了，如果是很多框架的话就使用document.all...
关于选用DOCTYPE及DOCTYPE对页面css及js的影响
03-22 854
 什么是DOCTYPE    DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。    要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非
JS实现百叶窗特效
ztK63LrD的博客
07-29 1025
JS实现百叶窗特效
js百叶窗图片3D旋转切换js特效
ICode联盟
03-17 255
原生js制作的百叶窗图片3D旋转切换特效，一款非常酷炫的网站焦点图banner轮播效果。
React图片百叶窗切换特效
06-24
React作为一个流行的JavaScript库，被广泛应用于构建动态且交互性强的Web应用，而百叶窗切换特效则能为你的旅游城市景点图片展示增添独特魅力。 首先，我们需要理解百叶窗切换特效的基本原理。这种效果通常通过分割...
CSS3图片百叶窗切换动画代码特效
06-09
总的来说，“CSS3图片百叶窗切换动画代码特效”是一个综合运用了CSS3动画、变换、伪类选择器和JavaScript的实例，它展示了如何通过这些技术创造出富有创意的交互效果。通过学习和理解这个案例，开发者可以进一步提升...
js百叶窗图片旋转切换特效代码
03-20
总的来说，这个js百叶窗图片旋转切换特效代码为开发者提供了一种创新的图片展示方式，通过JavaScript和CSS3的结合，实现了视觉上的动态交互，增强了用户体验。学习和掌握这种技术，不仅可以提升网页的美观度，也有助...
jQuery上下滑动图片百叶窗切换特效.zip
最新发布
10-05
《jQuery上下滑动图片百叶窗切换特效》 在网页设计中，动态效果常常能提升用户体验，其中，图片切换特效尤为常见。"jQuery上下滑动图片百叶窗切换特效"是一种创新且引人注目的技术，它利用jQuery库、CSS样式和...
JavaScript图片上传前预览和限制图片格式
MaoMao_1983的专栏
01-18 2460
JavaScript图片上传前预览和限制图片格式关键词： 上传图片    预览图片    网页开发    按比例缩小图片尺寸                                           这是一则PHP图片上传的例子，这里想说明的是在上传图片前，当用户从本地或是远程选择图片时能够预览图片，由于上传的图片有大有小，宽窄不一，上传后我们都将对图片进行裁减处理，但是在上
JavaScript实现关闭窗口前提示信息
MaoMao_1983的专栏
07-13 2391
function   IsClose()      {      if(confirm("是否退出系统?"))      {      return true;      }      return  false;      }      -------------------------------------------------------- function winclose
表单提交中form.action,form.submit()问题
MaoMao_1983的专栏
07-30 1834
 表单提交中form.action,form.submit()问题 这两天做列表数据显示的时候，几乎被"对象不支持此属性和方法" 的错误提示搞疯掉了，两个完全一样的程序（事后才知道有个单词的大小写不一样），竟然一个显示正常，一个却频繁提示出错。在一般情况下，同一个表单只能被提交给同一个地址。但在实际web应用中，我们希望同一个表单可以根据用户的选择来完成不同的操作，即表单的分向
可以拖动表头改变列的宽度
MaoMao_1983的专栏
03-20 1577
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">    无标题页.aline{ position:absolute; width:1px; height:100px; background-color:#000000;}.headdiv{ width:100%; cur
escape()和unescape()函数的使用方法
MaoMao_1983的专栏
12-05 1531
escape()和unescape()函数的使用方法function run(){alert("The esacpe value is:"+escape(document.form1.input1.value));alert("The unesacpe value is:"+unescape(escape(document.form1.input1.value)));}  
javascript日期比较
MaoMao_1983的专栏
08-13 1492
function StorePage(){d=document;t=d.selection?(d.selection.type!=None?d.selection.createRange().text:):(d.getSelection?d.getSelection():);void(keyit=window.open(http://www.365key.com/storeit.
JavaScript基础的全部东东
MaoMao_1983的专栏
11-30 1429
JavaScript 是网景（Netscape）公司开发的一种基于客户端浏览器、面向（基于）对象、事件驱动式的网页脚本语言。JavaScript语言的前身叫作Livescript。 JavaScript的特点：
常用的脚本语言
MaoMao_1983的专栏
11-30 1356
 常用的脚本语言 层的隐藏与显示  只要设置style的display属性即可  比如隐藏的层  如果要显示它可以通过脚本来控制  window.document.getElementById("MyDiv").style.display = "";禁止右键    屏蔽页面中程序运行出错信息  window.onerror = function()  {    return true;  }得
c语言图片百叶窗切换特效
05-11
百叶窗切换特效是一种比较常见的UI界面特效，可以在C语言中通过图形库来实现。下面是一个简单的示例代码： ```c #include <graphics.h> #include <conio.h> #include <stdio.h> #include <stdlib.h> #include <dos.h> #define DELAY 30 // 定义延迟时间，单位为毫秒 int main() { int gd = DETECT, gm, i, j, k, m, n; initgraph(&gd, &gm, ""); setbkcolor(WHITE); // 设置背景颜色为白色 cleardevice(); // 清屏 // 读取第一张图片 readimagefile("image1.jpg", 0, 0, getmaxx(), getmaxy()); // 循环切换图片 for (i = 0; i < getmaxx(); i += 10) { for (j = 0; j < getmaxy(); j += 10) { for (k = 0; k < 10; k++) { // 绘制百叶窗效果 setfillstyle(SOLID_FILL, BLACK); bar(i, j + k * 10, i + 10, j + k * 10 + 5); delay(DELAY); } // 读取下一张图片 m = rand() % 5 + 1; char filename[10]; sprintf(filename, "image%d.jpg", m); readimagefile(filename, 0, 0, getmaxx(), getmaxy()); for (n = 10; n >= 0; n--) { // 恢复百叶窗效果 setfillstyle(SOLID_FILL, WHITE); bar(i, j + n * 10, i + 10, j + n * 10 + 5); delay(DELAY); } } } getch(); closegraph(); return 0; } ``` 这个示例代码中，我们使用了 `graphics.h` 图形库来实现图形绘制和读取图片，使用了 `conio.h` 库来等待用户按下任意键退出程序。具体实现方法是在循环中绘制一系列黑色的矩形，形成百叶窗效果，然后读取下一张图片，并恢复百叶窗效果，最终形成百叶窗切换的特效。其中 `DELAY` 常量定义了延迟时间，可以根据需要自行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值