原生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 相关文章推荐
基于jquery的设置页面文本框 只能输入数字的实现代码
Apr 19 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
Aug 02 Javascript
动态加载script文件的两种方法
Aug 15 Javascript
jQuery中replaceWith()方法用法实例
Dec 25 Javascript
js选项卡的实现方法
Feb 09 Javascript
JS实现弹性菜单效果代码
Sep 07 Javascript
jquery attr()设置和获取属性值实例教程
Sep 25 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
Mar 14 Javascript
javascript观察者模式实现自动刷新效果
Sep 05 Javascript
vuex 动态注册方法 registerModule的实现
Jul 03 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
May 06 Javascript
原生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
配置最新的PHP加MYSQL服务器
2006/10/09 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
php5.3提示Function ereg() is deprecated Error问题解决方法
2014/11/12 PHP
PHP超牛逼无限极分类生成树方法
2015/05/11 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
解决在laravel中auth建立时候遇到的问题
2019/10/15 PHP
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
2009/08/03 Javascript
基于jquery实现的服务器验证控件的启用和禁用代码
2010/04/27 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
2015/07/18 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
2015/08/31 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
2016/10/05 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
2017/05/12 Javascript
angularjs实现table增加tr的方法
2018/02/27 Javascript
浅析JS中什么是自定义react数据验证组件
2018/10/19 Javascript
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
[02:19]DOTA2上海特级锦标赛 观赛指南 Spectator Guide
2016/02/04 DOTA
[01:15:29]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第三局
2016/03/04 DOTA
Python Requests安装与简单运用
2016/04/07 Python
Tornado 多进程实现分析详解
2018/01/12 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
HTML5的新特性(1)
2016/03/03 HTML / CSS
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
英国天然宝石首饰购买网站:Gemondo Jewellery
2018/10/23 全球购物
Probikekit欧盟:在线公路自行车专家
2019/07/12 全球购物
药学专业学生的自我评价分享
2014/02/06 职场文书
护士长竞聘演讲稿
2014/04/30 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
房地产销售主管岗位职责
2015/02/13 职场文书
通知函的格式
2015/04/27 职场文书
教师工作证明范本
2015/06/12 职场文书
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android