繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript 可控式透明特效实现代码
- Javascript
- 可实现多表单提交的javascript函数
- 比较详细的关于javascript中void(0)的具体含义解释
- 随机显示经典句子或诗歌的javascript脚本
- javascript实现的多条新闻公告系统
- 解析arp病毒背后利用的Javascript技术附解密方法
- 比较详细的javascript对象的property和prototype是什么一种关系
- 访问百度和谷歌网速测试的javascript代码
- javascript 动态改变层的Z-INDEX的代码style.zIndex
- javascript+css实现单击颜色褪去效果
- javascript 表单日期选择效果
- 比较简单的javascript实现input双击后可以编辑
- javascript实现的颜色块滑动的动态效果
- js实现网页检测是否安装了 Flash Player 插件
- javascript 实现父窗口引用弹出窗口的值的脚本
- javascript 实现双击才能打开链接的方法
- 用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
- document.createElement("A")比较不错的属性
- 用javascript实现不按Ctrl实现Multiple Select多选
- JavaScript-世界上误解最深的语言分析
- IE和Mozilla的兼容性汇总event
Javascript 中的 javascript 可控式透明特效实现代码
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 343 ::
收藏到网摘: n/a
透明特效是script.aculo.us提到的特效中最简单的特效之一。既然是特效，必须涉及时间与空间的概念。时间我们可以用setTimeout与setInterval，个人比较喜欢setTimeout，虽然它每次调用都重复注册，但可控性比较好。 空间就全凭CSS的绝对定位实现位移了。在开始之前，我们练习一下setTimeout的递归用法（用来模拟setInterval）。
复制代码 代码如下:
function text(el){
var node = (typeof el == "string")? document.getElementById(el) : el;
var i = 0;
var repeat = function(){
setTimeout(function(){
node.innerHTML = "<h1>"+i+"</h1>";
i++;
if(i <= 100){
setTimeout(arguments.callee, 100);
}
},100)
}
repeat();
}
我们来试一下最简单的淡入特效，就是把node.innerHTML那一行改成透明度的设置。
复制代码 代码如下:
function fadeIn(el){
var node = (typeof el == "string")? document.getElementById(el) : el;
var i = 0;
var fade = function(){
setTimeout(function(){
!+"\v1"? (node.style.filter="alpha(opacity="+i+")"): (node.style.opacity = i / 100);
i++;
if(i <= 100){
setTimeout(arguments.callee, 100);
}
},100)
}
fade();
}
但是这样并不完美，因为IE的滤镜可能会在IE7中失效，我们必须要用zoom=1来激活hasLayout。我们再添加一些可制定参数扩充它。注释已经非常详细，不明白在留言里再问我吧。
复制代码 代码如下:
function opacity(el){
//必选参数
var node = (typeof el == "string")? document.getElementById(el) : el,
//可选参数
options = arguments[1] || {},
//变化的持续时间
duration = options.duration || 1.0,
//开始时透明度
from = options.from || 0.0 ,
//结束时透明度
to = options.to || 0.5,
operation = 1,
init = 0;
if(to - from < 0){
operation = -1,
init = 1;
}
//内部参数
//setTimeout执行的间隔时间，单位毫秒
var frequency = 100,
//设算重复调用的次数
count = duration * 1000 / frequency,
// 设算每次透明度的递增量
detal = Math.abs(to - from) /count,
// 正在进行的次数
i = 0;
var main = function(){
setTimeout(function(){
if(!+"\v1"){
if(node.currentStyle.hasLayout) node.style.zoom = 1;//防止滤镜失效
node.style.filter="alpha(opacity="+ (init * 100 + operation * detal * i * 100).toFixed(1) +")"
}else{
node.style.opacity = (init + operation * detal * i).toFixed(3)
}
node.innerHTML = (init + operation * detal * i).toFixed(3)
i++;
if(i <= count){
setTimeout(arguments.callee, frequency);
}
},frequency)
}
main();
}
效果演示：
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
<div class="text" onclick="opacity(this,{duration:4.0,from:0.0,to:1})"></div>
<div class="text" onclick="opacity(this,{duration:4.0,from:1.0,to:0})"></div>
但上面并不尽善尽美，有一个Bug。我们是通过短路运算符来决定是否使用默认参数还是我们传入的参数，但在javascript中，数字0甚至0.0都会自动转换为false。因此在第个例子，如果我们在to中传入0，它永远不会用到这个0，而是默认的0.5。解决方法让它变成字符串“0”。另，参数i也不是必须的，我们可以省去它，用count负责所有的循环，但这样一来，我们的思维就要逆过来想了。原来是加的，我们要变成减的。
复制代码 代码如下:
function opacity(el){
//必选参数
var node = (typeof el == "string")? document.getElementById(el) : el,
//可选参数
options = arguments[1] || {},
//变化的持续时间
duration = options.duration || 1.0,
//开始时透明度
from = options.from || 0.0 ,
//结束时透明度
to = (options.to && options.to + "") || 0.5,
operation = -1,
init = 1;
if(to - from < 0){
operation = 1,
init = 0;
}
//内部参数
//setTimeout执行的时间，单位
var frequency = 100,
//设算重复调用的次数
count = duration * 1000 / frequency,
// 设算每次透明度的递增量
detal = operation * Math.abs(to - from) /count;
var main = function(){
setTimeout(function(){
if(!+"\v1"){
if(node.currentStyle.hasLayout) node.style.zoom = 1;//防止滤镜失效
node.style.filter="alpha(opacity="+ (init * 100 + detal * count * 100).toFixed(1) +")"
}else{
node.style.opacity = (init + detal * count).toFixed(3)
}
count--;
if(count + 1){
setTimeout(arguments.callee, frequency);
}
},frequency)
}
main();
}
进一步优化，利用原型共享方法。
复制代码 代码如下:
function Opacity(el){
var node = (typeof el == "string")? document.getElementById(el) : el,
options = arguments[1] || {},
duration = options.duration || 1.0,
from = options.from || 0.0 ,
to = (options.to && options.to + "") || 0.5,
operation = -1,
init = 1;
if(to - from < 0){
operation = 1,
init = 0;
}
var frequency = 100,
count = duration * 1000 / frequency,
detal = operation * Math.abs(to - from) /count;
this.main(node,init,detal,count,frequency);
}
Opacity.prototype = {
main : function(node,init,detal,count,frequency){
setTimeout(function(){
if(!+"\v1"){
if(node.currentStyle.hasLayout) node.style.zoom = 1;//防止滤镜失效
node.style.filter="alpha(opacity="+ (init * 100 + detal * count * 100).toFixed(1) +")"
}else{
node.style.opacity = (init + detal * count).toFixed(3)
}
node.innerHTML = (init + detal * count).toFixed(3)
count--;
if(count + 1){
setTimeout(arguments.callee, frequency);
}
},frequency)
}
}
演示代码：
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
<div class="text" onclick="new Opacity(this,{duration:4.0,from:0.0,to:1})"></div>
<div class="text" onclick="new Opacity(this,{duration:4.0,from:1.0,to:0})"></div>
评论 (0) All
