Practical javascript collections

Tide

對照標題的 folder 裡，有更詳細的 sample

1. equalheights 讓欄位等高

一個簡單的 jquery 套件

不管 ie 的話，css 有 flexbox 可以解決類似的問題。

<!-- 複製這段javascript，並把要等高的欄位class 命名為 equalheight，或反過來修改javascript的名稱 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript" src="script/jquery.equalheights.js"></script>
<script>
$(function(){
  $(".equalheight").resize(function(){
 	$(".equalheight").equalHeights();
  }).resize();  
})
</script>
<!-- end -->

2. firefly

讓畫面中有小光點在飛來飛去，營造氣氛上非常好用

<!-- -->
<div id="wrap">
	<img src="firefly.png" />
</div>
<!-- -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.firefly.js"></script>
<script>
$(document).ready(function() {
	$.firefly({images : ['1.jpg', '2.jpg'],total : 40}); 	
});
</script>

3. jqfloat

讓東西在畫面上亂晃動

$(document).ready(function() {
	$('object').jqFloat({
		width: 100,
		height: 100,
		speed: 1000
	});
});

4. jquery.jrumble

晃動的晃動的晃動的

$('#demo5, #demo6, #demo7, #demo8').hover(function(){
    $(this).trigger('startRumble');
}, function(){
    $(this).trigger('stopRumble');
});

5. jquery.nicescroll-master

修改 scroll bar 的樣式

$(document).ready(function() {  
    $("html").niceScroll();
});

//or

$(document).ready(function() {
    $("#viewportdiv").niceScroll("#wrapperdiv",{cursorcolor:"#00F"});
});

6. Swiper

滑動廣告 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script src="js/idangerous.swiper-2.1.min.js"></script>
  <script>
  var mySwiper = new Swiper('.swiper-container',{
    pagination: '.pagination',
    loop:true,
    grabCursor: true,
    paginationClickable: true
  })
  $('.arrow-left').on('click', function(e){
    e.preventDefault()
    mySwiper.swipePrev()
  })
  $('.arrow-right').on('click', function(e){
    e.preventDefault()
    mySwiper.swipeNext()
  })
  </script>

7. webpage_lotte_跟隨選單

tide 自製，手機也可以用的跟隨選單

<!-- 跟隨選單js start: -->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/velocity.min.js"></script>
<script src="js/jquery.tide.trackmenu.js"></script>
<script>
$(function(){
    //#menu為需要捲動的選單 id
    // 最後面的數字 10，是捲動時的 padding-top 
    $('#menu').trackmenu(10);
})            
</script>
<!-- 跟隨選單js end; -->

8. 平滑捲動 無 jquery

不需要載入肥肥的 jQuery 就能使用！

<script src="scrollPosition.js"></script>

<a onclick="scrollPosition('id名稱')">