August 16, 2012
點擊在新視窗中瀏覽此圖片

使用CSS需要寫一大串將footer的部份固定在最下方,但jQuery提供了很方便的方式

使用方式如下:
1.下載並放置於伺服器的適當path
下載相關檔案
這個檔案只能在登入之後下載。請先 註冊登入


2.html head 中要加:
<script type="text/javascript" src="js/footerFixed.js"></script>


3.在html div的 footer部份中再寫入:
<div id=footer></div>


demo:
http://blog.apao.idv.tw/sample/footerFixed/





February 1, 2012
點擊在新視窗中瀏覽此圖片

#id名 {
  width:296px;
  height:130px; //半分の高さ
  position:relative;
  overflow:hidden;
}


JavaScript為以下的寫法
February 1, 2012
點擊在新視窗中瀏覽此圖片

<style>  
ul {list-style:none;margin:0;padding:0;}
li {float:left;width:100px;line-height:25px;height:25px;margin:0;padding:0;text-align:center;}
li a {background:url(背景圖片) repeat 0 0;display:block;padding:5px 10px;color:#FFF;text-decoration:none;border-right:1px solid #FFF;}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.bgpos.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('li a')
    .css( {backgroundPosition: "-20px 35px"} ) //デフォルト時、背景画像を横-20px、縦35pxに指定。
    .mouseover(function(){
      $(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
      //マウスオーバー時に縦位置94pxに0.5秒かけて移動
    })
    .mouseout(function(){
      $(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
      //マウスアウト時に横位置40px、縦位置35pxに2秒かけて移動
        $(this).css({backgroundPosition: "-20px 35px"})
        //移動完了後、元の位置に戻す
      }})
  })
});
</script>


html中放置
<ul id="demo">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>


備註:詳細可參考demo中CSS ID+Script的作法,可分好幾種動畫。

  $('#a a')
    .css( {backgroundPosition: "-20px 35px"} )
    .mouseover(function(){
      $(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
    })
    .mouseout(function(){
      $(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
        $(this).css({backgroundPosition: "-20px 35px"})
      }})
    })


出處:
http://snook.ca/technical/jquery-bg/

參考:
http://www.skuare.net/test/jBgpos.html

demo:
http://apao.zapto.org/~apao/jQuery/Background_Position/
February 1, 2012
點擊在新視窗中瀏覽此圖片

下載以下各個.js後,放入[head]~[/head]之間
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="jquery.flashyNav.1.0.js"></script>

<script type="text/javascript">
$(function(){
  
  $('.nav1').flashyNav({
    rolloverColor: '#5400ff',  //the default color of the rollover element
    rolloverDuration: 1000,  //the default duration for the rollover
    easingMethod: 'easeInOutQuint'  //easing method used for animation
  });
  
  $('.nav2').flashyNav({
    rolloverColor: '#00d2ff',  //the default color of the rollover element
    rolloverDuration: 800,  //the default duration for the rollover
    easingMethod: 'easeOutBounce'  //easing method used for animation
  });

  $('.nav3').flashyNav({
    rolloverColor: '#a800ff',  //the default color of the rollover element
    rolloverDuration: 800,  //the default duration for the rollover
    easingMethod: 'easeOutElastic'  //easing method used for animation
  });
  
});
</script>

<style type="text/css">
  
  * {margin:0; padding:0}
  body {background: #000; color:#fff; margin:20px; font-family:Arial, Helvetica, sans-serif; font-size:11px}
  a {color:#fff}
  
  ul.nav {list-style:none; margin:20px; width:300px; font-size:10px; font-family:Arial, Helvetica, sans-serif; font-weight:bold}
  ul.nav li {position:relative; border-bottom:1px solid #333; display:block; height:30px; overflow:hidden}
  ul.nav li a {position:relative; color:#fff; text-decoration:none; display:block; height:20px; padding:10px 0 0 10px; z-index:100; text-transform:uppercase}
  
</style>
January 2, 2012
點擊在新視窗中瀏覽此圖片

jQuery WebTicker 下載 jquery.webticker.js
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.webticker.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("#id名").webTicker({
      travelocity: 0.1, //速度
      direction: 1, //-1で逆向
  })
});
</script>

また、CSS內容記載如下
<style>
.tickercontainer {  //電子看板的大小設定
width: 500px;
height: 27px;
margin: 0;
padding: 0;
overflow: hidden;
}

.tickercontainer .mask {
position: relative;
top: 8px;
height: 18px;
overflow: hidden;
}

ul.newsticker {
position: relative;
list-style-type: none;
margin: 0;
padding: 0;}

ul.newsticker li {
float: left;
margin: 0;
padding-right: 15px; //要素間的余白
}
</style>

剩下紀錄於HTML中
<ul id="id名">
  <li>1</li>
  <li>2</li>
  <!-- 以下個数分 -->
</ul>


下載:
下載相關檔案

下載相關檔案
October 20, 2011
建立了粉絲專業後,我們就會有看到以下的內容,
前提是你要建立以下資料:

粉絲專頁>編輯專頁>基本資料>短網址

點擊在新視窗中瀏覽此圖片


粉絲團設定成功,就會出現以下的畫面:
分頁: 8/13 第一頁 上頁 3 4 5 6 7 8 9 10 11 12 下頁 最後頁
[ 顯示模式: 摘要 | 清單 ]