87,904
社区成员
发帖
与我相关
我的任务
分享蛙蛙推荐：用脚本控制CSS滤境两例
蛙蛙推荐：用脚本控制CSS滤境两例
一、用脚本创建HTML元素，并控制器滤境属性
这个示例是应“蛙蛙池塘软件开发中心”的“水中的太阳”要求而做的哦
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
//定义全局变量来存储图片对象
var newImage;
//文档加载的时候创建一个图片元素,并且插入到指定的oDiv里
window.onload = function()
{
//创建图片元素
newImage = document.createElement("<IMG SRC=http://www.google.com/images/logo_sm.gif>")
//插入到已经声明过的oDiv容器里
document.all.oDiv.insertBefore(newImage);
//设置图片透明度为50%,这里只是演示怎样用脚本控制滤境而已
newImage.style.filter ="Alpha(opacity=50)";
//等待3秒钟执行图片转换函数
window.setTimeout("tranImage()", 3000);
}
//图片转换函数
function tranImage()
{
//使用动态滤境,关于动态率经介绍参考以下链接
//http://www0.ccidnet.com/school/web/2001/04/30/70_4029.html
//这里是用的滤境叠加效果,把动态滤境和以前声明的透明滤境叠加在了一起
//注意前后顺序哦,下面访问动态滤境的时候都是用的索引0,所以要把它放在前面
newImage.style.filter ="revealTrans()"+newImage.style.filter;
//应用滤境
newImage.filters.item(0).Apply();
newImage.filters.item(0).Transition=23; //随机选择一种过渡方式
newImage.style.visibility = "hidden"; //图片隐藏掉
newImage.filters.item(0).play(5); //5秒钟过渡完毕
}
//-->
</SCRIPT>
</HEAD>
<BODY>
本示例演示用脚本创建HTML元素，并控制元素的滤境属性。着重演示原理，效果自己可以查阅css手册玩儿更多的花样。呱呱。
<div id="oDiv" style="position:absolute;top:100;left:300;height=50;width=200;border:1px solid #663300;text-align: center;"></div>
</BODY>
</HTML>
二、光源滤镜头演示，用来给汽车当车灯什么的，呵呵
<style>
#idDiv{width:80%;height:80px;background-color:#FFD700;padding:6px;position:absolute;z-index:3;left:9px;top:90px;filter:progid:DXImageTransform.Microsoft.Light();}
</style>
<script>
function rdl_change(m){
var oDiv=document.all("idDiv");
with (oDiv.filters[0]) switch(m) {
case 1 : addCone(0,0,1,80,80,255,0,0,20,180);break;
case 0 : addAmbient(90,140,210,60);break;
case 2 : addPoint (200,60,20,240,80,0,40);break;
case 3 : clear();break;
default: break;
}
}
</script>
<input type=button value="增加环境光" onclick="rdl_change(0)" id=button1 name=button1>
<input type=button value="添加锥形光" onclick="rdl_change(1)" id=button2 name=button2>
<input type=button value="添加点光" onclick="rdl_change(2)" id=button3 name=button3>
<input type=button value="全部清除" onclick="rdl_change(3)" id=button4 name=button4>
<br>
<div id=idDiv><img src="http://www.google.com/images/logo_sm.gif" style="float:left;border:1px solid #000000;">请点击下面的按钮。</div>
<br>
一、用脚本创建HTML元素，并控制器滤境属性
这个示例是应“蛙蛙池塘软件开发中心”的“水中的太阳”要求而做的哦
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
//定义全局变量来存储图片对象
var newImage;
//文档加载的时候创建一个图片元素,并且插入到指定的oDiv里
window.onload = function()
{
//创建图片元素
newImage = document.createElement("<IMG SRC=http://www.google.com/images/logo_sm.gif>")
//插入到已经声明过的oDiv容器里
document.all.oDiv.insertBefore(newImage);
//设置图片透明度为50%,这里只是演示怎样用脚本控制滤境而已
newImage.style.filter ="Alpha(opacity=50)";
//等待3秒钟执行图片转换函数
window.setTimeout("tranImage()", 3000);
}
//图片转换函数
function tranImage()
{
//使用动态滤境,关于动态率经介绍参考以下链接
//http://www0.ccidnet.com/school/web/2001/04/30/70_4029.html
//这里是用的滤境叠加效果,把动态滤境和以前声明的透明滤境叠加在了一起
//注意前后顺序哦,下面访问动态滤境的时候都是用的索引0,所以要把它放在前面
newImage.style.filter ="revealTrans()"+newImage.style.filter;
//应用滤境
newImage.filters.item(0).Apply();
newImage.filters.item(0).Transition=23; //随机选择一种过渡方式
newImage.style.visibility = "hidden"; //图片隐藏掉
newImage.filters.item(0).play(5); //5秒钟过渡完毕
}
//-->
</SCRIPT>
</HEAD>
<BODY>
本示例演示用脚本创建HTML元素，并控制元素的滤境属性。着重演示原理，效果自己可以查阅css手册玩儿更多的花样。呱呱。
<div id="oDiv" style="position:absolute;top:100;left:300;height=50;width=200;border:1px solid #663300;text-align: center;"></div>
</BODY>
</HTML>
二、光源滤镜头演示，用来给汽车当车灯什么的，呵呵
<style>
#idDiv{width:80%;height:80px;background-color:#FFD700;padding:6px;position:absolute;z-index:3;left:9px;top:90px;filter:progid:DXImageTransform.Microsoft.Light();}
</style>
<script>
function rdl_change(m){
var oDiv=document.all("idDiv");
with (oDiv.filters[0]) switch(m) {
case 1 : addCone(0,0,1,80,80,255,0,0,20,180);break;
case 0 : addAmbient(90,140,210,60);break;
case 2 : addPoint (200,60,20,240,80,0,40);break;
case 3 : clear();break;
default: break;
}
}
</script>
<input type=button value="增加环境光" onclick="rdl_change(0)" id=button1 name=button1>
<input type=button value="添加锥形光" onclick="rdl_change(1)" id=button2 name=button2>
<input type=button value="添加点光" onclick="rdl_change(2)" id=button3 name=button3>
<input type=button value="全部清除" onclick="rdl_change(3)" id=button4 name=button4>
<br>
<div id=idDiv><img src="http://www.google.com/images/logo_sm.gif" style="float:left;border:1px solid #000000;">请点击下面的按钮。</div>
<br>
...全文
请发表友善的回复…
发表回复
onlytiancai 2005-07-27
- 打赏
- 举报
蛙蛙推荐：用脚本控制CSS滤境两例
用CSS滤境可以给网页上的图片，文字创建各种各样的效果，让网页变的更加丰富多彩，蛙蛙带你走进CSS滤境的世界，通过这两个例子，你会对它的强大功能和完美效果管中窥豹－略见一斑。
http://onlytiancai.cnblogs.com/archive/2005/07/27/201238.html
用CSS滤境可以给网页上的图片，文字创建各种各样的效果，让网页变的更加丰富多彩，蛙蛙带你走进CSS滤境的世界，通过这两个例子，你会对它的强大功能和完美效果管中窥豹－略见一斑。
http://onlytiancai.cnblogs.com/archive/2005/07/27/201238.html
