【网页制作】DIV层的淡入和淡出HTML代码
发布网友
共5个回答
热心网友
把下面代码复制到你的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'},{ ration: 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);
