JQuery高效制作网页特效第三章操作DOM对象课后作业

最新推荐文章于 2021-06-30 10:03:42 发布

tb19930719

最新推荐文章于 2021-06-30 10:03:42 发布

阅读量1.6k

点赞数 2

本文链接：https://blog.youkuaiyun.com/tb19930719/article/details/81082004

版权

                        		JQuery高效制作网页特效第三章操作DOM对象课后作业
1，图片轮换
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片轮换</title>
    <style>
        ul li{
            list-style: none;
            display: inline-block;
            border: 1px solid black;
            width: 20px;
            height: 20px;
            text-align: center;
            background-color: white;
        }
        a{
            text-decoration: none;
        }

        ul{
           position: absolute;
            top: 150px;
            left: 80px;
        }
    </style>
</head>
<body>

<ul>
    <li><a href="#" name="huantu" onclick="change()">1</a> </li>
    <li><a href="#" name="huantu" onclick="change1()">2</a> </li>
    <li><a href="#" name="huantu" onclick="change2()">3</a> </li>
    <li><a href="#" name="huantu" onclick="change3()">4</a> </li>
    <li><a href="#" name="huantu" onclick="change4()">5</a> </li>
</ul>
<div>
    <img src="images/6 (1).gif" id="pian">
</div>
<script>
    var lunbo=document.getElementsByName("huantu");
    var img=document.getElementById("pian");
    function change() {
           img.setAttribute("src","images/6 (1).gif")
    }
    function change1() {
        img.setAttribute("src","images/6 (1).jpg")
    }
    function change2() {
        img.setAttribute("src","images/6 (3).jpg")
    }
    function change3() {
        img.setAttribute("src","images/6 (4).gif")
    }
    function change4() {
        img.setAttribute("src","images/6 (5).gif")
    }
</script>
</body>
</html>

2，上传文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传文件</title>
</head>
<body>
<div >
    <p id="fu">文件路经：<input type="file" class="ss"></p>
</div>
<div id="11"></div>

    <p><input type="button" value="再上传一个文件" onclick="tianjia()"></p>

<script>
    function tianjia() {
    var jiu=document.getElementById("fu");
   var copy=jiu.cloneNode(true);
    document.getElementById("11").appendChild(copy)
    }

</script>
</body>
</html>

3，小说切换
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小说切换</title>
    <style>
        *{
            margin:0;
            padding: 0;
            font-family: "Arial", "΢���ź�";
            font-size: 12px;
            line-height: 23px;
        }
        ul,li{
            list-style: none;
        }
        li{float: left;
            margin-right: 1px;
            background:url(images/menu2.gif) no-repeat;
            height:23px;
            width:47px;
            text-align:center;}
        .div_bg{
            background:url(images/bg.jpg) no-repeat;
            width:169px;
            height:290px;
            margin: 0px auto;
            padding: 50px 0 0 15px;
        }
        .div_bg div{
            clear: both; padding-top: 10px;}
        .white{font-size:12px;
            color:#FFFFFF;
            padding-top:2px;
            cursor:pointer;
        }
        .white:hover{font-size:12px;
            color:#FFFFFF;
            padding-top:2px;
            cursor:pointer;
        }
        a {
            color: #06329b;text-decoration: none;line-height:24px;
        }
        a:hover {
            color: #cc0000;text-decoration: none;line-height:24px;
        }
        .bg{
            background:url(images/menu1.gif) no-repeat;
            height:23px;
            width:47px;
            text-align:center;}



        #book3,#book2{
            display: none;
        }
        .nb{
            display: none;
        }
        .nobg{background:url(images/menu2.gif) no-repeat;

            height:23px;
            width:47px;
            text-align:center;
        }
    </style>

</head>
<body>
<script>
    function kai() {
        document.getElementById("bg1").className="bg";
        document.getElementById("book1").style.display = "block"
        document.getElementById("book2").style.display = "none"
        document.getElementById("book3").style.display = "none"
    }
    function kai1() {
        document.getElementById("bg2").className="bg";
        document.getElementById("book2").style.display = "block"
        document.getElementById("book1").style.display = "none"
        document.getElementById("book3").style.display = "none"
    }
    function kai2() {
        document.getElementById("bg3").className="bg";
        document.getElementById("book3").style.display = "block"
        document.getElementById("book1").style.display = "none"
        document.getElementById("book2").style.display = "none"
    }
    function guanbi() {
        document.getElementById("bg1").className="nobg"
        document.getElementById("bg2").className="nobg"
        document.getElementById("bg3").className="nobg"
    }
</script>
<div class="div_bg">

    <ul>
        <li id="bg1" onmouseover="kai()"  onmouseout="guanbi()"><a class="white" >小说</a></li>
        <li id="bg2" onmouseover="kai1()" onmouseout="guanbi()"><a class="white" >非小说</a></li>
        <li id="bg3" onmouseover="kai2()" onmouseout="guanbi()"><a class="white" >少儿</a></li>
    </ul>
    <div id="book1">
        <a  href="#" target=_blank>1.时间旅行者的妻子</a><br>
        <a   href="#" target=_blank>2.女心理师（下）</a><br>
        <a   href="#" target=_blank>3.鬼吹灯之精绝古城</a><br>
        <a   href="#" target=_blank>4.女心理师（上）</a><br>
        <a   href="#" target=_blank>5.小时候</a><br>
        <a   href="#" target=_blank>6.追风筝的人</a><br>
        <a   href="#" target=_blank>7.盗墓笔记2</a><br>
        <a   href="#" target=_blank>8.输赢</a>
    </div>
    <div id="book2">
        <a   href="#" target=_blank>1.人生若只如初见</a><br>
        <a   href="#" target=_blank>2.高效能人士的七个..</a><br>
        <a   href="#" target=_blank>3.求医不如求己</a><br>
        <a   href="#" target=_blank>4.人体使用手册</a><br>
        <a   href="#" target=_blank>5.孩子，把你的手给我</a><br>
        <a   href="#" target=_blank>6.别笑！我是英文单词书</a><br>
        <a   href="#" target=_blank>7.人体经络使用手册</a><br>
        <a   href="#" target=_blank>8.股市稳赚</a>
    </div>
    <div id="book3">
        <a   href="#" target=_blank>1.斯凯瑞金色童书・..</a><br>
        <a   href="#" target=_blank>2.哈利・波特与“混..</a><br>
        <a   href="#" target=_blank>3.不一样的卡梅拉（..</a><br>
        <a   href="#" target=_blank>4.它们是怎么来的</a><br>
        <a   href="#" target=_blank>5.五・三班的坏小子..</a><br>
        <a   href="#" target=_blank>6.男生日记</a><br>
        <a   href="#" target=_blank>7.哈利・波特与魔法石</a><br>
        <a   href="#" target=_blank>8.噼里啪啦丛书(全7册)</a>
    </div>
</div>

</body>
</html>