javascript 可控式透明特效實現(xiàn)代碼
更新時間：2010年01月02日 13:13:57 作者：
透明特效是script.aculo.us提到的特效中最簡單的特效之一。既然是特效，必須涉及時間與空間的概念。時間我們可以用setTimeout與setInterval，個人比較喜歡setTimeout，雖然它每次調(diào)用都重復注冊，但可控性比較好。
空間就全憑CSS的絕對定位實現(xiàn)位移了。在開始之前，我們練習一下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。我們再添加一些可制定參數(shù)擴充它。注釋已經(jīng)非常詳細，不明白在留言里再問我吧。
function opacity(el){
//必選參數(shù)
var node = (typeof el == "string")? document.getElementById(el) : el,
//可選參數(shù)
options = arguments[1] || {},
//變化的持續(xù)時間
duration = options.duration || 1.0,
//開始時透明度
from = options.from || 0.0 ,
//結(jié)束時透明度
to = options.to || 0.5,
operation = 1,
init = 0;
if(to - from < 0){
operation = -1,
init = 1;
}
//內(nèi)部參數(shù)
//setTimeout執(zhí)行的間隔時間，單位毫秒
var frequency = 100,
//設算重復調(diào)用的次數(shù)
count = duration * 1000 / frequency,
// 設算每次透明度的遞增量
detal = Math.abs(to - from) /count,
// 正在進行的次數(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>
但上面并不盡善盡美，有一個Bug。我們是通過短路運算符來決定是否使用默認參數(shù)還是我們傳入的參數(shù)，但在javascript中，數(shù)字0甚至0.0都會自動轉(zhuǎn)換為false。因此在第個例子，如果我們在to中傳入0，它永遠不會用到這個0，而是默認的0.5。解決方法讓它變成字符串“0”。另，參數(shù)i也不是必須的，我們可以省去它，用count負責所有的循環(huán)，但這樣一來，我們的思維就要逆過來想了。原來是加的，我們要變成減的。
function opacity(el){
//必選參數(shù)
var node = (typeof el == "string")? document.getElementById(el) : el,
//可選參數(shù)
options = arguments[1] || {},
//變化的持續(xù)時間
duration = options.duration || 1.0,
//開始時透明度
from = options.from || 0.0 ,
//結(jié)束時透明度
to = (options.to && options.to + "") || 0.5,
operation = -1,
init = 1;
if(to - from < 0){
operation = 1,
init = 0;
}
//內(nèi)部參數(shù)
//setTimeout執(zhí)行的時間，單位
var frequency = 100,
//設算重復調(diào)用的次數(shù)
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();
}
進一步優(yōu)化，利用原型共享方法。
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>
復制代碼 代碼如下:
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。我們再添加一些可制定參數(shù)擴充它。注釋已經(jīng)非常詳細，不明白在留言里再問我吧。
復制代碼 代碼如下:
function opacity(el){
//必選參數(shù)
var node = (typeof el == "string")? document.getElementById(el) : el,
//可選參數(shù)
options = arguments[1] || {},
//變化的持續(xù)時間
duration = options.duration || 1.0,
//開始時透明度
from = options.from || 0.0 ,
//結(jié)束時透明度
to = options.to || 0.5,
operation = 1,
init = 0;
if(to - from < 0){
operation = -1,
init = 1;
}
//內(nèi)部參數(shù)
//setTimeout執(zhí)行的間隔時間，單位毫秒
var frequency = 100,
//設算重復調(diào)用的次數(shù)
count = duration * 1000 / frequency,
// 設算每次透明度的遞增量
detal = Math.abs(to - from) /count,
// 正在進行的次數(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>
但上面并不盡善盡美，有一個Bug。我們是通過短路運算符來決定是否使用默認參數(shù)還是我們傳入的參數(shù)，但在javascript中，數(shù)字0甚至0.0都會自動轉(zhuǎn)換為false。因此在第個例子，如果我們在to中傳入0，它永遠不會用到這個0，而是默認的0.5。解決方法讓它變成字符串“0”。另，參數(shù)i也不是必須的，我們可以省去它，用count負責所有的循環(huán)，但這樣一來，我們的思維就要逆過來想了。原來是加的，我們要變成減的。
復制代碼 代碼如下:
function opacity(el){
//必選參數(shù)
var node = (typeof el == "string")? document.getElementById(el) : el,
//可選參數(shù)
options = arguments[1] || {},
//變化的持續(xù)時間
duration = options.duration || 1.0,
//開始時透明度
from = options.from || 0.0 ,
//結(jié)束時透明度
to = (options.to && options.to + "") || 0.5,
operation = -1,
init = 1;
if(to - from < 0){
operation = 1,
init = 0;
}
//內(nèi)部參數(shù)
//setTimeout執(zhí)行的時間，單位
var frequency = 100,
//設算重復調(diào)用的次數(shù)
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();
}
進一步優(yōu)化，利用原型共享方法。
復制代碼 代碼如下:
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>
相關文章
這篇文章主要為大家詳細介紹了JScript實現(xiàn)簡單的表格操作，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
紅黑樹的插入詳解及Javascript實現(xiàn)方法示例
這篇文章主要給大家介紹了關于紅黑樹的插入的相關資料，以及Javascript實現(xiàn)的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起看看吧。2018-03-03
一個無限級XML綁定跨框架菜單（For IE）...2007-01-01
js核心基礎之構造函數(shù)constructor用法實例分析
這篇文章主要介紹了js核心基礎之構造函數(shù)constructor用法,結(jié)合具體實例形式分析了javascript構造函數(shù)constructor概念、原理、使用方法及相關操作注意事項,需要的朋友可以參考下2019-05-05
JavaScript 轉(zhuǎn)義字符JSON parse錯誤研究
這篇文章主要為大家介紹了JavaScript 轉(zhuǎn)義字符JSON parse錯誤研究，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
這篇文章主要為大家詳細介紹了javascript實現(xiàn)電腦和手機版樣式切換，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章給大家總結(jié)了關于JS動畫中定時器的相關用法以及相關知識點總結(jié)，有需要的朋友可以參考學習下。2018-03-03
利用JavaScript實現(xiàn)春節(jié)倒計時效果(移動端和PC端)
這篇文章主要介紹了通過Html+Css+js如何實現(xiàn)春節(jié)倒計時效果，本文同時介紹了移動端和PC端兩種效果，感興趣的同學可以跟隨小編一起動手試試2022-01-01
下面小編就為大家?guī)硪黄獰o阻塞加載js,防止因js加載不了影響頁面顯示的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來2016-12-12
這篇文章主要介紹了JavaScript類型判斷的四種方法，幫助大家更好的理解和學習JavaScript，感興趣的朋友可以了解下2020-10-10