JavaScript小记

项目进行中需求变化，把所有的图片的呈现出渐出效果，我首先想到了filters：滤镜，

<html><head>
</head>
<script  language="JavaScript">function  picload(){img.filters.revealTrans.apply()img.filters.revealTrans.Transition=23img.style.visibility="inherit"img.filters.revealTrans.apply()}
</script><Body οnlοad="picload">
<img src="jinxing.gif" id="img" style="visibility:hidden;FILTER:revealTrans(Duration=1,Transition=23);"/>
</Body>
</html>

运行下，成功了！

下面列出所有效果和对应Transition值（参考手册）：
值 : 效果
0 : 矩形收缩转换。
1 : 矩形扩张转换。
2 : 圆形收缩转换。
3 : 圆形扩张转换。
4 : 向上擦除。
5 : 向下擦除。
6 : 向右擦除。
7 : 向左擦除。
8 : 纵向百叶窗转换。
9 : 横向百叶窗转换。
10 : 国际象棋棋盘横向转换。
11 : 国际象棋棋盘纵向转换。
12 : 随机杂点干扰转换。
13 : 左右关门效果转换。
14 : 左右开门效果转换。
15 : 上下关门效果转换。
16 : 上下开门效果转换。
17 : 从右上角到左下角的锯齿边覆盖效果转换。
18 : 从右下角到左上角的锯齿边覆盖效果转换。
19 : 从左上角到右下角的锯齿边覆盖效果转换。
20 : 从左下角到右上角的锯齿边覆盖效果转换。
21 : 随机横线条转换。
22 : 随机竖线条转换。
23 : 随机使用上面可能的值转换。

其中23比较特别，是随机效果，程序默认就是随机效果。

apply,play方法为运行。

由此我们可以做出多张图片的切换效果

http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html

这个讲的比较详细

客户的需求犹如沙漠的天气，光源扫描图，难受死了，哎

首先，我们怎样添加个光源呢，filters的方法addCone添加一个圆锥形式的光源。

其次，怎样改变光源的强烈及移动光源呢，用滤镜light（）来控制光源的强烈程度moveLight()来移动光源。

<STYLE>
.lightfilter{ filter:light();width:400}
</STYLE>
<SCRIPT language=JavaScript>
<!--
function lightinit(){
var ix2=myDiv.offsetWidth/2;
var iy2=myDiv.offsetHeight/2;
myDiv.filters[0].addCone(0,0,1,ix2,iy2,255,255,200,100,30)} //添加一个点光源
//-->
</script>
<DIV CLASS="lightfilter" ID="myDiv" οnmοusemοve="myDiv.filters[0].moveLight(0,window.event.x,window.event.y,5,1);">
<IMG src="111.jpg"></div>
<body onLoad="lightinit()">

好了，大家试试吧！

转载于:https://www.cnblogs.com/lema/archive/2011/02/28/1967114.html

JavaScript小记相关推荐

JavaScript小记（持续更新）
注意:(2020.01.14) 后续将都在我的学习笔记文档 - JavaScript小记中进行更新,该文章不再更新,请持续关注上述网页学习js遇到的疑问和js基础都记录在这里,持续更新中. 2019 ...
JavaScript 小记之闭包(Closures)
Closures are functions that refer to independent (free) variables. 闭包是以静态方式/词法方式进行存储所有父作用域的一个函数在Jav ...
JavaScript小记——Ajax异步请求
目录 Ajax介绍 Ajax使用 ES6拼串语法 Ajax介绍 Ajax Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX ...
python 创建目录时间_python实现根据当前时间创建目录并输出日志
举个例子:比如我们要实现根据当前时间的年月日来新建目录来存放每天的日志,当前时间作为日志文件名称:代码如下: #!/usr/bin/env python3 # _*_ coding: utf-8 _* ...
飞扬_柳絮的博客导航
HTML 移动端基本Mate 合理选择图像格式 Css Css 记事自定义radio样式 ...
python取出hive_python 读取hive数据
话不多说,直接上代码 from pyhive import hivedef pyhive(hql): conn = hive.Connection(host='HiveServer2 host', p ...
JavaScript __ 对象小记
JavaScript __ 对象小记文章目录 JavaScript __ 对象小记前言一.对象的组成二.JavaScript中的三种对象 1.自定义对象三种创建对象的方法 1)字面量创建对象 ...
JavaScript数据类型和变量学习小记
今天,天气不晴朗. 闲来无事随便看了看廖大的JavaScript教程,本人愚钝,作此随笔摘录几点以便日后学习. 比较运算符先看个简单例子: 在上图中我们很容易看出对于JS来说"== ...
JavaScript DOM编程艺术小记（五）---第四章-JavaScript图片库(实例)
^编写一个优秀的标记文件 ^编写一个JavaScript函数以显示用户想要查看的图片 ^由标记触发函数调用 ^使用几个新方法扩展这个JavaScript函数以下代码结合三四章内容 HTML文件 &l ...

JavaScript小记

JavaScript小记相关推荐

最新文章

热门文章