热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

javascript可控式透明特效实现代码

透明特效是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 = "

"+i+"

";
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需再刷新一下页面才能执行]



但上面并不尽善尽美,有一个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需再刷新一下页面才能执行]



推荐阅读
  • 列表生成式虽然简洁高效,但在处理复杂算法时存在局限性。本文将介绍生成器(generator)的概念及其优势,探讨如何通过生成器解决列表生成式的局限性,并提供实际示例。 ... [详细]
  • Ubuntu 环境下配置 LAMP 服务器
    本文详细介绍了如何在 Ubuntu 系统上安装和配置 LAMP(Linux、Apache、MySQL 和 PHP)服务器。包括 Apache 的安装、PHP 的配置以及 MySQL 数据库的设置,确保读者能够顺利搭建完整的 Web 开发环境。 ... [详细]
  • 本文介绍了编程语言的基本分类,包括机器语言、汇编语言和高级语言的特点及其优缺点。随后详细讲解了Python解释器的安装与配置方法,并探讨了Python变量的定义、使用及内存管理机制。 ... [详细]
  • 在开发板的启动选项中看到如下两行:7:LoadBootLoadercodethenwritetoFlashviaSerial.9:LoadBootLoadercodethenwri ... [详细]
  • 本文介绍了如何使用 Gesture Detector 和 overridePendingTransition 方法来实现滑动界面和过渡动画。 ... [详细]
  • 驱动程序的基本结构1、Windows驱动程序中重要的数据结构1.1、驱动对象(DRIVER_OBJECT)每个驱动程序会有唯一的驱动对象与之对应,并且这个驱动对象是在驱 ... [详细]
  • 作为一名饼干爱好者,我尝试过各种各样的饼干。虽然威化饼和消化饼都有其独特的风味,但我对柠檬夹心饼干情有独钟。这种饼干不仅口感丰富,还带有清新的柠檬香味。 ... [详细]
  • 在 PHP 中,使用 `continue` 关键字结合数字可以有效地终止嵌套的 `foreach` 循环。本文将详细介绍如何使用 `continue` 加数字来控制不同层次的循环。 ... [详细]
  • 本文详细介绍了如何使用 CSS3 的 background-clip 和 background-origin 属性来裁剪和定位背景图片,以及如何通过 background-size 控制背景图片的尺寸。 ... [详细]
  • 本文介绍了三种解决 Git Push 冲突的方法,包括创建新分支、手动解决冲突和强行推送。这些方法适用于不同的开发场景,如版本迭代、多人协作和个人开发。 ... [详细]
  • 开发笔记:前端之前端初识
    开发笔记:前端之前端初识 ... [详细]
  • 本文将介绍如何利用Python从西门子PLC获取数据,并通过Web技术实现数据的可视化。我们将探讨所需的技术栈和具体步骤。 ... [详细]
  • Python学习day3网络基础之网络协议篇
    一、互联网协议连接两台计算机之间的Internet实际上就是一系列统一的标准,这些标准称之为互联网协议,互联网的本质就是一系列网络协议。二、为什么要有互联网协议互联网协议就相当于计 ... [详细]
  • 本文介绍了如何使用线段树实现区间加法和区间查询操作,包括详细的代码实现和解释。 ... [详细]
  • 使用 Mui.js 获取复选框值的方法
    本文介绍如何使用 Mui.js 框架来获取复选框的值,并通过数组进行处理和展示。 ... [详细]
author-avatar
youyiyang
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有