<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event</title>
<style>
*{
margin: 0px;
text-align: center;
color: #B1430A;
font-style: oblique;
font-variant: small-caps;
font-weight: bolder;
font-size: 125%;
line-height: 130%;
}
body{
margin-top: 37px;
margin-left: auto;
margin-bottom: 73px;
text-align: center;
}
#contant{
background-color:#0090CC;
/*display:none;*/
}
</style>
<script src="jquery-2.1.4.js"></script>
<script>
$(document).ready(function(){
//alert(123)
//動畫設置
//.fadeIn()
//.fadeOut()
//.fadeTo()
//.fadeToggle()
//.hide()
//.show()
$("#contant").hide();
$("a[name=show]").click(function(e){
$("#contant").show()
})
$("a[name=hide]").click(function(e){
$("#contant").hide()
})
$("a[name=fadeIn]").click(function(e){
$("#contant").fadeIn("slow")
})
$("a[name=fadeOut]").click(function(e){
$("#contant").fadeOut(2000)
})
$("a[name=fadeToggle]").click(function(e){
$("#contant").fadeToggle(2000)
})
$("a[name=fadeTo]").click(function(e){
$("#contant").fadeTo(1000,0.5)
})
})
</script>
</head>
<body>
<a name="show" href="javascript:;">show(顯示)</a>
<a name="hide" href="javascript:;">hide( 隱藏)</a>
<a name="fadeIn" href="javascript:;">fadeIn(淡入)</a>
<a name="fadeOut" href="javascript:;">fadeOut(淡出)</a>
<a name="fadeToggle" href="javascript:;">fadeToggle(淡化開關)</a>
<a name="fadeTo" href="javascript:;">fadeTo(自訂淡化)</a>
<hr/>
<div id="contant">
<img src="Pt/pit_show_04.jpg" alt="動畫說明" width="700" height="397" title="動畫說明"/></div>
</body>
</html>
沒有留言:
張貼留言