注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

火力光波的博客

火一般的热情 光一样的速度

 
 
 

日志

 
 

动态滤镜实例代码  

2010-03-20 19:59:11|  分类: CSS代码 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

图片过渡淡入淡出

<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>


  评论这张
 
阅读(955)| 评论(10)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018