JQuery8：實戰案例

尹成發表於2018-11-14
jQuery

#1.手風琴
在頁面上呈現手風琴樣式得風景圖，預設只有一張圖片可見，其他不可見，在點選某張圖片得標題時顯示該張圖片，隱藏之前現實的圖片。
效果圖:
點選之前：
這裡寫圖片描述
點選之後：
這裡寫圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非洲手風情</title>

    <style type="text/css">

        *{
            margin: 0;
            padding: 0;
        }

        #accordion {
            margin: 20px auto 0;
            /*border: 1px solid black;*/
            width: 727px;
            height: 350px;
            position: relative;
            overflow: hidden;
        }

        ul {
            list-style: none;
        }

        li {
            position: absolute;
            top: 0;
            overflow: hidden;
            width: 643px;
            height: 350px;
        }

        li span, li img {
            float: left;
            display: block;
        }

        li span {
            width: 20px;
            height: 350px;
            display: block;
            padding: 0;
            border-right: 1px solid white;
        }

        li img{
            width: 622px;
            height: 350px;
        }

        .bar01 span {
            background-color: red;
        }

        .bar02 span {
            background-color: orange;
        }

        .bar03 span {
            background-color: yellow;
        }

        .bar04 span {
            background-color: green;
        }

        .bar05 span {
            background-color: lightskyblue;
        }

    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            
            $("ul li").each(function (i) {
                $(this).css({
                    left:0+21*i,
                })
            });
            
            var current = $("#accordion li").length - 1;
            $('#accordion').delegate("li","click",function () {
                var target = $(this).index();
                $("#accordion li").each(function (i) {
                    if(target < current){
                        if(i>target && i<=current){
                            $(this).animate({
                                left:727-21*(5-i)
                            },300,function () {
                                current = target;
                            })
                        }
                    }else if(target > current){
                        if(i>current && i<=target){
                            $(this).animate({
                                left:0+21*i,
                            },300,function () {
                                current = target;
                            })
                        }
                    }

                })
            })
        });
    </script>

</head>
<body>
<div id="accordion">
    <ul>
        <li class="bar01"><span>非洲景色01</span><img src="images/001.jpg"/></li>
        <li class="bar02"><span>非洲景色02</span><img src="images/002.jpg"/></li>
        <li class="bar03"><span>非洲景色03</span><img src="images/003.jpg"/></li>
        <li class="bar04"><span>非洲景色04</span><img src="images/004.jpg"/></li>
        <li class="bar05"><span>非洲景色05</span><img src="images/005.jpg"/></li>
    </ul>
</div>
</body>
</html>

#2.無縫滾動
在頁面顯示滾動效果(向左或向右)，在點選向左時則向左滾動，點選向右滾動時則相右滾動，滑鼠在某一個方格中停頓則停止滾動。
效果圖：
這裡寫圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>無縫滾動</title>
    <style type="text/css">

        /*常規預設*/
        body, ul, li {
            margin: 0;
            padding: 0
        }

        ul {
            list-style: none;
        }

        /*列表容器*/
        .slide {
            width: 500px;
            height: 100px;
            border: 1px solid #ddd;
            margin: 20px auto 0;

            /*絕對定位參照系*/
            position: relative;

            /*畫外部分隱藏*/
            overflow: hidden;
        }

        /*ul的寬度是容器的兩倍*/
        .slide ul {
            position: absolute;
            width: 1000px;
            height: 100px;

            /*絕對定位偏移量0*/
            left: 0;
            top: 0;
        }

        /*正常水平排列的li*/
        .slide ul li {
            width: 90px;
            height: 90px;
            margin: 5px;
            background-color: #ccc;
            line-height: 90px;
            text-align: center;
            font-size: 30px;
            float: left;
        }

        /*按鈕容器*/
        .btns {
            width: 500px;
            height: 50px;
            margin: 10px auto 0;
            text-align: center;
        }

    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {

            var $btn1 = $("#btn1");
            var $btn2 = $("#btn2");
            var $ul = $(".slide ul");

            var offset = 2;
            var left = 0;
            var direction = "right";
            var $timer;

            //拷貝一份
            $ul.html($ul.html() + $ul.html())

            $btn1.click(function () {
                direction = "left";
            });
            $btn2.click(function () {
                direction = "right";
            });

            $ul.hover(
                function () {
                    clearInterval($timer);
                },
                function () {
                    $timer = setInterval(function () {
                        reload();
                    }, 20);
                }
            );

            function reload() {
                if (direction == "right") {
                    left += offset;
                    if(left > 0){
                        left = -500;
                    }
                } else {
                    left -= offset;
                    if(left < -500){
                        left = 0;
                    }
                }

                //改變整個ul的偏移量
                $ul.css({left: left})
            }

            //開始週期性滾動
            $timer = setInterval(function () {
                reload();
            }, 20)

        })
    </script>
</head>
<body>
<div class="btns">
    <input type="button" name="" value="向左" id="btn1">
    <input type="button" name="" value="向右" id="btn2">
</div>
<div class="slide" id="slide">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
</body>
</html>

#3.美女相簿
在頁面上顯示美女圖片，當點選某位美女時顯示該美女得大圖。
效果圖：
這裡寫圖片描述
點選美女A：
這裡寫圖片描述

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    body {
      font-family: "Helvetica", "Arial", serif;
      color: #333;
      background-color: #ccc;
      margin: 1em 10%;
    }
    
    h1 {
      color: #333;
      background-color: transparent;
    }
    
    a {
      color: #c60;
      background-color: transparent;
      font-weight: bold;
      text-decoration: none;
    }
    
    ul {
      padding: 0;
    }
    
    li {
      float: left;
      padding: 1em;
      list-style: none;
    }
    
    #imagegallery {
      
      list-style: none;
    }
    
    #imagegallery li {
      margin: 0px 20px 20px 0px;
      padding: 0px;
      display: inline;
    }
    
    #imagegallery li a img {
      border: 0;
    }
  </style>
  
  <script src="../jquery-1.12.4.js"></script>
  <script>
    $(function () {
      //1. 給所有的a註冊點選事件
      
      
      $("#imagegallery a").click(function () {
        var href = $(this).attr("href");
        $("#image").attr("src", href);
        
        var title = $(this).attr("title");
        $("#des").text(title);
        
        return false;
      });
    });
  </script>
</head>
<body>
<h2>
  美女畫廊
</h2>

<ul id="imagegallery">
  <li><a href="images/1.jpg" title="美女A">
    <img src="images/1-small.jpg" width="100" alt="美女1"/>
  </a></li>
  <li><a href="images/2.jpg" title="美女B">
    <img src="images/2-small.jpg" width="100" alt="美女2"/>
  </a></li>
  <li><a href="images/3.jpg" title="美女C">
    <img src="images/3-small.jpg" width="100" alt="美女3"/>
  </a></li>
  <li><a href="images/4.jpg" title="美女D">
    <img src="images/4-small.jpg" width="100" alt="美女4"/>
  </a></li>
</ul>

<div style="clear:both"></div>

<img id="image" src="images/placeholder.png" alt="" width="450px"/>

<p id="des">選擇一個圖片</p>

</body>
</html>

學院Go語言視訊主頁
https://edu.csdn.net/lecturer/1928

清華團隊帶你實戰區塊鏈開發
掃碼獲取海量視訊及原始碼 QQ群：721929980
在這裡插入圖片描述

相關文章