育將電腦工作室 - 線上書籍

網頁設計好好玩(下)
==========

### **一、官網：<http://zoomsl.sergeland.ru/example/>**

<http://zoomsl.sergeland.ru/images/fashion-054.jpg>

### **二、安裝：**

1. JAVASCRIPT  
   引入 zoomsl-3.0.js ，必須放在jquery.js的後面 ```
  <pre class="brush:as3;">
  
      <script src="class/zoomer/zoomsl-3.0.min.js"></script>
  ```
  
   ```
  <pre class="brush:as3;">
  
      <script>
         jQuery(function(){
  
            $(".my-foto").imagezoomsl({
               zoomrange: [1, 12],
               zoomstart: 4,
               innerzoom: true,
               magnifierborder: "none"
            });
         });
      </script>
  ```
2. HTML
 
 ```
<pre class="brush:as3;">

<div class="container">
      <div class="row">
        <div class="col-md-6 big-caption text-center">
          
          <img class="my-foto img-responsive" src="images/show1.jpg" data-large="images/show1.jpg" data-title="show1" data-help="滑鼠滾輪 +/-" data-text-bottom="2013/14 / 商品名稱： <span style='text-decoration:underline;color:#CC3300;'>show1</span>" alt=""  style="max-height:500px;" />

</div>
        <div class="col-md-6">

</div>
      </div>
    </div>
```

### **三、範例：[http://tncomu.890m.com/templates/show\_one/index.html](http://tncomu.890m.com/templates/show_one/index.html)**

### **四、複習：**

1. 容器使用 <span style="color:#FF0000;"> .container </span>
2. 如何將容器分為2欄
3. 如何讓圖片響應 <span style="color:#FF0000;">.img-responsive</span>
4. 響應圖片置中： <img src="" class=" center-block"> <span style="color:#FF0000;">.center-block </span>
5. 文字如何置中： <span style="color:#FF0000;">.text-center</span>

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown