同樣的作法寫法有好幾種，這只是其中。
1.首先先建立三個類別名為demo的div
裡面分別塞入一個P標籤 (->這裡的P標籤是要使用jquery計數的，如圖的1 2 3 數字，就是塞在這個P標籤裡)
然後準備三張圖隨意命名，我是分別命名為001.jpg 002.jpg 003.jpg
<div class="demo">
<p></p>
<img src="001.jpg" width="200" height="160"><br/>PHOTO1
</div>
<div class="demo">
<p></p>
<img src="002.jpg" width="200" height="160"><br/>PHOTO2
</div>
<div class="demo">
<p> </p>
<img src="003.jpg" width="200" height="160"><br/>PHOTO3
</div>
2.接下來在<head>標籤裡增加style標籤，
為class='demo'增加css樣式
(也不一定真的要放head，只是通常會放那裏)
.demo {
background-color:#FFFFFF none repeat scroll 0 0;
border:1px solid #999999;
margin:5px;
padding:5px;
position:relative;
width:210px;
height:280px;
text-align:center;
float:left;
color:#33333;
font-size:12px;
display:block;
}
3.匯入jquery的js檔
3-1. 首先要先在<head>標籤裡匯入jquery的js檔
作法同jquery官方網站引入jquery的js一樣，請在<head>標籤裡加入這行:
一定要加入這個後面才有辦法進行
<script src="http://code.jquery.com/jquery-latest.js"></script>
4.開始寫jquery
<script>
$(document).ready(function() {
//滑鼠切換底色
$('.demo').each(function()
//class名為demo的每一個(each)執行以下function
{
$(this).mouseover(function(){
$(this).css({ "background-color":"#36648B" , "color":"#FFFFFF" });
//被mouseover(被滑鼠滑過的.demo) 其css的background-color改為#33648B，文字顏色為#FFFFFF
});
$(this).mouseout(function(){
$(this).css({ "background-color":"" , "color":"#000000"});
//被mouseout(被滑鼠移出的.demo) 其css的background-color無設定，文字顏色為#000000
});
}) ;
});
</script>
5.加入P元素計數的功能
$("p").each(function(i) { $(this).text((i) + 1); });
大功告成。
跟此類功能有關的寫法可參考jquery官網，其toggle , hover. 等 都是類似功能(可搜尋關鍵字) 或是將變換時的css寫成一個class ，使用addClass和removeClass去實現，都是一樣的意思。
沒有留言:
張貼留言
若你看的文章，時間太久遠的問題就別問了，因為我應該也忘了... XD