點擊 文字之前
點擊後 載入圖片
my_style.css
#clickMe{
background: #d8b36b;
padding: 20px;
text-align: center;
width: 205px;
display: block;
border: 2px solid #000;
}
#picframe{
background: #d8b36f;
padding: 20px;
width: 205px;
display: none; //隱藏圖片
border: 2px solid #000;
}
test1.html
<html>
<head>
<title>test1</title>
<link rel="stylesheet" type="text/css" href="my_style.css">
</head>
<body>
<div id="clickMe">show me the picture</div>
<div id="picframe">
<img src="1669071126.jpg" />
</div>
<script src="jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("#clickMe").click(function(){
$("img").fadeIn(1000);
$("#picframe").slideToggle("slow");
});
});
</script>
</body>
</html>
完成範例
沒有留言:
張貼留言