第三章 JavaScript操作DOM对象

最新推荐文章于 2024-08-11 00:22:53 发布

JiangMye

最新推荐文章于 2024-08-11 00:22:53 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/JiangMye/article/details/81064929

版权

1，图片轮播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片链接</title>
    <style>
        .scroll{width: 360px; height: 190px; overflow: hidden; margin: 0 auto; position: relative;}
        a{
            font-size: 14px;
            color: #39F;
            height: 18px;
            width: 20px;
            border: 1px solid #39F;
            text-decoration: none;
            display: block;
            float: left;
            margin-right:5px;
            text-align: center;
            background-color: #FFF;
            line-height: 20px;
        }
        a:hover {
            font-size: 14px;
            font-weight: bold;
            color: #FFF;
            background-color: #39F;
            border: 1px solid #39F;
            text-decoration: none;
            display: block;
        }
        #num {
            position:absolute;
            width:180px;
            height:25px;
            z-index:2;
            left:100px;
            top: 0px;
        }
    </style>
</head>
<body>
<div class="scroll">
    <img id="jk" src="images/1.gif">
    <p id="num">
    <a οnmοuseοver="a(1)" href="">1</a>
    <a οnmοuseοver="a(2)" href="">2</a>
    <a οnmοuseοver="a(3)" href="">3</a>
    <a οnmοuseοver="a(4)" href="">4</a>
    <a οnmοuseοver="a(5)" href="">5</a>
    </p>
</div>
<script>
    function a(i){
        var img;
        if(i==1){
            img="1.gif"
        }else if(i==2){
            img="2.gif"
        }else if(i==3){
            img="3.jpg"
        }else if(i==4){
            img="4.jpg"
        }else{
            img="5.gif"
        }
        var newnode=document.createElement("img");
        var oldnode=document.getElementById("jk");
        newnode.setAttribute("src","images/"+img);
        oldnode.parentNode.replaceChild(newnod,oldnode);
    }
</script>
</body>
</html>

2，单击上传文件按钮就增加一行上传的行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
</head>
<body>
<div id="as">
    <p id="re">文件路径:<input type="file"></p>
</div>
<input type="button"value="再上传一个文件"οnclick="a()">
<script>
    function a(){
        var as=document.getElementById("as").firstChild;
        var copy=as.nextElementSibling.cloneNode(true);
        document.getElementById("as").appendChild(copy).firstChild.nextSibling
    }
</script>
</body>
</html>

3，当鼠标放在标题上，标题背景变换，并且标题对应相应内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TAB切换</title>
    <style>
        #img{
            background: url("images/bg.jpg")no-repeat;
            width: 169px;
            height: 290px;
            margin: auto;
        }
        #p input{
            background: url("images/menu2.gif");
            border: 1px solid gainsboro;
            font-size: 10px;
            position: relative;
            top:45px;left: 22px;
        }
      #p .gg:hover {
            background: url("images/menu1.gif");
            border: 1px solid #b6dbf5;
            font-size: 10px;
            position: relative;
            top:45px;left: 22px;
        }
        li{
            list-style: none;
            font-size: 10px;
            line-height: 25px;
        }
        ul{
            position: relative;
            top: 40px;right:10px;
        }
        a{
            text-decoration: none;
        }
        a:hover{
            color: #880000;

        }
        #ul2,#ul3{
            display: none;
        }
    </style>
</head>
<body>
<div id="img">
<p id="p">
    <input id="ss" οnmοuseοver="a(1)" type="button"value="小说">
    <input id="bb"οnmοuseοver="a(2)"  type="button"value="非小说">
    <input id="aa"οnmοuseοver="a(3)"  type="button"value="少儿">
</p>
    <ul id="ul1">
        <li><a href="">1.时间旅行者的妻子</a></li>
        <li><a href="">2.女心理师（下）</a></li>
        <li><a href="">3.鬼吹灯之精绝古城</a></li>
        <li><a href="">4.女心理师（上）</a></li>
        <li><a href="">5.小时候</a></li>
        <li><a href="">6.追风筝的人</a></li>
        <li><a href="">7.盗墓笔记2</a></li>
        <li><a href="">8.输赢 </a></li>
    </ul>
    <ul id="ul2">
        <li><a href="">1.人生若只如初见</a></li>
        <li><a href="">2.高效能人士的七个..</a></li>
        <li><a href="">3.求医不如求己</a></li>
        <li><a href="">4.人体使用手册</a></li>
        <li><a href="">5.孩子，把你的手给我</a></li>
        <li><a href="">6.别笑！我是英文单词书</a></li>
        <li><a href="">7.人体经络使用手册</a></li>
        <li><a href="">8.股市稳赚</a></li>
    </ul>
    <ul id="ul3">
        <li><a href="">1.斯凯瑞金色童书・..</a></li>
        <li><a href="">2.哈利・波特与“混...</a></li>
        <li><a href="">3.不一样的卡梅拉（..</a></li>
        <li><a href="">4.它们是怎么来的</a></li>
        <li><a href="">5.五・三班的坏小子..</a></li>
        <li><a href="">6.男生日记</a></li>
        <li><a href="">7.哈利・波特与魔法石</a></li>
        <li><a href="">8.噼里啪啦丛书(全7册) </a></li>
    </ul>
</div>
<script>
    function a(i) {
        var ul1=document.getElementById("ul1");
        var ul2=document.getElementById("ul2");
        var ul3=document.getElementById("ul3");
        if(i==1){
            ul1.style.display="block";
            ul2.style.display="none";
            ul3.style.display="none";
        }else if(i==2){
            ul1.style.display="none";
            ul2.style.display="block";
            ul3.style.display="none";
        }else{
            ul1.style.display="none";
            ul2.style.display="none";
            ul3.style.display="block";
        }
        var si=document.getElementById("ss");
        si.className='gg';
        var si1=document.getElementById("bb");
        si1.className='gg';
        var si2=document.getElementById("aa");
        si2.className='gg';
    }
</script>
</body>
</html>