蛙蛙推荐：用脚本控制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/
//这里是用的滤境叠加效果,把动态滤境和以前声明的透明滤境叠加在了一起
//注意前后顺序哦,下面访问动态滤境的时候都是用的索引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>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构