【网页制作】DIV层的淡入和淡出HTML代码
就是我希望刚进网页的时候淡入一个层,5秒后淡出再也不出现。淡入淡出就是透明度由0到100的那种(最好是那种同时伴有从上向下的,没有也无所谓~)我网上查了很多,不是有按钮手...
就是我希望刚进网页的时候淡入一个层,5秒后淡出再也不出现。淡入淡出就是透明度由0到100的那种(最好是那种同时伴有从上向下的,没有也无所谓~)我网上查了很多,不是有按钮手动的,就是重复出入停不下来的。我又改不来~请高手帮忙~谢谢!!
展开
4个回答
展开全部
把下面代码复制到你的dw中,然后根据提示自行添加引用的js库,输出html文件即可。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{ background:#D7FFF7;}
div{ background:#0080FF; width:500px; height:200px; padding:20px; color:#fff; display:none;}
</style>
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").animate({marginTop:100, opacity:'show'},{ duration: 5000 }).fadeOut(5000);
});
</script>
</head>
<body>
<div>
<h3>淡入淡出</h3>
<p>利用jquery进行控制,实现div层的淡入淡出。</p>
<p>这里js控制的三个数值,第一个为从上往下移动的距离,第二个为淡入时间,第三个为淡出时间,这三个时间可以根据自己需要自行调整。</p>
<p>src="js/jquery-1.3.1.js"这个为调用的jquery库,可以在网上下载到,最新版本为jquery-1.4.2.js,路径根据自己实际情况进行调整</p>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{ background:#D7FFF7;}
div{ background:#0080FF; width:500px; height:200px; padding:20px; color:#fff; display:none;}
</style>
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").animate({marginTop:100, opacity:'show'},{ duration: 5000 }).fadeOut(5000);
});
</script>
</head>
<body>
<div>
<h3>淡入淡出</h3>
<p>利用jquery进行控制,实现div层的淡入淡出。</p>
<p>这里js控制的三个数值,第一个为从上往下移动的距离,第二个为淡入时间,第三个为淡出时间,这三个时间可以根据自己需要自行调整。</p>
<p>src="js/jquery-1.3.1.js"这个为调用的jquery库,可以在网上下载到,最新版本为jquery-1.4.2.js,路径根据自己实际情况进行调整</p>
</div>
</body>
</html>
展开全部
非得要纯html吗?可以用blockUI实现遮蔽层,加一个js文件就可以,自己定义div里面的东西。淡入淡出非常好用
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
那么使用jquery中的fadein等方法就可以了
$('#foo').slideUp(300).delay(800).fadeIn(400);
用animate方法改变透明度
$('#foo').slideUp(300).delay(800).fadeIn(400);
用animate方法改变透明度
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
$('#foo').slideUp(300).delay(800).fadeIn(400);
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询