《JQuery基础教程》第四版课后练习代码--第四章

最新推荐文章于 2022-06-28 19:34:53 发布

原创最新推荐文章于 2022-06-28 19:34:53 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端

软件专栏收录该内容

4 篇文章

订阅专栏

这篇博客主要介绍了JQuery基础教程第四版中第四章的课后练习，包括如何在页面加载后通过淡入效果显示隐藏内容，以及如何响应方向键事件，实现样式转换器在四个方向上平滑移动20像素的挑战。

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

$(document).ready(function () {
    var $body=$("body");
    $body.hide();
    $body.fadeIn("slow");
})

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

$(document).ready(function () {
    var $p=$(".speech p");
    $p.mouseover(function() {
        $(this).css("background-color", "yellow");
    });
    $p.mouseout(function () {
        $(this).css("background-color", "white");
    })
})

或者

$(document).ready(function () {
    var $p=$(".speech p");
    $p.mouseover(function() {
        $(this).css("background-color", "yellow").mouseout(function () {
            $(this).css("background-color", "white");
        })
    })
})

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

$(document).ready(function () {
    $("h2").click(function(){
        $(this).animate({
            opacity:'0.25',
            marginLeft:'+=20px'
        },'slow');
        $(".speech").animate({
            opacity:'0.5'
        },'slow');
    })
})

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

$(document).ready(function () {
    $("#switcher").css('position','relative');
    $(document).keyup(function(event){
        switch(event.keyCode){
            case 37:
                $("#switcher").animate({left:'-=20px'},'slow');
                break;
            case 38:
                $("#switcher").animate({top:'-=20px'},'slow');
                break;
            case 39:
                $("#switcher").animate({left:'+=20px'},'slow');
                break;
            case 40:
                $("#switcher").animate({top:'+=20px'},'slow');
                break;
            default:
                break;
        }
    })
})