动画翻页效果 - J2EE论坛 - JAVA论坛

魏兴耀

来　自：江西
等　级：蝙蝠侠
威　望：3
帖　子：246
专家分：840
注　册：2009-11-9
结帖率：94.12%

楼主

已结贴√ 问题点数：20 回复次数：6

动画翻页效果

各位大哥们，帮个忙，我最进在学FLASH，书本的翻页效果怎么做啊？代码写不来啊

搜索更多相关主题的帖子: 动画　效果　

2009-11-10 14:37

gameohyes

来　自：湖南
等　级：版主
威　望：53
帖　子：1275
专家分：3629
注　册：2009-3-5

第 3 楼

得分:10

如:

程序代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. xmlns="http://www. http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">
function image(i){
    for(j=1;j<=4;j++){
    if(j==i){
        document.getElementById("Layer"+j).style.display="";
    }else{
    document.getElementById("Layer"+j).style.display="none";
    }
    }

}
</script>
<style type="text/css">
<!--
#Layer1 {
    position:absolute;
    left:13px;
    top:52px;
    width:360px;
    height:190px;
    z-index:1;
}
#Layer2 {
    position:absolute;
    left:13px;
    top:52px;
    width:362px;
    height:190px;
    z-index:2;
}
#Layer3 {
    position:absolute;
    left:13px;
    top:52px;
    width:361px;
    height:191px;
    z-index:3;
}
#Layer4 {
    position:absolute;
    left:14px;
    top:52px;
    width:360px;
    height:190px;
    z-index:4;
}
-->
</style>
</head>

<body>
<div id="Layer1"><img src="adv_1.jpg" width="360" height="190" /></div>
<div id="Layer2"><img src="adv_2.jpg" width="360" height="190"  /></div>
<div id="Layer3"><img src="adv_3.jpg" width="360" height="190"   /></div>
<div id="Layer4"><img src="adv_4.jpg" width="360" height="190" /></div>
<p><a href="#" onmousemove="image(1)" >一</a> <a href="#" onmousemove="image(2)">二</a>  <a href="# " onmousemove="image(3)">三</a> <a href="#"  onmousemove="image(4)">四</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>

C#超级群 74862681，欢迎大家的到来！

2009-11-10 18:28