學習筆記本

2014年8月8日星期五

【PHP】取得圖片資訊 getimagesize

取得圖片資訊：

$size = getimagesize("圖片網址");
print_r($size);
// 結果
Array ( [0] => 414 [1] => 262 [2] => 2 [3] => width="414" height="262" [bits] => 8 [channels] => 3 [mime] => image/jpeg )

說明：

0:寬度 1:長度 2:檔案類型 3:寬度及高度

2:檔案類型有：

1 = GIF，2 = JPG，3 = PNG，4 = SWF，5 = PSD，6 = BMP，7 = TIFF(intel byte order)，8 = TIFF(motorola byte order)，9 = JPC，10 = JP2，11 = JPX，12 = JB2，13 = SWC，14 = IFF，15 = WBMP，16 = XBM

2014年8月5日星期二

2014年8月4日星期一

2014年8月3日星期日

成品連結：演示

技巧1：

滑動選單基本上就在寫CSS，先用CSS寫出想要的樣子，要將子選項寫在選項當中
HTML:

  <div id="home-menu">
    <div class="title">全站分類/div>
    <div class="menu1">
      <li><a href="#"><h1>筆記型電腦</h1></a>
       <dl>
         <dt>
            <a href="#"><h2>ACER 宏碁</h2></a>
            <a href="#"><h2>ASUS 華碩</h2></a>
            <a href="#"><h2>HP 惠普</h2></a>
            <a href="#"><h2>LENOVO 聯想</h2></a>
            <a href="#"><h2>MSI 微星</h2></a>
          </dt>  
          <dt>
            <a href="#"><h2>文書上網</h2></a>
            <a href="#"><h2>輕薄時尚</h2></a>
            <a href="#"><h2>影音娛樂</h2></a>
            <a href="#"><h2>行動商務</h2></a>
            <a href="#"><h2>遊戲電競</h2></a>
            <a href="#"><h2>大尺吋</h2></a>
          </dt>
        </dl>
      </li>
      <li><a href="#"><h1>桌上型電腦</h1></a></li>
      <li><a href="#"><h1>平板電腦</h1></a></li>
      <li><a href="#"><h1>DIY 零組件</h1></a></li>
      <li><a href="#"><h1>儲存裝置</h1></a></li>
      <li><a href="#"><h1>週邊耗材</h1></a></li>
      <li><a href="#"><h1>印表機及耗材</h1></a></li>
      <li><a href="#"><h1>遊戲軟體</h1></a></li>
    </div>
  </div>

CSS:

h1,h2,h3 {
 padding:0px;
 margin:0px;
 font-weight:normal; 
}
a:link, a:visited {
 color:#5b5247;
  text-decoration: none;
}
a:hover {
 color:#5b5247;
  text-decoration: none;
}
li {
 list-style: none;
}
/****** home-menu:start ******/
#home-menu {
 width:160px;
 padding-left:10px;
 float:left;
}

#home-menu .menu1 a {
 padding-left:10px;
 list-style: none;
 margin-right:20px;
 color:#333;
 height:28px;
 padding-left:10px;
 padding-top:7px;
 display:block;
 font-size:15px;
 letter-spacing:1px;
}

#home-menu .menu1 h1 {
 font-size:15px;
}

#home-menu .title {
 border-bottom: 1px solid #999;
 height: 25px;
 color: #333;
 padding-left: 10px;
 font-weight: bold;
 margin-right:20px;
}

#home-menu .menu1 {
 padding-top:10px; 
}

#home-menu .menu1 a:hover{
 background: #A8FFFF;
}

#home-menu .line {
 border-bottom: 1px solid #999;
 margin:15px 0;
}

#home-menu .menu1 li {
 position:relative;
}

#home-menu .menu1 dl {
 position: absolute;
 top:-30px;
 left:140px;
 background-color:#FFF;
 border:1px solid #DDD;
 padding:10px 15px 5px 15px;
 min-width:160px;
 min-height:360px;
 box-shadow:2px 2px 5px #999;
 z-index:10;
 /*display:none;*/
}

#home-menu .menu1 dl a{
 margin:3px 0 0 0;
 padding:5px;
 font-size:15px;
 color:#333;
 display:block;
 height:auto;
}

#home-menu .menu1 dl h2{
 font-size:15px;
}

#home-menu .menu1 dl dd:hover{
 background: #A8FFFF;
}
/****** home-menu:end ******/

技巧2：

在把子選單隱藏，用JS讓她動

CSS：

#home-menu .menu1 dl {
 position: absolute;
 top:-30px;
 left:140px;
 background-color:#FFF;
 border:1px solid #DDD;
 padding:10px 15px 5px 15px;
 min-width:160px;
 min-height:360px;
 box-shadow:2px 2px 5px #999;
 z-index:10;
 display:none;
}

JS:

$("#home-menu .menu1 li").hover(function(){
  $(this).find("dl").show();
},function (){
  $(this).find("dl").hide();
});

2014年7月31日星期四

成品連結：演示

展示圖：

技巧一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);

2014年7月30日星期三

使用方法

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->要載入的圖片
預覽：

2014年7月12日星期六

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

2014年7月4日星期五

【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;

訂閱：文章 (Atom)

2014年8月8日 星期五

2014年8月5日 星期二

2014年8月4日 星期一

2014年8月3日 星期日

成品連結：演示

筆記型電腦

ACER 宏碁

ASUS 華碩

HP 惠普

LENOVO 聯想

MSI 微星

文書上網

輕薄時尚

影音娛樂

行動商務

遊戲電競

大尺吋

桌上型電腦

平板電腦

DIY 零組件

儲存裝置

週邊耗材

印表機及耗材

遊戲軟體

2014年7月31日 星期四

成品連結：演示

技巧一CSS：

技巧二JS：

技巧三 上方移動線條：

2014年7月30日 星期三

使用方法

2014年7月12日 星期六

2014年7月4日 星期五

2014年8月8日星期五

2014年8月5日星期二

2014年8月4日星期一

2014年8月3日星期日

2014年7月31日星期四

技巧三上方移動線條：

2014年7月30日星期三

2014年7月12日星期六

2014年7月4日星期五