|
|
復制代碼 代碼如下:
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 全選 注:如需引入外部Js需刷新才能執行]
<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 全選 注:如需引入外部Js需刷新才能執行]
<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>
JavaScript技術：javascript 可控式透明特效實現代碼，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
