图像竞变代码，切换时候的过渡效果

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图像竞变，切换时候的过渡效果</title>
</head>
<body bgcolor="#fef4d9" onclick=Clicked()>
<SCRIPT>
transeffect = 0;
theeffects = new Array(24);
theeffects[0] = "盒状收缩";
theeffects[1] = "盒状向外";
theeffects[2] = "圆形收缩";
theeffects[3] = "圆形向内";
theeffects[4] = "从下向上";
theeffects[5] = "从上向下";
theeffects[6] = "从左向右";
theeffects[7] = "从右向左";
theeffects[8] = "百页窗形向右";
theeffects[9] = "百页窗形向下";
theeffects[10] = "棋盘形交叉向右";
theeffects[11] = "棋盘形交叉向下";
theeffects[12] = "随意溶解形";
theeffects[13] = "左右向内";
theeffects[14] = "左右向外";
theeffects[15] = "上下向内";
theeffects[16] = "上下向外";
theeffects[17] = "条纹状向左下";
theeffects[18] = "条纹状向左上";
theeffects[19] = "条纹状向右下";
theeffects[20] = "条纹状向右上";
theeffects[21] = "溶解水平状";
theeffects[22] = "溶解上下状";
theeffects[23] = "随着溶解";
current_image = "image1";
function Clicked() {
	var the_image, the_other;
	text2.style.visiblity="hidden";
	if (image1.style.visibility=="inherit") {
		the_image = image2;
		the_other = image1;
		}
	else {
		the_image = image1;
		the_other = image2;
		} 
	the_other.style.visibility="hidden";
	the_image.filters.item(0).Apply();
	the_image.filters.item(0).Transition = transeffect;
	the_image.filters.item(0).Play(2.0);
	the_image.style.visibility="inherit";
	text2.innerText=theeffects[transeffect];
	transeffect++;
	if (transeffect == 24)
		transeffect = 0;
	text2.style.visibility="visible";
}
</SCRIPT>
<DIV id=image><DIV id=text1></DIV><IMG id=image1 src="//ku.shouce.ren/files/images/201601/56a3540466b44.jpg" style="FILTER:revealTrans(Duration=3.0,Transition=1); VISIBILITY: hidden"> <IMG id=image2 src="//ku.shouce.ren/files/images/201601/56a354055d474.jpg" style="FILTER: revealTrans(Duration=3.0,Transition=1); VISIBILITY: hidden"> </DIV><DIV id=text2></DIV>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

图像竞变代码，切换时候的过渡效果

分类

图片代码

描述

图像竞变代码，收集几款图片切换时候的过渡效果，有盒状收缩、圆形收缩切换、从下向上切换、百页窗形向右切换、百页窗形向下切换、棋盘形交叉向下切换、条纹状向左上切换、溶解上下状切换、随着溶解切换、左右向外、左右向内、上下向外切...