首先要用到dw软件
这里是头部的书写方式
这个地方是body的书写格式
整个代码的书写就是这样了，如果图片还不够清楚的话，我吧代码复制给你，方便 *** 作
<!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><!-- 这里是3个方块的淡出淡入效果 -->
<div id="div1" style="width:80pxheight:80pxbackground-color:red"></div>
<br>
<div id="div2" style="width:80pxheight:80pxbackground-color:green"></div>
<br>
<div id="div3" style="width:80pxheight:80pxbackground-color:blue"></div>
</body>
</body>
</html>
5.最后的实际效果，从浓到淡。
你把底下这段代码运行下：<!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:80pxheight:80pxbackground-color:red"></div>
<br>
<div id="div2" style="width:80pxheight:80pxbackground-color:green"></div>
<br>
<div id="div3" style="width:80pxheight:80pxbackground-color:blue"></div>
</body>
</body>
</html>
把下面代码复制到你的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/htmlcharset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{ background:#D7FFF7}
div{ background:#0080FF width:500pxheight:200pxpadding:20pxcolor:#fffdisplay: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>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）