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 DOM学习第八章 表单错误提示
Feb 19 Javascript
jQuery 表格插件整理
Apr 27 Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 Javascript
jQuery中next方法用法实例
Apr 24 Javascript
纯JavaScript代码实现移动设备绘图解锁
Oct 16 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
Mar 18 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
jQuery增加、删除及修改select option的方法
Aug 19 Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Mar 31 Javascript
Vue项目利用axios请求接口下载excel
Nov 17 Vue.js
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/02/28 PHP
PHP英文字母大小写转换函数小结
2014/05/03 PHP
php使用PDO操作MySQL数据库实例
2014/12/30 PHP
php实现curl模拟ftp上传的方法
2015/07/29 PHP
学习PHP Cookie处理函数
2016/08/09 PHP
PHP基于新浪IP库获取IP详细地址的方法
2017/05/04 PHP
JQuery拖拽元素改变大小尺寸实现代码
2012/12/10 Javascript
单击复制文字兼容各浏览器的完美解决方案
2013/07/04 Javascript
JS判断移动端访问设备并加载对应CSS样式
2014/06/13 Javascript
javaScript实现可缩放的显示区效果代码
2015/10/26 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
使用pm2自动化部署node项目的方法步骤
2019/01/28 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
[05:39]2014DOTA2西雅图国际邀请赛 淘汰赛7月14日TOPPLAY
2014/07/14 DOTA
Python中给List添加元素的4种方法分享
2014/11/28 Python
基于wxpython实现的windows GUI程序实例
2015/05/30 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
Django Form 实时从数据库中获取数据的操作方法
2019/07/25 Python
python破解同事的压缩包密码
2020/10/14 Python
南非最受欢迎的时尚品牌:MRP
2016/09/18 全球购物
丽笙酒店官方网站:Radisson Hotels
2019/05/07 全球购物
干部下基层实施方案
2014/03/14 职场文书
社区志愿者活动总结
2014/06/26 职场文书
公司财务会计主管应聘求职信
2014/09/26 职场文书
市委常委会班子党的群众路线教育实践活动整改方案
2014/10/25 职场文书
营运督导岗位职责
2015/04/10 职场文书
幼儿园食品安全责任书
2015/05/08 职场文书
务工证明怎么写
2015/06/18 职场文书
退休欢送会主持词
2015/07/01 职场文书
2016年国培心得体会及反思
2016/01/13 职场文书
用Python监控你的朋友都在浏览哪些网站?
2021/05/27 Python
Python OpenCV实现图形检测示例详解
2022/04/08 Python