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 相关文章推荐
js下写一个事件队列操作函数
Jul 19 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
Apr 07 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
May 12 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
May 03 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
Sep 14 Javascript
Vue之Vue.set动态新增对象属性方法
Feb 23 Javascript
JS实现的透明度渐变动画效果示例
Apr 28 Javascript
vue-better-scroll 的使用实例代码详解
Dec 03 Javascript
原生javascript实现连连看游戏
Jan 03 Javascript
如何解决.vue文件url引用文件的问题
Jan 18 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 10 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
香妃
2021/03/03 冲泡冲煮
PHP中的正则表达式函数介绍
2012/02/27 PHP
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
pjblog中的UBBCode.js
2007/04/25 Javascript
Javascript 自适应高度的Tab选项卡
2011/04/05 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
JQuery触发事件例如click
2013/09/11 Javascript
JavaScript中数据结构与算法(三):链表
2015/06/19 Javascript
AngularJS入门教程之静态模板详解
2016/08/18 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
2018/05/23 jQuery
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
python采集博客中上传的QQ截图文件
2014/07/18 Python
Python命名空间详解
2014/08/18 Python
Python threading多线程编程实例
2014/09/18 Python
python字符串str和字节数组相互转化方法
2017/03/18 Python
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
Python3多线程版TCP端口扫描器
2019/08/31 Python
python中count函数知识点浅析
2020/12/17 Python
详解Canvas实用库Fabric.js使用手册
2019/01/07 HTML / CSS
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
介绍一下Linux文件的记录形式
2012/04/18 面试题
MySQL面试题目集锦
2016/04/14 面试题
建筑工程技术应届生求职信
2013/11/17 职场文书
省三好学生申请材料
2014/01/22 职场文书
美丽乡村建设实施方案
2014/03/23 职场文书
给客户的检讨书
2014/12/21 职场文书
2015年事业单位办公室文员工作总结
2015/04/24 职场文书
2016大学生国家助学贷款承诺书
2016/03/25 职场文书
为什么 Nginx 比 Apache 更牛逼
2021/03/31 Servers
spring cloud 配置中心native配置方式
2021/09/25 Java/Android
正则表达式拆分url实例代码
2022/02/24 Java/Android