快捷導(dǎo)航

JS開發(fā)前端團(tuán)隊(duì)展示控制器來為成員引流

更新時(shí)間：2022年08月12日 09:46:40 作者：上進(jìn)小菜豬

這篇文章主要為大家介紹了JS開發(fā)前端團(tuán)隊(duì)展示控制器實(shí)現(xiàn)為成員引流示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

一.前言

之前的倆個(gè)服務(wù)器開發(fā)完項(xiàng)目之后，有點(diǎn)閑置浪費(fèi)了，秉著最大化利用資源的原則，我又搭建了一個(gè)宣傳網(wǎng)站，用開宣傳我的團(tuán)隊(duì)，因?yàn)樗麄儌€(gè)人都有個(gè)人博客，所以寫了一個(gè)開發(fā)團(tuán)隊(duì)展示控制器來為成員引流。大體截圖如下：

寫了一些鼠標(biāo)懸浮樣式變化，左右的黃色小按鈕可以左右的點(diǎn)擊來循環(huán)展示我的開發(fā)團(tuán)隊(duì)成員，每個(gè)開發(fā)團(tuán)隊(duì)的博客為跳轉(zhuǎn)鏈接，這樣可以方便用戶引流我的開發(fā)團(tuán)隊(duì)的個(gè)人博客。

二.想法設(shè)計(jì)/實(shí)現(xiàn)過程

秉持著最少空間可以展示更多內(nèi)容的原則，我初步的想法是，上面寫一個(gè)開發(fā)團(tuán)隊(duì)介紹ABOUT WE，來增加可觀性，上面是一個(gè)圓的存放開發(fā)團(tuán)隊(duì)的頭像，下面是開發(fā)團(tuán)隊(duì)的姓名，開發(fā)團(tuán)隊(duì)的博客名稱，開發(fā)團(tuán)隊(duì)成員的個(gè)性簽名。這就是穩(wěn)定初步想法：

三.基本樣式

我們需要先寫一下上面的任務(wù)，上面寫一個(gè)開發(fā)團(tuán)隊(duì)介紹ABOUT WE，來增加可觀性。所以，html為下面樣式：

<!-- 我的團(tuán)隊(duì) -->
<div class="team">
        <div class="teamtitle"><span>————開發(fā)團(tuán)隊(duì)介紹<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展示樣式設(shè)計(jì)

下一個(gè)任務(wù)就是寫開發(fā)團(tuán)隊(duì)成員的的頭像，下面是開發(fā)團(tuán)隊(duì)的姓名，開發(fā)團(tuán)隊(duì)的博客名稱，開發(fā)團(tuán)隊(duì)成員的個(gè)性簽名。 html代碼如下所示：

<div class="aboutteam">
<div class="aboutwe">
        <div class="weimg">
                <img src="xxx">
        </div>
        <span class="teamname">朱博</span>
        <a class="teama"  rel="external nofollow"  target="_blank">博客：上進(jìn)小菜豬</a>
        <span class="teamjiesao">努力做全棧，目前很菜。</span>
        <div class="btn">
                <span class="btn-l"><</span>
                <span class="btn-r">></span>
        </div>
</div>
</div>

寫完了html下一步我們?cè)搶懸幌耤ss來進(jìn)行一個(gè)美化，盡可能的美觀，以增加用戶的交互性，css代碼如下：

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

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

3.2 js展示控制器

為了實(shí)現(xiàn)點(diǎn)擊旁邊的倆個(gè)按鈕進(jìn)行左右的循環(huán)往復(fù)展示所有開發(fā)團(tuán)隊(duì)成員的名片，我寫了一個(gè)開發(fā)團(tuán)隊(duì)展示控制器：需要我們提取映入jqurey，然后寫一下js獲取當(dāng)前頁面索引，對(duì)其置0，對(duì)上面的html元素進(jìn)行隱藏操作，只顯示目前的元素開發(fā)團(tuán)隊(duì)成員的個(gè)人信息，相關(guān)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);
        }

寫一個(gè)循環(huán)控制器，我們思考一下，如果現(xiàn)在是最后一個(gè)團(tuán)隊(duì)成員的名片，我們點(diǎn)擊下一個(gè)是需要對(duì)其索引置0的：這樣就實(shí)現(xiàn)循環(huán)展示的需求！

$(".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 簡(jiǎn)歷投遞按鈕

當(dāng)然我們?yōu)榱嗽黾訄F(tuán)隊(duì)成員，寫了應(yīng)該簡(jiǎn)歷投遞按鈕具體要求如下，需要有：加入我們，我們希望開發(fā)團(tuán)隊(duì)成員：下面是要求..... 還有基本的個(gè)人需求收集，專業(yè)年級(jí)，自我介紹等等。

<div class="part">
<!-- <form action="index.html" method="post"> -->
<form action="index.html">
        <h1>加入我們</h1><a onClick="hide()">×</a>
        <h4>我們希望開發(fā)團(tuán)隊(duì)成員：
                ①有著堅(jiān)持學(xué)習(xí)的精神。
                ②就業(yè)方向?yàn)殚_發(fā)方向。
                ③掌握前端（至少熟練掌握一個(gè)前端框架的使用）
                ④熟練掌握python/Java/go,并且至少要有熟練理解運(yùn)用一個(gè)后端框架。
                ⑤同時(shí)歡迎全棧大佬加入。
                ⑥技術(shù)共享，可以互相指導(dǎo)幫助。
                ⑦3-4 條件可放寬。</h4>
        <span>姓&emsp;&emsp;名：</span><input type="text" id="names" size="18px">
        <span>性別：
                <select id="skills" name="skills">
                        <option value="mull">請(qǐng)選擇</option>
                        <option value="1">男</option>
                        <option value="0">女</option>
                </select>
                <span>專業(yè)年級(jí)：</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>