原生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>
相关文章
本文主要介绍了微信小程序实现触底加载与下拉刷新的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
这篇文章主要为大家详细介绍了基于javascript实现移动端轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
flash 得到自身url参数的代码，需要的朋友可以参考下。2009-11-11
这篇文章主要为大家详细介绍了js实现签到日历，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
下面小编就为大家带来一篇禁用backspace网页回退功能的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
Javascript验证Visa和MasterCard信用卡号的方法
这篇文章主要介绍了Javascript验证Visa和MasterCard信用卡号的方法,涉及javascript正则验证的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
对于js中的对象的深拷贝在项目的开发中比较常用到,本文就来介绍一下JS深拷贝的4种实现方法,具有一定的参考价值,感兴趣的可以了解一下2023-10-10
关于js复制内容到浏览器剪贴板报错：Cannot read properties of&n
这篇文章主要给大家介绍了关于js复制内容到浏览器剪贴板报错：Cannot read properties of undefined (reading ‘writeText‘)的解决方案,文中给出了详细的原因分析和解决方案,需要的朋友可以参考下2024-01-01
这篇文章主要为大家详细介绍了BootStrap整体框架之基础布局组件的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了动态载入js提高网页打开速度的方法,需要的朋友可以参考下2014-07-07
最新评论