runfast󰀦lynda

jQuery基础教程-学习笔记(6)

使用插件

$(document).ready(function(){
  $('#books').cycle({
    timeout: 2000,
    speed: 200,
    pause: true//鼠标进入时暂停播放
  });
});

.cycle(‘pause’) 和.cycle('resume’)可以暂停和恢复播放,可以放到单击事件中,对于存在多组幻灯片的情况, 利用cycle提供的自定义:paused选择符可以找到被暂停的幻灯片,例如:$('ul:paused’).cycle('resume’)

$.cookie('cyclePaused','y',{path: '/', expires: 7})//设置cookie值为y,在整个站点都可以访问到,保存时间是7天
$.cookie('cyclePaused','null')//通过传递null,删除cookie值
$(document).ready(function(){
  $('h1').click(function(){
    $(this).toggleClass('highlighted','slow','easeInExpo');
  });
})
$(this).effect('shake',{
  distance: 10,
  duration: 80
});
$('<buttom>pause</buttom>').buttom({
  icons: {primary: 'ui-icon-pause'}//指定primary图标
})
$(document).ready(function(){
  $('<div id="books-controls"></div>').insertAfter('#books');
  $('#books').cycle({
    before: function(){
      $('#slider')
      .slider('value',$('#books li').index(this));
    }
  });

  $('<div id="slider"></div>').slider({
    min: 0,
    max: $('#books li').length -1,
    slide: function(event,ui){
      $('#books').cycle(ui.value);
    }
  }).appendTo('#books-controls');
})

高级事件处理

.hover()方􏱜法

$(document).ready(function() {
  $('div.photo').hover(function() {
    $(this).find('.details').fadeTo('fast', 0.7);
  }, function() {
    $(this).find('.details').fadeOut('fast');
  });
});

􏱯给mouseenter和􏲑mouseleave绑定事件的方法

$(document).ready(function() {
  $('div.photo').on('mouseenter mouseleave', function(event) {
    var $details = $(this).find('.details');
    if (event.type == 'mouseenter') {
      $details.fadeTo('fast', 0.7);
    } else {
      $details.fadeOut('fast');
    }
  });
});􏸰􏳤
$(document).ready(function() {
  $(document).on('mouseenter mouseleave', 'div.photo',
  function(event) {
    var $details = $(this).find('.details');
    if (event.type == 'mouseenter') {
      $details.fadeTo('fast', 0.7);
    } else {
      $details.fadeOut('fast');
    }
  });
});
(function($) {
  $(document).on('nextPage', function() {
    var url = $('#more-photos').attr('href');
    if (url) {
      $.get(url, function(data) {
        $('#gallery').append(data);
      });
    }
  });
  var pageNum = 1;
  $(document).on('nextPage', function() {
    pageNum++;
    if (pageNum < 20) {
      $('#more-photos').attr('href', 'pages/' + pageNum + '.html');
    }
    else {
      $('#more-photos').remove();
    }
  });
})(jQuery);

上面的代码是一次触发导致多个事件的绑定。

(function($) {
  function checkScrollPosition() {
    var distance = $(window).scrollTop() + $(window).height();
    if ($('#container').height() <= distance) {
      $(document).trigger('nextPage');
    }
  }
  $(document).ready(function() { $(window).scroll(checkScrollPosition).trigger('scroll');
  });
})(jQuery);

第七单元练习

(1)把幻灯片的切换周期延长到1.5秒,把动画效果修改为下一张幻灯片淡入之前,前一张幻灯片淡出。请参考Cycle插件的文档,找到实现上述功能的选项。

$(document).ready(function(){
    $('#books').cycle({
        timeout: 1500,
        fx: 'fade'   // 值:字符串,作用:选择特效,目前jquery.cycle.js支持27种切换效果。
    });
});

(2)设置名为cyclePaused的cookie,将它的有效期设置为30天。

$(document).ready(function(){
    $.cookie('cyclePaused', 'the_value', { expires: 30 });
    alert($.cookie('cyclePaused'));
})

(3)限制书名区域,每次缩放只允许以10像素为单位。

$(document).ready(function(){
  $('#books .title').resizable({ grid: [10, 10] });
})

(4)修改滑动条动画,让幻灯片切换时,滑块从当前位置平滑地移动到下一个位置。

$(document).ready(function(){
  $('<div id="books-controls"></div>').insertAfter('#books');
  $('#books').cycle({
    timeout: 1500,
    fx: 'fade',   
    before: function(){
      $('#slider')
      .slider('value',$('#books li').index(this));
    }
  });

  $('<div id="slider"></div>').slider({
    min: 0,
    max: $('#books li').length -1,
    slide: function(event,ui){
      $('#books').cycle(ui.value);
    }
  }).appendTo('#books-controls');
})

(5)不像以前那样循环播放幻灯片,而是在播放完最后一张幻灯片后停止。当幻灯片停止播放时,也禁用相应的按钮和滑动条。

$(document).ready(function() {
  var stop_flag = 1;
  var $books = $('#books').cycle({
    timeout: 2000,
    speed: 200,
    pause: true,
    nowrap: 1,//使幻灯片只播放一遍,不循环
    before: function() {
      $('#slider').slider('value', $('#books li').index(this));
    },
    end: function(){
      $('button').click(function(event){
        $(this).effect('shake', {
          distance: 10
        });
      });
      stop_flag = 0;
    }//end回掉函数可以和autostop或者nowrap配合使用
  });
  if ( $.cookie('cyclePaused') ) {
    $books.cycle('pause');
  }
  var $controls = $('<div id="books-controls"></div>').insertAfter($books);
  $('<button>Pause</button>').click(function(event) {
    if(stop_flag == 1){
      event.preventDefault();
      $books.cycle('pause');
      $.cookie('cyclePaused', 'y');
    };
  }).button({
    icons: {primary: 'ui-icon-pause'}
  }).appendTo($controls);
    $('<button>Resume</button>').click(function(event) {
      if(stop_flag == 1){
        event.preventDefault();
        var $paused = $('ul:paused');
        if ($paused.length) {
            $paused.cycle('resume');
            $.cookie('cyclePaused', null);
        }else {
            $(this).effect('shake', {
                distance: 10
            });
        };    
      };
    }).button({
      icons: {primary: 'ui-icon-play'}
    }).appendTo($controls);

  $('<div id="slider"></div>').slider({
    min: 0,
    max: $('#books li').length - 1,
    slide: function(event, ui) {
      if(stop_flag == 1){
        $books.cycle(ui.value);
      }else{
        $(this).effect('shake', {
            distance: 10
        });
      };
    }
  }).appendTo($controls);
});