学习笔记:《jQuery基础教程》第四版第四章课后练习——样式与动画

原创 2015年11月19日 15:39:19

1、修改样式表,一开始先隐藏页面内容,当页面加载后,慢慢地淡入内容。

$(document).ready(function() {
    $('body').css('display', 'none');
    $('body').fadeIn(1500);//自行设置时间
});

2、在鼠标悬停到段落上面时,给段落应用黄色背景。

$(document).ready(function() {
    $('p').mouseover(function(){
         $(this).css('backgroundColor', 'yellow');
    });//当鼠标移动到段落上时段落背景应用黄色。
    $('p').mouseout(function(){
         $(this).css('backgroundColor', 'white');
    });//当鼠标移出段落上时段落背景应用白色。
});

3、单击标题(<h2>)使其不透明度变为25%,同时添加20px的左外边距,当这两个效果完成后,把讲话文本变成50%的不透明度。

$(document).ready(function() {
    $('h2').click(function(){
        $(this)
            .fadeTo('slow', 0.25)
            .animate({
              paddingLeft: '+=200' + 'px'//或者paddingLeft: '+=200px'
            },{
              duration: 'slow',
              queue: false
            })
            .queue(function(next){
              $('div.speech').fadeTo('slow', 0.5)
            });
    });
});

4、挑战:按下方向键时,使样式转换器向相应的方向平滑移动20像素;四个方向键的键码分别是37(左)、38(上)、39(右)、40(下)。

  var key_left = 37;
  var key_up = 38;
  var key_right = 39;
  var key_down = 40;
  var $switcher = $('#switcher');
  $switcher.css('position', 'relative');
  $(document).keyup(function(event){
    switch(event.which){
      case key_left:
        $switcher
            .animate({
              left: '-=20px'
            },{
              duration: 'fast'
            })
        break;
      case key_up:
        $switcher
            .animate({
              top: '-=20px'
            },{
              duration: 'fast'
            })
        break;
      case key_right:
        $switcher
            .animate({
              left: '+=20px'
            },{
              duration: 'fast'
            })
        break;
      case key_down:
        $switcher
            .animate({
              top: '+=20px'
            },{
              duration: 'fast'
            })
    }
  });

效果请点击

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

学习笔记:《jQuery基础教程》第四版第二章课后练习

学习笔记——《jQuery基础教程》第四版第二章课后练习最近抽时间系统的学习下jQuery相关知识,看看《jQuery基础教程》。顺便把课后练习的代码整理发上来看看。 给位于嵌套列表第二个层次的所有<...

学习笔记:《jQuery基础教程》第四版第三章课后练习

在Charles Dickens被单击时,给它应用selected样式。 在双击章标题()时,切换章文本的可见性。 当用户按下向右方向键时,切换到下一个body类;右方向键的键码是39. 挑战:使用c...

【练习向】jQuery基础教程第四版课后练习——Book06_jQuery_通过Ajax发送数据

要完成以下练习,需要此书本章的index.html文件以及complete.js中包含的已经完成的JavaScript代码。可以从Packt Publishing网站下载这些文件。 “挑战”练习有一...

《iOS 编程 第四版》——第三、四、五章学习笔记

第三章 第三章还是Objective-C理论的学习,主要讲了内存管理方面的问题和ARC 一、堆和栈的概念 1.在执行方法(或函数)时,会在内存中名为“栈”的区域分配一块内存空间,称为“帧”,帧内...

计算机操作系统第四版第四章课后习题答案

共享信息,共同进步。
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:学习笔记:《jQuery基础教程》第四版第四章课后练习——样式与动画
举报原因:
原因补充:

(最多只允许输入30个字)