码迷,mamicode.com
首页 > Web开发 > 详细

Jquery学习之Jquery插件

时间:2017-09-04 13:31:45      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:完成   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插件

标签:完成   ul li   defaults   eee   highlight   rand   title   覆盖   random   

原文地址:http://www.cnblogs.com/DaphneOdera/p/7472819.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!