编程 Javascript

原生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 相关文章推荐

JavaScript聚焦于第一个字段的代码

Oct 15 Javascript

js关闭子窗体刷新父窗体实现方法

Dec 04 Javascript

jQuery中[attribute]选择器用法实例

Dec 31 Javascript

理解javascript中的严格模式

Feb 01 Javascript

jQuery插件扩展extend的简单实现原理

Jun 24 Javascript

JS实现点击表头表格自动排序（含数字、字符串、日期）

Jan 22 Javascript

Vue.js实战之通过监听滚动事件实现动态锚点

Apr 04 Javascript

使用JS实现导航切换时高亮显示的示例讲解

Aug 22 Javascript

Puppeteer 爬取动态生成的网页实战

Nov 14 Javascript

用VueJS写一个Chrome浏览器插件的实现方法

Feb 27 Javascript

Vue+iview+webpack ie浏览器兼容简单处理

Sep 20 Javascript

JS三级联动代码格式实例详解

Dec 30 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