|
|
復(fù)制代碼 代碼如下:
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();
}
我們來(lái)試一下最簡(jiǎn)單的淡入特效，就是把node.innerHTML那一行改成透明度的設(shè)置。
復(fù)制代碼 代碼如下:
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();
}
但是這樣并不完美，因?yàn)镮E的濾鏡可能會(huì)在IE7中失效，我們必須要用zoom=1來(lái)激活hasLayout。我們?cè)偬砑右恍┛芍贫▍?shù)擴(kuò)充它。注釋已經(jīng)非常詳細(xì)，不明白在留言里再問(wèn)我吧。
復(fù)制代碼 代碼如下:
function opacity(el){
//必選參數(shù)
var node = (typeof el == "string")? document.getElementById(el) : el,
//可選參數(shù)
options = arguments[1] || {},
//變化的持續(xù)時(shí)間
duration = options.duration || 1.0,
//開始時(shí)透明度
from = options.from || 0.0 ,
//結(jié)束時(shí)透明度
to = options.to || 0.5,
operation = 1,
init = 0;
if(to - from < 0){
operation = -1,
init = 1;
}
//內(nèi)部參數(shù)
//setTimeout執(zhí)行的間隔時(shí)間，單位毫秒
var frequency = 100,
//設(shè)算重復(fù)調(diào)用的次數(shù)
count = duration * 1000 / frequency,
// 設(shè)算每次透明度的遞增量
detal = Math.abs(to - from) /count,
// 正在進(jìn)行的次數(shù)
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需刷新才能執(zhí)行]
<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>
但上面并不盡善盡美，有一個(gè)Bug。我們是通過(guò)短路運(yùn)算符來(lái)決定是否使用默認(rèn)參數(shù)還是我們傳入的參數(shù)，但在Javascript中，數(shù)字0甚至0.0都會(huì)自動(dòng)轉(zhuǎn)換為false。因此在第個(gè)例子，如果我們?cè)趖o中傳入0，它永遠(yuǎn)不會(huì)用到這個(gè)0，而是默認(rèn)的0.5。解決方法讓它變成字符串“0”。另，參數(shù)i也不是必須的，我們可以省去它，用count負(fù)責(zé)所有的循環(huán)，但這樣一來(lái)，我們的思維就要逆過(guò)來(lái)想了。原來(lái)是加的，我們要變成減的。
復(fù)制代碼 代碼如下:
function opacity(el){
//必選參數(shù)
var node = (typeof el == "string")? document.getElementById(el) : el,
//可選參數(shù)
options = arguments[1] || {},
//變化的持續(xù)時(shí)間
duration = options.duration || 1.0,
//開始時(shí)透明度
from = options.from || 0.0 ,
//結(jié)束時(shí)透明度
to = (options.to && options.to + "") || 0.5,
operation = -1,
init = 1;
if(to - from < 0){
operation = 1,
init = 0;
}
//內(nèi)部參數(shù)
//setTimeout執(zhí)行的時(shí)間，單位
var frequency = 100,
//設(shè)算重復(fù)調(diào)用的次數(shù)
count = duration * 1000 / frequency,
// 設(shè)算每次透明度的遞增量
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();
}
進(jìn)一步優(yōu)化，利用原型共享方法。
復(fù)制代碼 代碼如下:
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需刷新才能執(zhí)行]
<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技術(shù)：javascript 可控式透明特效實(shí)現(xiàn)代碼，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
