流浪異鄉的學習日記: jQuery

顯示具有 jQuery 標籤的文章。顯示所有文章

2013年2月5日星期二

jQuery plugin - coin-slider 好用簡單換圖套件推薦

Jquery-coin-slider原檔案下載網站
http://workshop.rs/2010/04/coin-slider-image-slider-with-unique-effects/
功能介紹
圖片換圖效果
效果圖

原網站圖

使用方法

詳細可參考原網站 how to use

參數說明

width: 565, //圖片寬

height: 290, // 圖片長

spw: 7, // 寬平均分幾格

sph: 5, // 長平均分幾格

delay: 3000, // delay多少ms轉換一張圖片

sDelay: 30, // 每小格轉換delay多少ms

opacity: 0.7, // 下方黑色title透明度

titleSpeed: 500, // 下方黑色title的轉換速度 (0為不動,只換文字)

effect: '', // 轉換效果->random, swirl, rain, straight

navigation: true, // 是否顯示prev next,和下方btn的換圖按鈕

links : true, // 圖片是否能連結

hoverPause: true // 停留在圖片上是否停止轉換圖片

備註

如果覺得prev next不好看可修改css的部分(隱藏或換圖)

2013年1月25日星期五

jQuery plugin - countdown 縮小版倒數計時器

Jquery-countdown原檔案下載網站
http://code.google.com/p/jquery-countdown/
功能介紹
縮小版倒數計時器
新增修改功能部分
計算設定日期到現在的倒數計時器( Chrome,IE,FF適用)
效果圖

程式碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>jQuery plugin - 縮小版倒數時鐘 範例</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript" src="js/jquery.countdown.js"></script>

<script type="text/javascript">

var timer;

$(document).ready(function(){

 counttime('2013-03-28 10:00:00');

});



//新增倒數計時器

function counttime(t)

{

    var partyd = mynewdate(t);

 var time = diffdate("d",partyd)+"日"+diffdate("h",partyd)+"時"+diffdate("m",partyd)+"分"+diffdate("s",partyd)+"秒";

 $('.din_time').countdown({

  image: 'images/countdown_digits.png',

  startTime: time,

  digitWidth:27,

  digitHeight:39,

  format: 'dd日hh時mm分ss秒'

 });

}



//計算時間差的Function

function diffdate(interval,objDate){

    var dtThis = new Date();

 var d = parseInt((objDate - dtThis) / 86400000);

 var h = parseInt((objDate - dtThis - d*86400000) / 3600000);

 var m = parseInt((objDate - dtThis - d*86400000 - h*3600000) / 60000);

 var s = parseInt((objDate - dtThis - d*86400000 - h*3600000 - m*60000) / 1000 );

 if (d<0) d=0;

 if (h<0) h=0;

 if (m<0) m=0;

 if (s<0) s=0;

 switch (interval) {

  case "s":return paddingLeft(s,2);

  case "m":return paddingLeft(m,2);

  case "h":return paddingLeft(h,2);

  case "d":return paddingLeft(d,2);

 }

}



//利用輸入日期格式(YYYY-MM-DD hh-mm-ss)變換成一個date格式

function mynewdate(str) {

    str = str.split(' ');

 day = str[0].split('-');

 time = str[1].split(':');

 var date = new Date();

 date.setUTCFullYear(day[0], day[1] - 1, day[2]-2);

 date.setUTCHours(time[0]-8, time[1], time[2]);

 return date;

}



//單位數補零成雙位數

function paddingLeft(num,lenght){

    if(num >= 10)

  return num;

 else

  return ("0" +num);

}





</script>

</head>

<body>

2013-03-28 10:00:00 距離現在還有:<div class="din_time" style="padding-top: 0px;font-size: 16px;"></div>

</body>

</html>

倒數計時器的圖片
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHToiG-xadCIMSBWZ28Kl52WBAVrfbeBghBBmVQVTusMQZHZTFABF5lMJQGwc8RSKzwZ6PqwJywvtMyamtX2CmZUf8No8rPzSnlqFSSwetvmdr_04lpJGVXPrwzijCwFeXQtm4QFnWItRB/s320/countdown_digits.png

2013年1月16日星期三

jQuery plugin - jCarousel Lite 多張圖片滑動轉換效果(圖片跑馬燈) 範例

這是一個多張圖片轉換的效果
之前想做類似的效果但找不到想要的jQuery plugin
在Google裏找很久終於讓我找到他 - jCarousel Lite
原網站有展示他不同效果功能的DEMO
詳見:http://www.gmarwaha.com/jquery/jcarousellite/#demo
jCarousel Lite js download: http://www.gmarwaha.com/jquery/jcarousellite/#download
另外這裏有最新的版本但我在使用時排版會跑掉
所以我沒有使用他可提供大家參考
https://github.com/kswedberg/jquery-carousel-lite

這個範例主要是修改他本來的功能去取得我想要的效果
jCarousel Lite 有預設auto的參數去自動變換圖片
但我希望是當滑鼠移動到圖片時才執行圖片跑馬燈的效果
他會一直循環轉換圖片直至滑鼠移開停止
以下是我的範例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery plugin - jCarousel Lite 範例</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="js/jquery.jcarousellite.js"></script> <script type="text/javascript"> var timer; $(document).ready(function(){ //執行jCarouselLite $(".jCarouselLite").jCarouselLite({ btnNext : ".carousel .next", btnPrev : ".carousel .prev", visible : 3, speed : 1000 }); //滑鼠移入移出啟動和暫停效果 $("#pic").live( 'mouseenter', function() { timer = setInterval(nextpic,800); }); $("#pic").live( 'mouseleave', function() { clearInterval(timer); }); }); function nextpic() { $(".carousel .next").click(); } </script> </head> <body> <div class="carousel auto"><span class="prev"></span><span class="next"></span> <div class="jCarouselLite"><ul> <li><img id="pic" style="width:104px;height:80px;margin-right:5px;" src="images/pic-1.jpg" /></li> <li><img id="pic" style="width:104px;height:80px;margin-right:5px;" src="images/pic-2.jpg" /></li> <li><img id="pic" style="width:104px;height:80px;margin-right:5px;" src="images/pic-3.jpg" /></li> <li><img id="pic" style="width:104px;height:80px;margin-right:5px;" src="images/pic-4.jpg" /></li> <li><img id="pic" style="width:104px;height:80px;margin-right:5px;" src="images/pic-5.jpg" /></li> </ul></div> </div> </body> </html>
備註
jCarousel Lite的參數
btnPrev : 上一頁的按鈕
btnNext : 下一頁的按鈕
btnGo : 針對滑動到那一個圖片的按鈕
mouseWheel : 能不能用滑鼠的滑輪去更換圖片
auto : 自動換轉的速度不能自動換轉則為0 預設為0
speed : 換轉的速度停止jCarousel Lite則為0
easing : 轉換的效果
vertical : 是不是直的預設為橫的
circular : 是不是循環的預設為true
visible : 可見多少張圖 (可設1,1.5,2...)
start : 設定第一張圖是哪一張預設為0 (可設1,2,3...)
scroll : 設定轉換一次移動多少張圖預設為1
beforeStart : 開始前執行的function
afterEnd : 結束後執行的function

文筆于是太好詳細還是看原網站的demo比較清楚

BloggerADS

2013年2月5日 星期二