JS開發(fā)前端團隊展示控制器來為成員引流
一.前言
之前的倆個服務器開發(fā)完項目之后，有點閑置浪費了，秉著最大化利用資源的原則，我又搭建了一個宣傳網(wǎng)站，用開宣傳我的團隊，因為他們個人都有個人博客，所以寫了一個開發(fā)團隊展示控制器來為成員引流。 大體截圖如下：
寫了一些鼠標懸浮樣式變化，左右的黃色小按鈕可以左右的點擊來循環(huán)展示我的開發(fā)團隊成員，每個開發(fā)團隊的博客為跳轉鏈接，這樣可以方便用戶引流我的開發(fā)團隊的個人博客。
二.想法設計/實現(xiàn)過程
秉持著最少空間可以展示更多內(nèi)容的原則，我初步的想法是，上面寫一個開發(fā)團隊介紹ABOUT WE，來增加可觀性，上面是一個圓的存放開發(fā)團隊的頭像，下面是開發(fā)團隊的姓名，開發(fā)團隊的博客名稱，開發(fā)團隊成員的個性簽名。 這就是穩(wěn)定初步想法：
三.基本樣式
我們需要先寫一下上面的任務，上面寫一個開發(fā)團隊介紹ABOUT WE，來增加可觀性。所以，html為下面樣式：
<!-- 我的團隊 -->
<div class="team">
<div class="teamtitle"><span>————開發(fā)團隊介紹<small>ABOUT WE</small>————   <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展示樣式設計
下一個任務就是寫開發(fā)團隊成員的的頭像，下面是開發(fā)團隊的姓名，開發(fā)團隊的博客名稱，開發(fā)團隊成員的個性簽名。 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">博客：上進小菜豬</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展示控制器
為了實現(xiàn)點擊旁邊的倆個按鈕進行左右的循環(huán)往復展示所有開發(fā)團隊成員的名片，我寫了一個開發(fā)團隊展示控制器： 需要我們提取映入jqurey，然后寫一下js獲取當前頁面索引，對其置0，對上面的html元素進行隱藏操作，只顯示目前的元素開發(fā)團隊成員的個人信息，相關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);
}
寫一個循環(huán)控制器，我們思考一下，如果現(xiàn)在是最后一個團隊成員的名片，我們點擊下一個是需要對其索引置0的：這樣就實現(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 簡歷投遞按鈕
當然我們?yōu)榱嗽黾訄F隊成員，寫了應該簡歷投遞按鈕具體要求如下，需要有： 加入我們，我們希望開發(fā)團隊成員：下面是要求..... 還有基本的個人需求收集，專業(yè)年級，自我介紹等等。
<div class="part">
<!-- <form action="index.html" method="post"> -->
<form action="index.html">
<h1>加入我們</h1><a onClick="hide()">×</a>
<h4>我們希望開發(fā)團隊成員：
①有著堅持學習的精神。
②就業(yè)方向為開發(fā)方向。
③掌握前端（至少熟練掌握一個前端框架的使用）
④熟練掌握python/Java/go,并且至少要有熟練理解運用一個后端框架。
⑤同時歡迎全棧大佬加入。
⑥技術共享，可以互相指導幫助。
⑦3-4 條件可放寬。</h4>
<span>姓  名：</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>專業(yè)年級：</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開發(fā)前端團隊展示控制器來為成員引流的詳細內(nèi)容，更多關于JS前端展示控制器引流的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了微信小程序 同步請求授權的詳解的相關資料,在小程序首次打開的時候，我需要同時請求獲取多個權限，由用戶逐一授權，這樣的需求實現(xiàn)，需要的朋友可以參考下2017-08-08
這篇文章主要介紹了微信小程序中button組件的邊框設置的實例詳解的相關資料,希望通過本文大家能夠掌握這部分內(nèi)容，需要的朋友可以參考下2017-09-09
Javascript中彈窗confirm與prompt的區(qū)別
今天小編就為大家分享一篇關于Javascript中彈窗confirm與prompt的區(qū)別，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2018-10-10
這篇文章主要介紹了微信小程序支付之c#后臺實現(xiàn)方法的相關資料,希望通過本文能幫助到大家，讓大家實現(xiàn)這樣的功能，需要的朋友可以參考下2017-10-10
這篇文章主要介紹了微信小程序 progress組件詳解及實例代碼的相關資料,需要的朋友可以參考下2016-10-10
axios進度條onDownloadProgress函數(shù)total參數(shù)undefined解決分析
這篇文章主要介紹了axios進度條onDownloadProgress函數(shù)total參數(shù)undefined解決分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
VSCode多行注釋插件KoroFileHeader使用示例
這篇文章主要為大家介紹了VSCode多行注釋插件KoroFileHeader使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要介紹了微信小程序 支付后臺java實現(xiàn)實例的相關資料,需要的朋友可以參考下2017-05-05
微信小程序 swiper制作tab切換實現(xiàn)附源碼
這篇文章主要介紹了微信小程序 swiper制作tab切換實現(xiàn)代碼的相關資料,需要的朋友可以參考下2017-01-01
JavaScript+HTML實現(xiàn)學生信息管理系統(tǒng)
這篇文章主要介紹了JavaScript實現(xiàn)學生信息管理系統(tǒng),文中有非常詳細的代碼示例,對正在學習js的小伙伴們有一定的幫助,需要的朋友可以參考下2021-04-04