图片过渡淡入淡出
<html>
<head>
<title>淡入淡出</title>
<style type="text/css">
<!--
body{
background:#ffffff
}
img{
filter:BlendTrans(duration=3);
border:nono;
}
-->
</style>
</head>
<body>
<script language="javascript">
function img1(x){ //获取数组记录数
this.length=x;
}
//申明数组并给数组赋值,也就是把图片的相对路径保存起来
//若是图片较多,可增加数组元素的个数,
//在这个例子中用了五张图片,所以数组元素个数为“8”。
iname=new img1(8);
iname[0]="http://i3.6.cn/cvbnm/0f/16/f2/90a0f0dd305a7ae44b94ec9905bb5ec8.jpg";
iname[1]="http://i3.6.cn/cvbnm/ec/d8/0f/5dc36af7346efb54f945b617896b53c0.jpg";
iname[2]="http://i3.6.cn/cvbnm/af/9b/2a/0a995c87bdf59b19bc611d79c110e5d4.jpg";
iname[3]="http://i3.6.cn/cvbnm/c5/ee/77/9f900eef37c8781dbb8f330dbf2f30f0.jpg";
iname[4]="http://i3.6.cn/cvbnm/52/a2/80/2a8c2028bd4f092d1c2eba3444f5e924.jpg";
iname[5]="http://i3.6.cn/cvbnm/6f/36/9f/1f3896ac04320f4f6dd38b25061942c8.jpg";
iname[6]="http://i3.6.cn/cvbnm/e6/65/91/5b07e4668aa1b4d2a2bc41233305f511.jpg";
iname[7]="http://i3.6.cn/cvbnm/cd/6d/f9/740cc111412ac6cbe85cd2033fbf8650.jpg";
var i=0;
function play1(){ //演示变换效果
if (i==7) { i=0; } //当进行到iname[7]时,返回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="http://i3.6.cn/cvbnm/e6/65/91/5b07e4668aa1b4d2a2bc41233305f511.jpg" name="tp1"></p>
<script language="javascript">play1();</script>
</body>
</html>
本例为多张图片过渡,背景为白色。
以上代码,可复制粘贴到“运行代码框”或“在线编辑器”中测试!
图片过渡随机特效
<html>
<head>
<title>随机特效</title>
<style type="text/css">
<!--
body{
background:#000000
}
img{
filter:revealTrans(Transition=23,Duration=3);
border:nono;
}
-->
</style>
</head>
<body>
<script language="javascript">
function img1(x){ //获取数组记录数
this.length=x;
}
//申明数组并给数组赋值,也就是把图片的相对路径保存起来
//若是图片较多,可增加数组元素的个数,
//在这个例子中用了五张图片,所以数组元素个数为“8”。
iname=new img1(8);
iname[0]="http://i3.6.cn/cvbnm/0f/16/f2/90a0f0dd305a7ae44b94ec9905bb5ec8.jpg";
iname[1]="http://i3.6.cn/cvbnm/ec/d8/0f/5dc36af7346efb54f945b617896b53c0.jpg";
iname[2]="http://i3.6.cn/cvbnm/af/9b/2a/0a995c87bdf59b19bc611d79c110e5d4.jpg";
iname[3]="http://i3.6.cn/cvbnm/c5/ee/77/9f900eef37c8781dbb8f330dbf2f30f0.jpg";
iname[4]="http://i3.6.cn/cvbnm/52/a2/80/2a8c2028bd4f092d1c2eba3444f5e924.jpg";
iname[5]="http://i3.6.cn/cvbnm/6f/36/9f/1f3896ac04320f4f6dd38b25061942c8.jpg";
iname[6]="http://i3.6.cn/cvbnm/e6/65/91/5b07e4668aa1b4d2a2bc41233305f511.jpg";
iname[7]="http://i3.6.cn/cvbnm/cd/6d/f9/740cc111412ac6cbe85cd2033fbf8650.jpg";
var i=0;
function play1(){ //演示变换效果
if (i==7) { i=0; } //当进行到iname[7]时,返回iname[0]
else{ i++;}
tp1.filters[0].apply(); //tp为图像的name,在<img>标记中定义
tp1.src=iname[i];
tp1.filters[0].play();
mytimeout=setTimeout("play1()",5000);
//设置演示时间,这里是以毫秒为单位的,所以“5000”是指每张图片的演示时间是4秒。
//这个时间值要大于滤镜中的设置的转换时间值,这样当转换结束后还能停留一会。
}
</script>
<p><img src="http://i3.6.cn/cvbnm/e6/65/91/5b07e4668aa1b4d2a2bc41233305f511.jpg" name="tp1"></p>
<script language="javascript">play1();</script>
</body>
</html>
<p style="TEXT-INDENT: 4em;color :#ffffff";>点击工具栏中的“刷新”,就会改变过渡方式!</p>
以上代码,可复制粘贴到“运行代码框”或“在线编辑器”中测试!
每当刷新一次,就会改变一种过渡方式。
行内式图片过渡随机特效
<script>
function img1(x){ //获取数组记录数
this.length=x;
}
//申明数组并给数组赋值,也就是把图片的相对路径保存起来
//若是图片较多,可增加数组元素的个数,
//在这个例子中用了五张图片,所以数组元素个数为“8”。
iname=new img1(8);
iname[0]="http://i3.6.cn/cvbnm/0f/16/f2/90a0f0dd305a7ae44b94ec9905bb5ec8.jpg";
iname[1]="http://i3.6.cn/cvbnm/ec/d8/0f/5dc36af7346efb54f945b617896b53c0.jpg";
iname[2]="http://i3.6.cn/cvbnm/af/9b/2a/0a995c87bdf59b19bc611d79c110e5d4.jpg";
iname[3]="http://i3.6.cn/cvbnm/c5/ee/77/9f900eef37c8781dbb8f330dbf2f30f0.jpg";
iname[4]="http://i3.6.cn/cvbnm/52/a2/80/2a8c2028bd4f092d1c2eba3444f5e924.jpg";
iname[5]="http://i3.6.cn/cvbnm/6f/36/9f/1f3896ac04320f4f6dd38b25061942c8.jpg";
iname[6]="http://i3.6.cn/cvbnm/e6/65/91/5b07e4668aa1b4d2a2bc41233305f511.jpg";
iname[7]="http://i3.6.cn/cvbnm/cd/6d/f9/740cc111412ac6cbe85cd2033fbf8650.jpg";
var i=0;
function play1(){ //演示变换效果
if (i==7) { i=0; } //当进行到iname[7]时,返回iname[0]
else{ i++;}
tp1.filters[0].apply(); //tp为图像的name,在<img>标记中定义
tp1.src=iname[i];
tp1.filters[0].play();
mytimeout=setTimeout("play1()",5000);
//设置演示时间,这里是以毫秒为单位的,所以“5000”是指每张图片的演示时间是4秒。
//这个时间值要大于滤镜中的设置的转换时间值,这样当转换结束后还能停留一会。
}
</script>
<p align=center><img style="filter:revealTrans(Transition=23,Duration=3)" src="http://i3.6.cn/cvbnm/c5/ee/77/9f900eef37c8781dbb8f330dbf2f30f0.jpg" name="tp1"></p>
<script>play1() ; </script>
<p align=center>点击工具栏中的“刷新”,就会改变过渡方式!</p>
以上代码,可复制粘贴到“运行代码框”或“在线编辑器”中测试!
每当刷新一次,就会改变一种过渡方式。
图片切换效果纯CSS代码
<style type="text/css">
*{ margin:0; padding:0;}
dl#menu{ position:relative; width:470px; height:280px; border:5px dashed #f00; overflow:hidden;}
#menu dt{ position:absolute; right:5px; bottom:3px;}
#menu dd{width:470px; height:280px; overflow:hidden; }
#menu dt a{ float:left; display:block; padding:1px 4px; border:1px solid #ccc; margin-left:2px; text-decoration:none; background:#666;color:#000; font-size:16px;}
#menu dt a:hover{ color:#FF0;}
</style>
<dl id="menu">
<dt><a href="#img1"><B>1</B></a><a href="#img2"><B>2</B></a><a href="#img3"><B>3</B></a><a href="#img4"><B>4</B></a><a href="#img5"><B>5</B></a><a href="#img6"><B>6</B></a></dt>
<dd>
<a href="http://xuhui8491.56.com"target="_blank"><img src="http://i3.6.cn/cvbnm/e4/62/0d/5df6bd0c6f748505d9d8797a731fde82.jpg"id="img1"/></a>
<a href="http://xuhui-8491.blog.163.com/"target="_blank"><img src="http://i3.6.cn/cvbnm/f0/35/c8/98c1dbdf079f2d967cfea90365e769a8.jpg" id="img2"/></a>
<a href="http://xuhui8491.56.com"target="_blank"><img src="http://i3.6.cn/cvbnm/cd/6d/f9/740cc111412ac6cbe85cd2033fbf8650.jpg"id="img3"/></a>
<a href="http://xuhui-8491.blog.163.com/"target="_blank"><img src="http://i3.6.cn/cvbnm/e6/65/91/5b07e4668aa1b4d2a2bc41233305f511.jpg" id="img4"/></a>
<a href="http://xuhui8491.56.com"target="_blank"><img src="http://i3.6.cn/cvbnm/6f/36/9f/1f3896ac04320f4f6dd38b25061942c8.jpg" id="img5"/></a>
<a href="http://xuhui-8491.blog.163.com/"target="_blank"><img src="http://i3.6.cn/cvbnm/52/a2/80/2a8c2028bd4f092d1c2eba3444f5e924.jpg" id="img6"/></a>
</dd>
</dl>
<p style="TEXT-INDENT: 4em"> 点击数字按钮图片切换,点击图片打开新页面!</p>
评论