网易 
新闻 LOFTER 邮箱 相册 阅读 图书 有道 摄影 企业邮箱 优惠券 云笔记 闪电邮 邮箱大师 印像派 考拉海购
 
更多
博客 
手机博客 博客搬家 博客VIP服务 发现 小组 风格
 
群博客 博客油菜地 博客话题 博客热点 博客圈子 找朋友
 
登录  
 加关注
   显示下一条  |  关闭
温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！立即重新绑定新浪微博》  |  关闭

火力光波的博客

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

导航

 
 
 
 
 

日志

 
 
关于我
火力光波
文章分类

动态滤镜实例代码  

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>


  评论这张
 
阅读(1169)| 评论(10)

历史上的今天

评论

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

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

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