JavaScript第6章上机练习2(使用jQuery美化英雄联盟简介页)&上机练习3(制作非缘勿扰页面特效)

思卿不见

已于 2022-05-25 16:13:50 修改

阅读量7.9k

点赞数 8

文章标签： javascript

于 2019-07-20 11:56:40 首次发布

本文链接：https://blog.csdn.net/weixin_44100210/article/details/96562671

版权

首先，上机练习2的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jQuery美化英雄联盟简介页</title>
    <script src="../js/jquery-1.12.4.js"></script>
</head>
<body>
<h1>英雄联盟</h1>
<p id="content">《英雄联盟》，简称LOL。</p>
<p>
    由<strong>Riot Games </strong>开发，为3D竞技场战游戏，其<span>主创团队由实力强劲的<strong>魔兽争霸</strong>系列游戏多人
    <span>即时对战</span>自定义地图开发团队</span>...<a href="#">更多详情</a>
</p>
<h2>目录</h2>
<ul class="txt_box">
    <li class="current">开发团队</li>
    <li>游戏周边</li>
    <li>游戏介绍</li>
    <li>配置需求</li>
    <li>游戏背景</li>
</ul>
<script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("p").click(function () {
            $(".txt_box .current").css("background","#6ff");
            $("p span").css("background","#f9f");
            $("h1+p").css("background","#ff6");
            $("p span span").css({"color":"#fff","background":"#f00"});
        })
    })
</script>
</body>
</html>

效果图如下：
在这里插入图片描述
展开后的效果图为：

其次，上机练习3的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作非缘勿扰页面特效</title>
    <style type="text/css">
        body{
            margin:5px;
        }
        .left {
            float: left;
        }
        .left img:nth-child(1){
            height: 220px;
            width: 160px;
        }
        .right {
            float: left;
        }

        .right span {
            padding: 0px 5px;
        }
        .right h3{
            margin: 0px;
            padding: 0px;
        }
        .right p:nth-last-child(2){
            margin: 9px 0px 5px;
        }
        .right p:nth-last-child(1){
            margin: 5px 0px;
        }
    </style>
    <script src="../js/jquery-1.12.4.js"></script>
</head>
<body>
<div class="title">
<div class="left">
    <img src="../image/pic.gif" alt="">
    <br>
    <br>
    <img src="../image/col.gif" alt="">
</div>
<div class="right">
    <h3>非缘勿扰</h3>
    <p><span id="a">主演：</span>苏有朋/秦岚/傅艺伟等</p>
    <p><span id="b">导演：</span>赖水清</p>
    <p><span id="c">标签：</span><span class="s">苏有朋</span>国产电视剧 <span class="s">2013</span> 连续剧</p>
    <p><span id="d">剧情：</span>当代都市，大年女刘林、杨阳都在寻找自己的如意郎君，<br>
        刘林偶遇陆氏房地产总裁路西诺，两人成了欢喜冤家，遭到暗恋 <br>
        西诺的丁娟的嫉恨。。。
        <a href="">点击了解更多</a></p>
    <p>
        <img src="../image/btn.gif" alt="">
    </p>
</div>
</div>
<script type="text/javascript">
    $(document).ready(function () {     //创建文档加载事件
        $("h3").mouseover(function () {
            $(this).css("cursor", "pointer");     //自行添加的，题目没要求
        })
        $("#b").mouseover(function () {
            $(this).css("cursor", "pointer");     //自行添加的，题目没要求
        })
        $("#c").mouseover(function () {
            $(this).css("cursor", "pointer");     //自行添加的，题目没要求
        })
        $("p").css({"font-size": "13px", "line-height": "18px"});       //自行设置，题目无要求，可忽略
        $(".right p:nth-last-child(2)").css("line-height","32px");       //自行设置，题目无要求，可忽略

        //题目要求：
        $("h3").click(function () {
            $("span[id]").css({"color": "#ff0099", "font-weight": "bold"});
        })
        $("#b").click(function () {
            $("p:nth-last-child(4)").css("font-weight", "bold");
        })
        $("#c").click(function () {
            $("span[class='s']").css({"background": "#e0f8ea", "color": "#10a14b", "padding": "2px 8px"});
        })
        $(".left img").click(function () {
            alert("您已收藏成功!");
        })
    })
</script>
</body>
</html>

效果图如下：
（首先是打开页面的时候）：
在这里插入图片描述
接着，点击“非缘勿扰”，选中的字体加粗 —效果图：

然后，点击“导演”，选中的字体显示的 —效果图：

再是，点击“标签”，选中的字体显示的 —效果图：

最后，就是点击“收藏”图片显示的 —效果图：
在这里插入图片描述
最后的最后，说个题外话：每次鼠标点击效果图后显示的图片都是正确的，至于为什么截屏后的鼠标不在点上，我也很迷啊哈哈哈哈哈哈哈哈哈哈哈
今天的你，也要加油啊！只要你想努力，任何时候都不晚。

思卿不见

关注

8
点赞
踩
44

收藏

觉得还不错? 一键收藏
打赏
2
评论
JavaScript第6章上机练习2(使用jQuery美化英雄联盟简介页)&上机练习3(制作非缘勿扰页面特效)

首先，上机练习2的代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>使用jQuery美化英雄联盟简介页</title> <script src="../js/jquery-1.12.4.js"&g...
复制链接

扫一扫