原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
更新时间:2013年06月24日 16:44:57 作者:
大家经常看到网页里图片渐变显示,自己写一个。原理很简单就是修改元素的css透明度,具体实现代码如下,感兴趣的各位可以参考下哈,希望对大家有所帮助
经常看到网页里图片渐变显示,自己写一个。
原理很简单就是修改元素的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>
原理很简单就是修改元素的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>
相关文章
firefox TBODY 用js显示和隐藏时出现错位的解决方法
今天帮别人写一个网页,发现:当用javascript动态设置tr.style.display = "block"显示某行时,使用IE浏览没有问题,但使用firefox浏览时该行被移到了其它行的后面,很是诧异。2008-12-12javascript attachEvent和addEventListener使用方法
attachEvent与addEventListener区别 适应的浏览器版本不同,同时在使用的过程中要注意2009-03-03firefox下对ajax的onreadystatechange的支持情况分析
firefox下对ajax的onreadystatechange的支持分析。用的到的朋友可以参考下。2009-12-12
最新评论