使用jQuery高效制作网页特效——第三章课后作业

最新推荐文章于 2024-06-12 11:46:09 发布

qq_41882685

最新推荐文章于 2024-06-12 11:46:09 发布

阅读量3k

点赞数 1

分类专栏： jQuery高效制作网页特效

本文链接：https://blog.csdn.net/qq_41882685/article/details/81077898

版权

jQuery高效制作网页特效专栏收录该内容

13 篇文章 1 订阅

订阅专栏

1.超链接切换图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>切换图片</title>
    <style>
        p a{
            text-decoration: none;
        }
    </style>
</head>
    <div>
        <img id="picture" src="../javaScript操作DOM对象/1.gif">
        <p>
        <a href="" onmouseover="a(1)">1</a>
        <a href="" onmouseover="a(2)">2</a>
        <a href="" onmouseover="a(3)">3</a>
        <a href="" onmouseover="a(4)">4</a>
        <a href="" onmouseover="a(5)">5</a>
        </p>
    </div>
<script>
    function a(num) {
        var img;
        switch (num){
            case 1:
                img = "1.gif";
                break;
            case 2:
                img = "2.gif";
                break;
            case 3:
                img = "3.jpg";
                break;
            case 4:
                img = "4.jpg";
                break;
            case 5:
                img = "5.gif";
                break;
        }
        var ne = document.createElement("img");
        var old = document.getElementById("picture");
        ne.setAttribute("src","../javaScript操作DOM对象/"+img);
        old.parentNode.replaceChild(ne,old);
    }
</script>
</body>
</html>

2.单击在上传一个文件，按钮就增减一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="b">
        <p>文件路径：
        <input type="file" value="选择文件">
        </p>
    </div>
    <input type="button" value="再上传一个文件" onclick="duplicate()">
    <script>
        function duplicate() {
            var app = document.getElementById("b").firstChild
            var copy = app.nextElementSibling.cloneNode(true);
            document.getElementById("b").appendChild(copy).firstChild.nextSibling
        }
    </script>
</body>
</html>

3.切换图书内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书切换</title>
    <style>
        #a{
            font-size: 20px;
            margin-right: 10px;
        }
        ul li{
            list-style: none;
            margin-left: -40px;
        }
        #total div:nth-of-type(2){
            position: absolute;
            left: 730px;
            top: 35px;
        }
        #total div:nth-of-type(3){
            position: absolute;
            left: 802px;
            top: 35px;
        }
        #total{
            width:200px;
            height: 250px;
            margin: 0px auto;
            border: 1px solid #ff7528;
        }
        #total div:nth-of-type(2) ul{
            position: relative;
            right: 62px;
        }
        #total div:nth-of-type(3) ul{
            position: relative;
            right: 134px;
        }
    </style>
</head>
<body>
    <div id="total">
        <span id="a">图书周排行榜</span><span id="b">TOP&nbsp;&nbsp;100</span><br>
        <div>
            <input type="button" value="小说" style="width: 60px;" onmouseover="a()">
                <ul id="wen" style="display: none;">
                    <li>1.时间旅行者的妻子</li>
                    <li>2.女心理师(下)</li>
                    <li>3.鬼吹灯之惊觉古城</li>
                    <li>4.女心理师(上)</li>
                    <li>5.小时候</li>
                    <li>6.追风的人</li>
                    <li>7.盗墓笔记</li>
                    <li>8.输赢</li>
                </ul>
        </div>
        <div>
            <input type="button" value="非小说" style="width: 70px;" onmouseover="b()">
                <ul id="wen1" style="display: none;">
                    <li>1.人生若只如初见</li>
                    <li>2.高效能人士的七个</li>
                    <li>3.求医不如求己</li>
                    <li>4.人体使用手册</li>
                    <li>5.孩子，把你的手给我</li>
                    <li>6.别笑！我是英文单词书</li>
                    <li>7.人体经阁使用手册</li>
                    <li>8.股市稳赚</li>
                </ul>
        </div>
        <div>
            <input type="button" value="少儿" style="width: 60px;" onmouseover="c()">
                <ul id="wen2" style="display: none;">
                    <li>1.人生若只如初见</li>
                    <li>2.高效能人士的七个</li>
                    <li>3.求医不如求己</li>
                    <li>4.人体使用手册</li>
                    <li>5.孩子，把你的手给我</li>
                    <li>6.别笑！我是英文单词书</li>
                    <li>7.人体经阁使用手册</li>
                    <li>8.股市稳赚</li>
                </ul>
        </div>
    </div>
<script>
    function a() {
        document.getElementById("wen").style.display = "block"
        document.getElementById("wen1").style.display = "none"
        document.getElementById("wen2").style.display = "none"
    }
    function b() {
        document.getElementById("wen1").style.display = "block"
        document.getElementById("wen").style.display = "none"
        document.getElementById("wen2").style.display = "none"
    }
    function c() {
        document.getElementById("wen2").style.display = "block"
        document.getElementById("wen").style.display = "none"
        document.getElementById("wen1").style.display = "none"
    }
</script>
</body>
</html>

qq_41882685

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
使用jQuery高效制作网页特效——第三章课后作业

1.超链接切换图片&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;切换图片&lt;/title&gt; &lt;style&gt; p a{
复制链接

扫一扫

专栏目录