JS改变图片透明度
如下代码，我想实现从无到有从有到无的变化，可是图片却一直不能显示出来，用alert查了图片的透明度发现一直为0，想问问是哪里错了.<html><head></head><...
如下代码，我想实现从无到有从有到无的变化，可是图片却一直不能显示出来，用alert查了图片的透明度发现一直为0，想问问是哪里错了.
<html>
<head>
</head>
<body>
<img id="haha" src="1.jpg">
<script>
window.onload=change();
var c=true;
function change()
{
var pic=document.getElementById("haha");
if(pic.style.opacity==1)
{
pic.style.opacity=pic.style.opacity-0.05;
c=false;
}
else if(pic.style.opacity==0)
{
pic.style.opacity=pic.style.opacity+0.05;
c=true;
}
else if(pic.style.opacity>0&&c==true)
{
pic.style.opacity=pic.style.opacity+0.05;
}
else(pic.style.opacity<1&&c==false)
{
pic.style.opacity=pic.style.opacity-0.05;
}
setTimeout("change()",100);
}
</script>
</body>
</html> 展开
<html>
<head>
</head>
<body>
<img id="haha" src="1.jpg">
<script>
window.onload=change();
var c=true;
function change()
{
var pic=document.getElementById("haha");
if(pic.style.opacity==1)
{
pic.style.opacity=pic.style.opacity-0.05;
c=false;
}
else if(pic.style.opacity==0)
{
pic.style.opacity=pic.style.opacity+0.05;
c=true;
}
else if(pic.style.opacity>0&&c==true)
{
pic.style.opacity=pic.style.opacity+0.05;
}
else(pic.style.opacity<1&&c==false)
{
pic.style.opacity=pic.style.opacity-0.05;
}
setTimeout("change()",100);
}
</script>
</body>
</html> 展开
展开全部
//淡入效果(含淡入到指定透明度)
function fadeIn(elem, speed, opacity){
/*
* 参数说明
* elem==>需要淡入的元素
* speed==>淡入速度,正整数(可选)
* opacity==>淡入到指定的透明度,0~100(可选)
*/
speed = speed || 20;
opacity = opacity || 100;
//显示元素,并将元素值为0透明度(不可见)
elem.style.display = 'block';
iBase.SetOpacity(elem, 0);
//初始化透明度变化值为0
var val = 0;
//循环将透明值以5递增,即淡入效果
(function(){
iBase.SetOpacity(elem, val);
val += 5;
if (val <= opacity) {
setTimeout(arguments.callee, speed)
}
})();
}
//淡出效果(含淡出到指定透明度)
function fadeOut(elem, speed, opacity){
/*
* 参数说明
* elem==>需要淡入的元素
* speed==>淡入速度,正整数(可选)
* opacity==>淡入到指定的透明度,0~100(可选)
*/
speed = speed || 20;
opacity = opacity || 0;
//初始化透明度变化值为0
var val = 100;
//循环将透明值以5递减,即淡出效果
(function(){
iBase.SetOpacity(elem, val);
val -= 5;
if (val >= opacity) {
setTimeout(arguments.callee, speed);
}else if (val < 0) {
//元素透明度为0后隐藏元素
elem.style.display = 'none';
}
})();
}
var btns = document.getElementById('demo');
btns.onclick = function(){
fadeIn(btns);
}
btns.onclick = function(){
fadeOut(btns,40);
}
<p id="demo" style="width:300px;height:300px;background:#f00;">淡入淡出</p>
试试吧
追问
别复制网上的啊，这些我都看过。我只是想知道我写的这个为什么不可以，而且我后来也试过给图片在css中加透明属性，还是不行。
追答
你用谷歌浏览器开发模式就可以看到你的代码 最开始的时候图片透明度就是负的。。。。。你的if判断很多都有逻辑错误。安你的代码给你整理一下思路。
var pics= document.getElementById("haha");
window.onload=vchange();
var fa=0;
var val=1;
function vchange(){
if(fa==0){
pics.style.opacity=val;
val-=0.01;
if(val<=0){
fa=1;
}
}else{
pics.style.opacity=val;
val+=0.01;
if(val==1){
fa=0;
}
}
setTimeout("vchange()",100);
}
已赞过
已踩过<
你对这个回答的评价是？
博思aippt
2024-07-20 广告
博思AIPPT是基于ai制作PPT的智能在线工具，它提供了4种AI制作PPT的方式，包括AI生成大纲、AI直接生成PPT、文本生成PPT、AI提炼word文档生成PPT，一站式集成多种AI生成PPT的方式，可满足办公用户的不同需求和使用场景...
点击进入详情页
本回答由博思aippt提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
