实验四 jQuery动画效果
【实验目的】
1、掌握jQuery处理动画效果的方法；
2、掌握jQuery动画的显示与隐藏、淡入淡出、滑动效果的常用方法；
3、掌握jQuery自定义动画的定义。
【实验准备】
1、复习教材相关内容；
2、预习本次实验；
【实验内容】
1、实现折叠菜单的效果，效果如图4-1所示。
图4-1
<title>无标题文档</title>
<style type="text/css">
.mainleftFAQ {
width: 150px;
}
.admintext11 {
padding: 8px 10px;
cursor: pointer;
position: relative;
margin:1px;
font-weight:bold;
background: #93cdff;
font-family: "华文楷体";
font-size: 20px;
}
.FAQlist {
display:none;
font-family: "新宋体";
font-size: 14px;
}
.FAQlist a
{
padding:8px 0px;
display:block;
color:#006699;
background-color:#EFEFEF;
padding-left:10px;
font-weight:bold;
text-decoration:none;
}
.FAQlist a:hover {
color:#7fb2f4;
background-color:#dfdfdf;
text-decoration:underline;
}
</style>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
//将二级菜单设置为不可见
$(".FAQlist").hide();
//单击一级菜单触发的事件
$(".bartitleFAQ").click(function () {
//将二级菜单全部设置为不可见
$(".FAQlist").hide();
//当前一级菜单的二级菜单设置为可见
$(this).next().show("fast");
})
})
</script>
</head>
<body>
<div class="mainleftFAQ">
<div class="bartitleFAQ"><p class="admintext11">服务管理</p></div>
<div class="FAQlist">
<a href=''> 等待提交</a>
<a href='' title=''> 等待发布</a>
</div>
<div class="bartitleFAQ"><p class="admintext11">更新流程</p></div>
<div class="FAQlist">
<a href=''> 后台搜索</a>
<a href=''> 更新流程</a>
</div>
<div class="bartitleFAQ"><p class="admintext11">下载管理</p></div>
<div class="FAQlist">
<a href=''> 下载</a>
</div>
</div>
</body>
2、实现图片的幻灯片效果，当在当前图片上单击时，显示下一张图片。其效果如图4-2所示。jquery在线图片
图4-2
<title>无标题文档</title>
<style type="text/css">
.imge{
position:absolute;
top:10px;
left:10px;}
</style>
<script type="text/javascript" src="../jquery-1.4.2.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
//所有图片隐藏
$(".imge").hide();
//第一张图片淡入
$(".imge").first().fadeIn();
//单击事件（当前图片淡出，下一张图片淡入）
//注：最后一张图片的判断
//禁止跳转
$(".imge").click(function(){
var next=$(this).next().length?$(this).next():$(".imge:first");
$(this).fadeOut();
next.fadeIn();
return false;
});
})
</script>
</head>
<body>
<a class="imge" href=""><img src="image/1.jpg" width="400px" height="300px" /></a>
<a class="imge" href=""><img src="image/2.jpg" width="400px" height="300px" /></a>
<a class="imge" href=""><img src="image/3.jpg" width="400px" height="300px" /></a>
<a class="imge" href=""><img src="image/4.jpg" width="400px" height="300px" /></a>
<a class="imge" href=""><img src="image/5.jpg" width="400px" height="300px" /></a>
</body>
3、实现一组图片的水平滚动，当鼠标悬停时图片停止滚动。效果如图4-3所示。
图4-3
<title>无标题文档</title>
<style type="text/css">
#scroller{
position:relative;
height:150PX;
width:460px;
overflow:hidden;
margin:auto;}
#images{
width:800px;}
#images a img{ border:0; position:relative;}
</style>
<script type="text/javascript" src="../jquery-1.4.2.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
var $wapper=$("#images a img");
$wapper.css({left:0});
var animator=function(imgblock){
imgblock.animate({left:-800},8000,function(){
$wapper.css({left:450});
animator($(this));
});
}
animator($wapper);
$wapper.hover(function(){
$wapper.stop();
},function(){
animator($wapper);
});
})
</script>
</head>
<body>
<div id="scroller" >
<div id="images">
<a class="imge" href=""><img src="image/5.jpg" width="150px" height="150px" /></a>
<a class="imge" href=""><img src="image/2.jpg" width="150px" height="150px" /></a>
<a class="imge" href=""><img src="image/3.jpg" width="150px" height="150px" /></a>
<a class="imge" href=""><img src="image/4.jpg" width="150px" height="150px" /></a>
<a class="imge" href=""><img src="image/1.jpg" width="150px" height="150px" /></a>
</div>
</div>
</body>
4、实现图片的广告页效果，当点击相应的图片索引时，切换显示相应图片。其效果如图4-4所示。
图4-4
<title>无标题文档</title>
<link rel="stylesheet" href="styles/main.css" type="text/css" />
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论