如何在HTML5中实现文字淡出淡入
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在HTML5中实现文字淡出淡入相关的知识，希望对你有一定的参考价值。
参考技术A 你把底下这段代码运行下：<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function()
$("button").click(function()
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
);
);
</script>
</head>
<body>
<p>演示带有不同参数的 fadeToggle() 方法。</p>
<button>点击这里，使三个矩形淡入淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</body>
</html>追问
可不可以用CSS
本回答被提问者采纳文字淡入淡出详解
实现方法：字符串的拼接
1.将文字写入盒子里，设置文字淡入淡出实质是指盒子的透明效果
2.获取盒子id
3.为盒子设置透明变量值i
4.区分ie浏览器及其他浏览器透明度设置
5.判断透明度自增与自减值
6.如果i<100实现自增，否则实现自减，但是有部分值既在自增又在自减
7.设置标志，使中间自增与自减的部分区分开
8.设置定时器
<!-- 实现淡入淡出效果代码部分 -->
<div id="box">This is a fade text</div>
<script>
var i=1;
var flag=true;
function fade(){
var box=document.getElementById(‘box‘);
if(document.all){
box.style.filter="alpha(opacity=‘+i+‘)";
}else{
box.style.opacity=parseFloat(i/100);
}
if(i<100 && flag){
i+=5;
}
else{
flag=false;
}
if(i>0 && !flag){
i-=5;
}
else{
flag=true;
}
setTimeout(‘fade()‘,200);
}
fade();
</script>
以上是关于如何在HTML5中实现文字淡出淡入的主要内容，如果未能解决你的问题，请参考以下文章