jquery實作簡單易懂的圖片展示小範例_jquery

HTML程式碼：

複製程式碼程式碼如下：

1

;

2

;

3

;

4

;

身體> JS程式碼：

複製程式碼


程式碼如下：



$(document).ready(function(){
$("#box0").click(function(){
//$("#imgCon").slideUp(4200 );
$("#imgCon").animate({top:'-225px'},"slow");
$("#box1").click(function(){
$ ("#imgCon").animate({top:'-450px'},"slow");
$("#box2").click(function(){
$("#imgCon") .animate({top:'-675px'},"slow");
$("#box3").click(function(){
$("#imgCon").animate({top: '-900px'},"慢")
});
腳本>

CSS：程式碼：

複製程式碼

程式碼如下：

.box{
寬度：40px;
高度：20px;
邊框：1px實心#000;
浮動：左；
遊標：指針；
}
#imgCon img{
顯示：塊；
填充🎜>填充：0;
保證金：0;
寬度：360px；
高度：225px;
}
樣式>