illuSioN4ng↖(^ω^)↗

一个决定在前端路上摸爬滚打的胖次↖(^ω^)↗

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

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'
            })
    }
  });

效果请点击

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/la413972057/article/details/49928551
个人分类: jQuery基础教程
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭