原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)


Posted in Javascript onJune 24, 2013

经常看到网页里图片渐变显示,自己写一个。
原理很简单就是修改元素的css透明度。
在线预览效果:http://jsfiddle.net/dtdxrk/BHUp9/embedded/result/

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>原生Js元素渐隐/渐显方法</title> 
</head> 
<body> 
<button id="show">渐显</button> 
<button id="hiden">渐隐</button> 
<img src="http://images.cnitblog.com/blog/150659/201306/20171658-303d375a1ec740e29a567b269d6297f1.jpg" id="img"> 
<script type="text/javascript"> 
function alphaPlay(obj,method){ //method有两个值show或hiden 
var n = (method == "show") ? 0 : 100, 
ie = (window.ActiveXObject) ? true : false; 
var time = setInterval(function(){ 
if(method == "show"){ 
if(n < 100){ 
n+=10; 
if(ie){ 
obj.style.cssText = "filter:alpha(opacity="+n+")"; 
}else{ 
(n==100) ? obj.style.opacity = 1 : obj.style.opacity = "0."+n; 
} 
}else{ 
clearTimeout(time); 
} 
}else{ 
if(n > 0){ 
n-=10; 
if(ie){ 
obj.style.cssText = "filter:alpha(opacity="+n+")"; 
}else{ 
obj.style.opacity = "0."+n; 
} 
}else{ 
clearTimeout(time); 
} 
} 
},30); 
} 
var img = document.getElementById("img"); 
document.getElementById("show").onclick = function(){ 
alphaPlay(img,"show"); 
} 
document.getElementById("hiden").onclick = function(){ 
alphaPlay(img,"hiden"); 
} 
</script> 
</body> 
</html>
Javascript 相关文章推荐
脚本收藏iframe
Jul 21 Javascript
从Ajax到JQuery Ajax学习
Feb 14 Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
Dec 28 Javascript
跟我学习javascript解决异步编程异常方案
Nov 23 Javascript
微信小程序 for 循环详解
Oct 09 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
Feb 08 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
Dec 15 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
Dec 04 Javascript
JS实现水平移动与垂直移动动画
Dec 19 Javascript
vue如何使用rem适配
Feb 06 Vue.js
原生Js页面滚动延迟加载图片实现原理及过程
Jun 24 #Javascript
jquery可见性过滤选择器使用示例
Jun 24 #Javascript
jquery子元素过滤选择器使用示例
Jun 24 #Javascript
struts2+jquery+json实现异步加载数据(自写)
Jun 24 #Javascript
通过javascript获取iframe里的值示例代码
Jun 24 #Javascript
javascript实现焦点滚动图效果 具体方法
Jun 24 #Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
Jun 24 #Javascript
You might like
攻克CakePHP系列一 连接MySQL数据库
2008/10/22 PHP
php 生成静态页面的办法与实现代码详细版
2010/02/15 PHP
PHP迭代器实现斐波纳契数列的函数
2013/11/12 PHP
php自定义的格式化时间示例代码
2013/12/05 PHP
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
php通过array_merge()函数合并两个数组的方法
2015/03/18 PHP
php实现图片等比例缩放代码
2015/07/23 PHP
thinkPHP5.0框架开发规范简介
2017/03/25 PHP
javascript  Error 对象 错误处理
2008/05/18 Javascript
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
深入分析Javascript事件代理
2016/01/30 Javascript
javascript实现在网页中运行本地程序的方法
2016/02/03 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
2017/06/20 Javascript
详解微信第三方小程序代开发
2017/06/23 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
2018/01/08 jQuery
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
2018/05/28 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
详解puppeteer使用代理
2018/12/27 Javascript
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
[25:45]2018DOTA2亚洲邀请赛4.5SOLO赛 Sylar vs Paparazi
2018/04/06 DOTA
Python写的一个简单监控系统
2015/06/19 Python
Python实现加载及解析properties配置文件的方法
2018/03/29 Python
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
Python监听剪切板实现方法代码实例
2020/11/11 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
澳大利亚最好的电动自行车:Leon Cycle
2020/12/19 全球购物
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
物业工作计划书
2014/01/10 职场文书
数控技术学生的自我评价
2014/02/15 职场文书
违反工作纪律检讨书
2014/02/15 职场文书
月度优秀员工获奖感言
2014/08/16 职场文书
小学德育工作总结2015
2015/05/12 职场文书