線上書籍

Home

網頁設計好好玩(下)

一、官網：http://zoomsl.sergeland.ru/example/

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

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

     

  2. HTML
<div class="container"> <div class="row"> <div class="col-md-6 big-caption text-center"> <!-- .zoom --> <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 四、複習：
  1. 容器使用  .container 
  2. 如何將容器分為2欄
  3. 如何讓圖片響應  .img-responsive 
  4. 響應圖片置中： <img src="" class="  center-block"> .center-block 
  5. 文字如何置中： .text-center