JS开发前端团队展示控制器来为成员引流


Posted in Javascript onAugust 14, 2022

一.前言

之前的俩个服务器开发完项目之后,有点闲置浪费了,秉着最大化利用资源的原则,我又搭建了一个宣传网站,用开宣传我的团队,因为他们个人都有个人博客,所以写了一个开发团队展示控制器来为成员引流。 大体截图如下:

JS开发前端团队展示控制器来为成员引流

写了一些鼠标悬浮样式变化,左右的黄色小按钮可以左右的点击来循环展示我的开发团队成员,每个开发团队的博客为跳转链接,这样可以方便用户引流我的开发团队的个人博客。

二.想法设计/实现过程

秉持着最少空间可以展示更多内容的原则,我初步的想法是,上面写一个开发团队介绍ABOUT WE,来增加可观性,上面是一个圆的存放开发团队的头像,下面是开发团队的姓名,开发团队的博客名称,开发团队成员的个性签名。 这就是稳定初步想法:

JS开发前端团队展示控制器来为成员引流

三.基本样式

我们需要先写一下上面的任务,上面写一个开发团队介绍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;
}

效果如图所示:

JS开发前端团队展示控制器来为成员引流

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的样式如下:

JS开发前端团队展示控制器来为成员引流

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开发前端团队展示控制器来为成员引流

以上就是JS开发前端团队展示控制器来为成员引流的详细内容,更多关于JS前端展示控制器引流的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
javascript将数组插入到另一个数组中的代码
Jan 10 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
Feb 25 Javascript
js操作iframe的一些方法介绍
Jun 25 Javascript
js实现身份证号码验证的简单实例
Feb 19 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
node.js解决获取图片真实文件类型的问题
Dec 20 Javascript
Jquery中$.post和$.ajax的用法小结
Apr 28 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
Mar 02 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
微信小程序模板消息限制实现无限制主动推送的示例代码
Aug 27 Javascript
vue 使用外部JS与调用原生API操作示例
Dec 02 Javascript
使用Vant完成通知栏Notify的提示操作
Nov 11 Javascript
JS实现页面炫酷的时钟特效示例
Rust中的Struct使用示例详解
Aug 14 #Javascript
使用Cargo工具高效创建Rust项目
Aug 14 #Javascript
JS实现刷新网页后之前浏览位置保持不变示例详解
Aug 14 #Javascript
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 #Vue.js
Vue深入理解插槽slot的使用
Aug 05 #Vue.js
React如何使用axios请求数据并把数据渲染到组件
Aug 05 #Javascript
You might like
PHP利用hash冲突漏洞进行DDoS攻击的方法分析
2015/03/26 PHP
WordPress特定文章对搜索引擎隐藏或只允许搜索引擎查看
2015/12/31 PHP
Laravel利用gulp如何构建前端资源详解
2018/06/03 PHP
php实现的顺序线性表示例
2019/05/04 PHP
各种常用浏览器getBoundingClientRect的解析
2009/05/21 Javascript
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
javascript中encodeURI和decodeURI方法使用介绍
2013/05/06 Javascript
Jquery Ajax xmlhttp请求成功问题
2015/02/04 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
微信小程序 label 组件详解及简单实例
2017/01/10 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
Node.js如何对SQLite的async/await封装详解
2019/02/14 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
[02:10]DOTA2 TI10勇士令状玩法及不朽Ⅰ展示:焕新世界,如你所期
2020/05/29 DOTA
python实现批量改文件名称的方法
2015/05/25 Python
理解Python中的绝对路径和相对路径
2017/08/30 Python
利用Python进行异常值分析实例代码
2017/12/07 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
python批量图片处理简单示例
2019/08/06 Python
简单了解python列表和元组的区别
2020/05/14 Python
Python如何实现定时器功能
2020/05/28 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
采用冷却技术的超自然舒适度:GhostBed床垫
2018/09/18 全球购物
eBay意大利购物网站:eBay.it
2019/09/04 全球购物
光荣入党自我鉴定
2014/01/22 职场文书
总经理司机职责
2014/02/02 职场文书
一般党员对照检查材料
2014/09/24 职场文书
农村文化建设标语
2014/10/07 职场文书
2014年食品安全工作总结
2014/12/04 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android