【Jquery】排行榜 (跳過中間順序)

成品連結：演示

展示圖：

技巧一CSS：

下方商品區因為換頁簽不會滑過中間頁簽
所以寫CSS需用到：position:relative; position: absolute; overflow:hidden;
將第一個放到要顯示的框框裡，其餘的放到看不到的地方

#rank-area-1 .rank-detail {
 margin-top:10px;
 position:relative;
 width:703px;
 height:405px;
 overflow:hidden;
}
#rank-area-1 .content{
 position:absolute;
 top:0px;
 left:703px;
 width:703px;
 height:405px;
}

#rank-area-1 .content:first-child{
 left:0px;
}

技巧二JS：

原理是當滑鼠移過，先判斷要往左還是右
找出下一個頁面放到左邊或右邊
然後兩個區塊同時移動

// 判斷往左往右
if ($selectArea.index() > $currArea.index()){
  $selectArea.css('left',$randWidth);
  $currArea.animate({left:"-="+$randWidth},500);
  $selectArea.animate({left:"-="+$randWidth},500);
}else{
  $selectArea.css('left',$randWidth*-1);
  $currArea.animate({left:"+="+$randWidth},500);
  $selectArea.animate({left:"+="+$randWidth},500);
}

技巧三 上方移動線條：

原理：當滑鼠移到自上方，取得距離原點距離，用animate做移動

$lineMove = $("#rank-area-1 i[kid="+$selectKid+"]").position().left + 5;
  $lineWidth = $("#rank-area-1 i[kid="+$selectKid+"]").outerWidth();
  $("#rank-area-1 .line").animate({left:$lineMove,width:$lineWidth},500);

【Jquery】Lazy Load 圖片延遲載入

使用方法

1.先到 官網 將下載檔案

2.引入檔案

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.lazyload.js"></script>

3.Javascript 部分

$(function (){
 $(".imgload").lazyload();
});

* $(".imgload") 代表所有class=imgload都適用

4.圖片部分

<img class="imgload" data-original="http://7311.tw/style/snp01/image/banner-1.jpg" src="http://7311.tw/style/snp01/image/imgload.jpg" />

* src->可以是載入的圖片, data-original->要載入的圖片
預覽：

【apahce】log檔分日期設定

ErrorLog "|C:/www/apache2.2/bin/rotatelogs.exe C:/www/apache2.2/logs/error_%Y_%m_%d.log 86400 480"

CustomLog "|C:/www/apache2.2/bin/rotatelogs.exe C:/www/apache2.2/logs/access_%Y_%m_%d.log 86400 480" common

【CSS】position:fixed 固定

.fixed-top { position:fixed; bottom:auto; top:0px; } // 頭部固定
.fixed-bottom { position:fixed; bottom:0px; top:auto; } // 底部固定
.fixed-left { position:fixed; right:auto; left:0px; } // 左側固定
.fixed-right { position:fixed; right:0px; left:auto; } // 右側固定

【CSS】連續圖片去除空隙

加上display:block;