转自http://kb.cnblogs.com/page/90854/

参数说明:
  fadeIn()与fadeOut()均有三个参数,第一个是事件, 必填; 第二个是淡入淡出速度, 正整数, 大小自己权衡, 可选参数; 第三个, 是指定淡入淡出到的透明度值(类似于jQuery中的fadeTo()), 0~100的正整数值, 也是可选参数.


window.onload = function(){
//底层共用
var iBase = {
Id: function(name){
return document.getElementById(name);
},
//设置元素透明度,透明度值按IE规则计,即0~100
SetOpacity: function(ev, v){
ev.filters ? ev.style.filter = 'alpha(opacity=' + v + ')' : ev.style.opacity = v / 100;
}
}
//淡入效果(含淡入到指定透明度)
function fadeIn(elem, speed, opacity){
/*
* 参数说明
* elem==>需要淡入的元素
* speed==>淡入速度,正整数(可选)
* opacity==>淡入到指定的透明度,0~100(可选)
*/
speed = speed || 20;
opacity = opacity || 100;
//显示元素,并将元素值为0透明度(不可见)
elem.style.display = 'block';
iBase.SetOpacity(elem, 0);
//初始化透明度变化值为0
var val = 0;
//循环将透明值以5递增,即淡入效果
(function(){
iBase.SetOpacity(elem, val);
val += 10;
if (val <= opacity+500) {
setTimeout(arguments.callee, speed);
}else{
fadeOut(iBase.Id(elem.id));
}
})();
} //淡出效果(含淡出到指定透明度)
function fadeOut(elem, speed, opacity){
/*
* 参数说明
* elem==>需要淡入的元素
* speed==>淡入速度,正整数(可选)
* opacity==>淡入到指定的透明度,0~100(可选)
*/
speed = speed || 20;
opacity = opacity || 0;
//初始化透明度变化值为0
var val = 150;
//循环将透明值以5递减,即淡出效果
(function(){
iBase.SetOpacity(elem, val);
val -= 10;
console.log(opacity)
if (val >= opacity) {
setTimeout(arguments.callee, speed);
}else if (val < 0) {
//元素透明度为0后隐藏元素
elem.style.display = 'none';
}
})();
} /* var btns = iBase.Id('demo').getElementsByTagName('input'); btns[0].onclick = function(){ }
btns[1].onclick = function(){
fadeOut(iBase.Id('fadeOut'),40);
}
btns[2].onclick = function(){
fadeOut(iBase.Id('fadeTo'), 20, 10);
}*/
$(".topic_foot_ul2").on("tap",function(){
var is = $(this);
is.find("a").toggleClass("red");
if(!($(".red")).length==0){
fadeIn(iBase.Id('fadeIn'),20,100);
console.log("1")
}else{
fadeIn(iBase.Id('fadeOut'),20,100);
} }) }

js原生实现淡入淡出的更多相关文章

  1. (38)JS运动之淡入淡出

    基本思路:使用样式filter.可是要区分IE浏览器和chrom.firefox的不同,详细也是用定时器来实现. <!DOCTYPE HTML> <!-- --> <ht ...

  2. 图片轮播(淡入淡出)--JS原生和jQuery实现

    图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...

  3. 淡入淡出效果的js原生实现

    淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...

  4. 原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)

    淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...

  5. 原生js实现简单轮播的淡入淡出效果

    实现这种淡入淡出的轮播关键在于css的一种设置  首先它不能像传统的轮播显示隐藏 或者左右浮动 他应该让其固定定位使其重叠在一起  达到这种效果  然后设置c3动画属性 transition:1s; ...

  6. js实现多个图片淡入淡出,框架

    单个淡入淡出已经写过,可以看看上几遍的博文 <style> *{ margin:0; padding:0; } div{ height:100px; width:100px; backgr ...

  7. js 淡入淡出的图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 针对淡入淡出的定时轮播效果js

    如果不使用jquery的fadeIn和fadeOut的接口和不适用animate情况下,如果要做用js实现淡入淡出轮播效果,我所想到的办法就是使用css3新特性transition(注意好兼容性). ...

  9. js淡入淡出

    示例: js淡入淡出 原理:更改css不透明数值 知识点: css不透明 filter:alpha(opacity:30); opacity:0.3;} 小技巧: 小于临界值,做加速 大于临界值,做减 ...

随机推荐

  1. TOMCAT启动时报错:the CATALINA_HOME environment variable is not defined correctly

    运行tomcat/bin目录下的startup.bat时报错:the CATALINA_HOME environment variable is not defined correctly 碰到这个问 ...

  2. Linux下安装vsftpd

    一.安装vsftpd及相关依赖包 #vsftpd安装程序 yum install vsftpd #vsftpd虚拟登陆账户必要依赖包 yum install pam* db4* 安装完之后,vsftp ...

  3. 【翻译】How To Tango With Django 1.5.4 第四章

    4.模板和静态媒体 这章讲解模板引擎 4.1使用模板 前面我们讲解了view和url 映射,创建出了django 的web页面,现在就要将模板混合进去 好的网站在布局上总是有许多重复的.django提 ...

  4. 基于docker+etcd+confd + haproxy构建高可用、自发现的web服务

    基于docker+etcd+confd + haproxy构建高可用.自发现的web服务 2016-05-16 15:12 595人阅读 评论(0) 收藏 举报 版权声明:本文为博主原创文章,未经博主 ...

  5. Hadoop学习笔记: MapReduce二次排序

    本文给出一个实现MapReduce二次排序的例子 package SortTest; import java.io.DataInput; import java.io.DataOutput; impo ...

  6. (转)MVC设计模式学习总结

    原文  : chenchun的博客 http://www.cnblogs.com/jobscn/archive/2011/11/08/2240725.html -------------------- ...

  7. 微信sdk分享,苹果手机分享到qq好友和qq空间没有反应

    最近线上程序苹果手机进行微信分享时,分享到qq好友和qq空间,无法调用分享程序,从微信跳转到qq后就没有反应了,但是安卓手机分享就没事? 解决:调用微信sdk分享时,分享的url(link)的参数不能 ...

  8. hdu 1175冒牌连连看

    #include <bits/stdc++.h> using namespace std; const int N = 1005; int arr[N][N]; int vis[N][N] ...

  9. paper 111:图像分类物体目标检测 from RCNN to YOLO

    参考列表 Selective Search for Object Recognition Selective Search for Object Recognition(菜菜鸟小Q的专栏) Selec ...

  10. ESB 中的流量控制

    ESB 中的流量控制