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 相关文章推荐
28个JS验证函数收集
Mar 02 Javascript
jQuery拖拽div实现思路
Feb 19 Javascript
JS 在指定数组中随机取出N个不重复的数据
Jun 10 Javascript
JS建造者模式基本用法实例分析
Jun 30 Javascript
js解决movebox移动问题
Mar 29 Javascript
JS实现改变HTML上文字颜色和内容的方法
Dec 30 Javascript
微信小程序 chooseImage选择图片或者拍照
Apr 07 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
Jan 09 Javascript
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
vue实现一个矩形标记区域(rectangle marker)的方法
Oct 28 Javascript
JavaScript 中的六种循环方法
Jan 06 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实现的英文名字全拼随机排号脚本
2014/07/04 PHP
24条货真价实的PHP代码优化技巧
2016/07/28 PHP
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
2013/08/08 Javascript
纯js简单日历实现代码
2013/10/05 Javascript
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
2016/03/11 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
2016/05/19 Javascript
JS作用域链详解
2017/06/26 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
2018/07/23 jQuery
详解js的视频和音频采集
2018/08/09 Javascript
vue+iview+less 实现换肤功能
2018/08/17 Javascript
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
vue watch监控对象的简单方法示例
2021/01/07 Vue.js
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
python 转换 Javascript %u 字符串为python unicode的代码
2016/09/06 Python
windows下python安装小白入门教程
2018/09/18 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
三个python爬虫项目实例代码
2019/12/28 Python
Python Matplotlib绘图基础知识代码解析
2020/08/31 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
大学活动总结范文
2014/04/29 职场文书
革命英雄事迹演讲稿
2014/09/13 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
2015年圣诞节寄语
2015/08/17 职场文书
2019年怎样写好导游词?
2019/07/02 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书
MySQL数据库超时设置配置的方法实例
2021/10/15 MySQL
Mysql排序的特性详情
2021/11/01 MySQL
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript