使用jQuery高效制作网页特效第三章习题

最新推荐文章于 2020-02-25 12:18:57 发布

wsbbdbjay

最新推荐文章于 2020-02-25 12:18:57 发布

阅读量2.4k

点赞数 1

本文链接：https://blog.csdn.net/wsbbdbjay/article/details/81077114

版权


<!DOCTYPE html>
<html>
<head lang="en">
    <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: 13px;
       }
   </style>
</head>
<body>
<div class="scroll">
    <div id="num">
        <a href="#" onmouseover="down(1)">1</a>
        <a href="#" onmouseover="down(2)">2</a>
        <a href="#" onmouseover="down(3)">3</a>
        <a href="#" onmouseover="down(4)">4</a>
        <a href="#" onmouseover="down(5)">5</a>
    </div>
    <img src="1.gif" alt="图片" id="photo"/>
</div>
<script>
            function down(num) {
           var it=document.getElementById("photo");
                if(num==1){
                    it.setAttribute("src","1.gif")
                }else if(num==2){
                 it.setAttribute("src","2.gif")
             }else if(num==3){
                 it.setAttribute("src","3.jpg")
             }else if(num==4){
                 it.setAttribute("src","4.jpg")
             }else {
                 it.setAttribute("src","5.gif")
             }
            }
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>上传文件</title>
    <style>
        #main{margin:0 auto; width: 500px;}
        dl{clear: both; width: 100%;}
        dt{
            float: left;
            width: 100px;
            text-align: right;
        }#addBtn{
                     margin:0 auto; width: 500px;
                 }
    </style>
</head>
<body>
<div id="main">
    <dl id="upload">
        <dt>文件路径：</dt>
        <dd><input name="fileImages" type="file" /></dd>
    </dl>
</div>
    <div id="addBtn">
        <input id="up" type="button" onclick="down()" value="再上传一个文件" />
    </div>
</body>
<script>
      function down() {
         var i=document.getElementById("upload");
         var copy =i.cloneNode(true);
          document.getElementById("main").appendChild(copy);
      }
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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;}
        .div_bg{
            background-image:url(bg.jpg);
            background-repeat:no-repeat;
            width:169px;
            height:290px;
            margin-top: 0px;
            margin-right: auto;
            margin-bottom: 0px;
            margin-left: 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-image:url(menu2.gif);
            background-repeat:no-repeat;
            height:23px;
            width:47px;
            text-align:center;}

        .nobg{background-image:url(menu1.gif);
            background-repeat:no-repeat;
            height:23px;
            width:47px;
            text-align:center;
        }
    </style>
</head>
<body>
<div class="div_bg">
    <ul>
        <li class="nobg"  id="bg1" onmouseover="over(this,0)" onmouseout="out(this)"><a class="white">小说</a></li>
        <li class="nobg"  id="bg2" onmouseover="over(this,1)" onmouseout="out(this)"><a class="white">非小说</a></li>
        <li class="nobg"  id="bg3" onmouseover="over(this,2)" onmouseout="out(this)"><a class="white">少儿</a></li>
    </ul>
    <div name="book">
        <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 name="book"  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 name="book" 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>
<script>
         document.getElementById("book2").style.display="none";
         document.getElementById("book3").style.display="none";
         var divArr = document.getElementsByName("book");
         function over(it,i) {
                    it.className  = "bg";
               for(var j = 0; j < divArr.length; j++){
                   if(j == i){
                       divArr[j].style.display = "block";
                   }else{
                       divArr[j].style.display = "none";
                   }
               }
         }
         function out(it) {
             it.className  = "nobg";
         }
</script>
</body>
</html>