<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event</title>
<style>
*{margin: 0px;}
body{
width: 610px;
margin-top: 35px;
margin-right: auto;
margin-left: auto;
margin-bottom: 50px;
text-align: center;
font-size: 154%;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
}
#contant{background-color: #999966;
display:none;
}
</style>
<script src="jquery-2.1.4.js"></script>
<script>
$(document).ready(function(){
//alert(123)
//動畫設置
//.slideDown()
//.slideUp()
//.slideToggle()
$("a").click(function(e){
var obj=$(e.currentTarget).attr("name")
// alert(obj)
switch(obj){
case "slide001":
$("#contant").slideDown("slow")
break;
case "slide002":
$("#contant").slideUp("slow")
break;
case "slide003":
$("#contant").slideToggle("slow")
break;
}
})
})
</script>
</head>
<body>
<a href="javascript:;" name="slide001">slideDown滑下</a>
<a href="javascript:;" name="slide002">SlideUp滑上</a>
<a href="javascript:;" name="slide003">SlideToggle滑動開關</a>
<hr/>
<div id="contant"><img src="pit/pit_show_08.jpg" alt="動畫說明" title="動畫說明"/></div>
</body>
</html>
沒有留言:
張貼留言