JS開發前端團隊展示控制器來為成員引流

2022-08-12 14:04:03

一.前言

之前的倆個伺服器開發完專案之後，有點閒置浪費了，秉著最大化利用資源的原則，我又搭建了一個宣傳網站，用開宣傳我的團隊，因為他們個人都有個人部落格，所以寫了一個開發團隊展示控制器來為成員引流。大體截圖如下：

寫了一些滑鼠懸浮樣式變化，左右的黃色小按鈕可以左右的點選來回圈展示我的開發團隊成員，每個開發團隊的部落格為跳轉連結，這樣可以方便使用者引流我的開發團隊的個人部落格。

二.想法設計/實現過程

秉持著最少空間可以展示更多內容的原則，我初步的想法是，上面寫一個開發團隊介紹ABOUT WE，來增加可觀性，上面是一個圓的存放開發團隊的頭像，下面是開發團隊的姓名，開發團隊的部落格名稱，開發團隊成員的個性簽名。這就是穩定初步想法：

三.基本樣式

我們需要先寫一下上面的任務，上面寫一個開發團隊介紹ABOUT WE，來增加可觀性。所以，html為下面樣式：

<!-- 我的團隊 -->
<div class="team">
        <div class="teamtitle"><span>————開發團隊介紹<small>ABOUT WE</small>————&emsp;&emsp;&emsp;<a
                                onClick="joinwe()">加入我們</a></span>
        </div>
</div>

然後寫一下css來控制一下樣式，增加美觀性：

.team {
    position: relative;
    margin-top: 10px;
    width: 100%;
    height: 600px;
    background-color: #f4f5f7;
}
.team .teamtitle {
    position: absolute;
    top: 40px;
    left: 50%;
    margin-left: -242px;
}

效果如圖所示：

3.1展示樣式設計

下一個任務就是寫開發團隊成員的的頭像，下面是開發團隊的姓名，開發團隊的部落格名稱，開發團隊成員的個性簽名。 html程式碼如下所示：

<div class="aboutteam">
<div class="aboutwe">
        <div class="weimg">
                <img src="xxx">
        </div>
        <span class="teamname">朱博</span>
        <a class="teama" href="https://blog.csdn.net/weixin_52908342" rel="external nofollow"  target="_blank">部落格：上進小菜豬</a>
        <span class="teamjiesao">努力做全棧，目前很菜。</span>
        <div class="btn">
                <span class="btn-l"><</span>
                <span class="btn-r">></span>
        </div>
</div>
</div>

寫完了html下一步我們該寫一下css來進行一個美化，儘可能的美觀，以增加使用者的互動性，css程式碼如下：

.team .aboutteam {
        display: none;
}
.team .aboutteam:nth-child(2) {
        display: block;
}
.team a:hover {
        color: #afb42b;
        cursor: pointer;
}

目前寫完html和css的樣式如下：

3.2 js展示控制器

為了實現點選旁邊的倆個按鈕進行左右的迴圈往復展示所有開發團隊成員的名片，我寫了一個開發團隊展示控制器：需要我們提取映入jqurey，然後寫一下js獲取當前頁面索引，對其置0，對上面的html元素進行隱藏操作，只顯示目前的元素開發團隊成員的個人資訊，相關js如下：

// jqurey
$(function() {
        var coun = 0;
        var down;
        shijian();
        function shijian() {
                down = setInterval(function() {
                        if (coun == 2) {
                                coun = 0;
                                $(".boximg").css("opacity", "0");
                                $(".boximg").eq(coun).css("opacity", "1");
                                $('.uilishow').css('background-color', '#fff');
                                $('.uilishow').eq(coun).css('background-color', 'skyblue');
                                if (coun == 0) {
                                        showtext1();
                                }
                                if (coun == 1) {
                                        showtext2();
                                }
                                if (coun == 2) {
                                        showtext3();
                                }
                        } else {
                                coun++;
                                $(".boximg").css("opacity", "0");
                                $(".boximg").eq(coun).css("opacity", "1");
                                $('.uilishow').css('background-color', '#fff');
                                $('.uilishow').eq(coun).css('background-color', 'skyblue');
                                if (coun == 0) {
                                        showtext1();
                                }
                                if (coun == 1) {
                                        showtext2();
                                }
                                if (coun == 2) {
                                        showtext3();
                                }
                        }
                }, 5000);
        }

寫一個迴圈控制器，我們思考一下，如果現在是最後一個團隊成員的名片，我們點選下一個是需要對其索引置0的：這樣就實現迴圈展示的需求！

$(".uilishow").click(function() {
    clearInterval(down);
    var sum = $(this).index();
    coun = sum;
    $(".boximg").css("opacity", "0");
    $(".boximg").eq(coun).css("opacity", "1");
    $('.uilishow').css('background-color', '#fff');
    $('.uilishow').eq(coun).css('background-color', 'skyblue');
    shijian();
    if (coun == 0) {
            showtext1();
    }
    if (coun == 1) {
            showtext2();
    }
    if (coun == 2) {
            showtext3();
    }
});

3.3 簡歷投遞按鈕

當然我們為了增加團隊成員，寫了應該簡歷投遞按鈕具體要求如下，需要有：加入我們，我們希望開發團隊成員：下面是要求..... 還有基本的個人需求收集，專業年級，自我介紹等等。

<div class="part">
<!-- <form action="index.html" method="post"> -->
<form action="index.html">
        <h1>加入我們</h1><a onClick="hide()">×</a>
        <h4>我們希望開發團隊成員：
                ①有著堅持學習的精神。
                ②就業方向為開發方向。
                ③掌握前端（至少熟練掌握一個前端框架的使用）
                ④熟練掌握python/Java/go,並且至少要有熟練理解運用一個後端框架。
                ⑤同時歡迎全棧大佬加入。
                ⑥技術共用，可以互相指導幫助。
                ⑦3-4 條件可放寬。</h4>
        <span>姓&emsp;&emsp;名：</span><input type="text" id="names" size="18px">
        <span>性別：
                <select id="skills" name="skills">
                        <option value="mull">請選擇</option>
                        <option value="1">男</option>
                        <option value="0">女</option>
                </select>
                <span>專業年級：</span><input type="text" id="ganders" size="18px">
                <span>自我介紹：</span>
<textarea name="textarea" cols="30" rows="5"></textarea>
                <div class="submitx">
                        <input type="submit" value="投遞" onClick="hidex()">
                </div>
</form>
</div>

四. 成果展示

以上就是JS開發前端團隊展示控制器來為成員引流的詳細內容，更多關於JS前端展示控制器引流的資料請關注it145.com其它相關文章！