Jquery學習之Jquery外掛程式

標籤：完成   ul li   defaults   eee   highlight   rand   title   覆蓋   random   

1.cycle投影片.cycle();

    //books結構 ul li    $(‘#books‘).cycle();    $(‘#books‘).cycle({        timeout:2000,        speed:500,        pause:true    });    //設定初始預設值    $.fn.cycle.defaults.timeout = 10000;//切換頻率    $.fn.cycle.defaults.random = true;//是否隨機切換    $(‘#books‘).cycle({        timeout: 2000,//會覆蓋預設的切換頻率        speed: 500,        pause: true    })     var $books = $(‘#books‘);     var $controls = $(‘<div id="books-controls"></div>‘).insertAfter($books);     $(‘<button>Pause</button>‘).click(function (e) {         e.preventDefault();         $books.cycle(‘pause‘);     }).appendTo($controls);    // $(‘<button>Resume</button>‘).click(function (e) {    //     e.preventDefault();    //     $books.cycle(‘resume‘);    // }).appendTo($controls);    //假如有多組投影片，一鍵恢複     $(‘<button>Resume</button>‘).click(function(e) {         e.preventDefault();        $(‘ul:paused‘).cycle(‘resume‘);//恢複所有被暫停投影片     }).appendTo($controls);    

2.cookie

.cookie();

    //設定cookie    if ($.cookie(‘cyclePaused‘) == null) {//如果存在暫停cookie        $books.cycle(‘pause‘);    }    var $controls = $(‘<div id="books-controls"></div>‘).insertAfter($books);    $(‘<button>Pause</button>‘).click(function (e) {        e.preventDefault();        $books.cycle(‘pause‘);        //$.cookie(‘cyclePaused‘, ‘y‘);//設定暫停cookie        $.cookie(‘cyclePaused‘, ‘y‘, {//設定暫停cookie            path: ‘/‘,//全網站允許訪問            expries: 7//到期期限為7天        });    }).appendTo($controls);    $(‘<button>Resume</button>‘).click(function (e) {        e.preventDefault();        $books.cycle(‘resume‘);        $.cookie(‘cyclePaused‘, null);//清除暫停cookie    }).appendTo($controls);

 

3.JqueryUI

    $books.hover(function () {        $books.find(‘.title‘).animate({            backgroundColor: ‘#eee‘,            color: ‘#000‘        }, 1000);    }, function () {        $books.find(‘.title‘).animate({            backgroundColor: ‘#000‘,            color: ‘#fff‘        }, 1000)    })    $(‘h1‘).click(function(){        $(this).toggleClass(‘highlighted‘,‘slow‘);//動態添加/移除類        $(this).toggleClass(‘highlighted‘, ‘slow‘,‘easeInExpo‘);//動態添加/移除類        //easeInExpo:先慢後快完成整個變換    })   

     $books.find(‘.title‘).resizable();//調節大小

 

Jquery學習之Jquery外掛程式