仿tembition团队效果

最新推荐文章于 2021-11-05 08:58:00 发布
最新推荐文章于 2021-11-05 08:58:00 发布
阅读量631 收藏
点赞数
分类专栏： js效果 文章标签： js 鼠标 团队成员
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35318273/article/details/78623813
版权

检测的鼠标位置，也可以再加个判断 距离中心点距离一定像素 显示正面照片

留个坑 后期完善

在线预览：地址

码云地址：https://gitee.com/fangxk/single_page/tree/master/ape_teambition

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        .container {
            margin-right: auto;
            margin-left: auto;
            padding-left: 16px;
            padding-right: 16px;
        }
        .members-list {
            font: 400 17px/1.7em "Open Sans", open-sans, sans-serif;
            -webkit-transform-origin: left top;
            -moz-transform-origin: left top;
            -ms-transform-origin: left top;
            transform-origin: left top;
        }
        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden
        }
        .max1010 {
            max-width: 1010px;
        }
        .members-list .member {
            float: left;
            width: 188px;
            height: 188px;
            margin: 0 9px 9px 0;
            cursor: pointer;
        }
        .simple-info {
            display: none;
            position: absolute;
            z-index: 2;
            bottom: 0;
            width: 100%;
            padding: 20px;
        }
        .simple-info .name {
            letter-spacing: 1px;
        }
        .member .simple-info p {
            margin-bottom: 0;
        }
        .simple-info .post {
            font-style: italic;
            -webkit-font-smoothing: antialiased;
        }
        .simple-info .more {
            padding-top: 7px;
            margin-top: 8px;
            border-top: 1px solid rgba(255, 255, 255, .1);
            -webkit-font-smoothing: antialiased;
        }
        .member {
            background: url(image/zhuoqun-oclock.jpg) -1px -2281px;
        }
    </style>
</head>
<body>
<div class="container max1010" style="padding-top: 150px;">
    <div class="members-list clearfix">
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">77</p>
                <p class="post">Founder & CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">77</p>
                <p class="post">Founder & CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">77</p>
                <p class="post">Founder & CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">77</p>
                <p class="post">Founder & CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">77</p>
                <p class="post">Founder & CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">77</p>
                <p class="post">Founder & CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">77</p>
                <p class="post">Founder & CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">77</p>
                <p class="post">Founder & CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">77</p>
                <p class="post">Founder & CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">77</p>
                <p class="post">Founder & CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">77</p>
                <p class="post">Founder & CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">77</p>
                <p class="post">Founder & CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">77</p>
                <p class="post">Founder & CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">77</p>
                <p class="post">Founder & CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">77</p>
                <p class="post">Founder & CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">77</p>
                <p class="post">Founder & CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">77</p>
                <p class="post">Founder & CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">77</p>
                <p class="post">Founder & CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">77</p>
                <p class="post">Founder & CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">77</p>
                <p class="post">Founder & CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">77</p>
                <p class="post">Founder & CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">77</p>
                <p class="post">Founder & CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">77</p>
                <p class="post">Founder & CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">77</p>
                <p class="post">Founder & CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">77</p>
                <p class="post">Founder & CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script>
    $(window).load(function () {
        window.onmousemove = function () {
            $('.member').each(function () {
                    var cl = $(this).offset().left + $(this).width() / 2,
                        ct = $(this).offset().top + $(this).height() / 2,
                        hr = ct - event.pageY,
                        wr = event.pageX - cl,
                        angle = Math.atan2(hr, wr) * 180 / Math.PI,
                        len = Math.pow((hr * hr + wr * wr), 0.5);
                    if (angle >= -15 && angle < 15) {
                        $(this).css('backgroundPosition', '0px -4px')
                    } else if (angle >= 15 && angle < 45) {
                        $(this).css('backgroundPosition', '0px -194px')
                    } else if (angle >= 45 && angle < 75) {
                        $(this).css('backgroundPosition', '0px -1904px')
                    } else if (angle >= 75 && angle < 105) {
                        $(this).css('backgroundPosition', '0px -1710px')
                    } else if (angle >= -45 && angle < -15) {
                        $(this).css('backgroundPosition', '0px -384px')
                    } else if (angle >= -75 && angle < -45) {
                        $(this).css('backgroundPosition', '0px -384px')
                    } else if (angle >= -105 && angle < -75) {
                        $(this).css('backgroundPosition', '0px -574px')
                    } else if (angle >= -135 && angle < -105) {
                        $(this).css('backgroundPosition', '0px -760px')
                    } else if (angle >= -165 && angle < -135) {
                        $(this).css('backgroundPosition', '0px -760px')
                    } else if (angle >= 165 && angle < -165) {
                        $(this).css('backgroundPosition', '0px -1148px')
                    } else if (angle >= 135 && angle < 165) {
                        $(this).css('backgroundPosition', '0px -1338px')
                    } else if (angle >= 105 && angle < 135) {
                        $(this).css('backgroundPosition', '0px -1528px')
                    }
                }
            )
        }
    })
</script>
</body>
</html>

方小块
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
与teambition相似的可拖动任务看板
a_SuperAdmin的博客
03-29 512
与teambition相似的可拖动任务看板 前端实现 网站示例： https://www.jq22.com/yanshi10850 和示例一样 我只负责在页面实现拖动，保存功能是另一位同事写，如果可行后面我再发出来 图片示例： 需要引用的js文件： http://ceshi.youcaiyongyong.cn/themes/admin_htcyltd/public/assets/css/task/Sortable.js 我页面上的内容是数据循环出来的，所以获取一下列表个数，便于循环加ID //定义列表个
pyteam v0.1 更新，新增接口文档管理、聊天室与任务附件上传功能
weixin_33802505的博客
04-02 95
开发四年只会写业务代码，分布式高并发都不会还做程序员？ pyteam 是一个使用pjax+socket.io开发用于内...
Vue+Laravel5.6 高仿团队协作管理平台teambition-1 初始架构
weixin_33979745的博客
03-10 740
Vue+Laravel5.6 高仿团队协作管理平台teambition 个人的一个总结学习的练手项目，前端技术栈vue系列，后端技术栈laravel(为啥不用koa node因为我在学习php laravel而已)，devops技术栈(docker jenkins linux) 希望各位看官到github给一个Star，过两天上一个演示站...
仿teambition使用koa开发的一个无刷新的任务管理系统
08-12
仿 teambition 使用 koa 开发的一个无刷新的任务管理系统
teambition
08-31
一款不错的项目管理工具，用于项目任务分配很方便。
Teambition 团队协同开发
08-18
模仿Teambition(团队协同开发)的windows桌面软件 涉及知识: 1.C#三层 2.sqlserver sql语法,包含建表,连表查询,视图和存储过程等等
Teambition
08-08
teambition 是很好用的一款协作工具，帮助团队随时随地协作，专注项目，实现目标。
teambition桌面客户端的妙用(绝密)
Museions的开心博客
05-24 2765
teambition封装了一个chrom内核,可以将html文档封装成为桌面程序运行。只需三部就让你的teambition变成一款web应用客户端容器。
teambition最好的团队协作工作
wuxiaobingandbob的专栏
03-04 1288
https://www.teambition.com/ Teambition是一个高效而稳定的项目协作平台，由上海汇翼信息科技有限公司开发。正式发布时间：2013年6月。Teambition是基于云服务的协作化项目管理平台，用户可以通过【任务板】【分享墙】【文件库】等功能来实现项目知识的分享、沟通，项目任务的安排及进度监督，以及相关项目的文档存储和分享。
iOS长按移动tableview tableview移动到不同tableview 仿teambition任务长按移动
qq_25007459的专栏
08-02 224
仿teambition任务长按移动，根据长按手势控制cell-item的位置，可自动配置table的数量，动态生成， UI动画效果很顺畅，不卡顿，object-c语言开发 具体实现机制为：UICollectionViewCell横向添加tableviewcell。可下载具体查看代码 CSDN下载：tableview可移动到不同tableview 转载自: https://lev...
GiftCard-Android好看的卡片动画效果
11-11
GiftCard-Android好看的卡片动画效果 [注：本内容来自网络，在此分享仅为帮助有需要的网友，如果侵犯了您的权利，麻烦联系我，我会第一时间删除，谢谢您。]
android卡片式布局效果
11-10
通过一个简单的ListView和适配器逻辑来讲解怎样创建一个卡片式UI。
Android 仿 窗帘效果 和 登录界面拖动效果 （Scroller类的应用）
09-02 550
[置顶] Android 仿 窗帘效果 和 登录界面拖动效果 （Scroller类的应用） 附 2个DEMO及源码 分类： android2014-04-29 19:24 3196人阅读 评论(23) 收藏 举报 Scroller仿源码窗帘登录     在android学习中，动作交互是软件中重要的一部分，其中的Scroller就是提供了拖动效果的类，在网上，比如说一
程序员如何实现财务自由？狼叔回复
Node全栈
11-10 5483
【没目标向钱看，有目标向前看】扯那些都没用，为啥烧饼会打到你头上？狼叔说点接地气的实话没目标的时候向钱看。哪个賺钱做哪个，一般市场导向都是对的，程序员领域也一样有目标就向前看。人还是要为信仰而活，无论说什么信仰，哪怕说财务自由无论结果如何，自己开心就好。一般努力的人没有太坏的结果。比如我去创业被坑死，但我的技能和生活圈子明显高了很多，损失的自然有别处可以补回来。人生如梦，tomorrow is a
CSDN翻译的文章：.NET开发不可错过的25款必备工具
tjliupeng的专栏
07-12 702
<br />1.Two monitors——必备的。<br />2.Visual Studio——同样的，也是必备的。<br />3.Launchy——一款免费的必备工具。它能帮助开发者快速调用电脑中的程序快捷方式，而无需再通过传统的“开始”——“所有程序”中寻找所需的程序。在安装后，只需键入Alt + Space(空格)即可调出Launchy ，就可以看到漂亮的界面。<br />4.WinSplit Revolution——另一款免费的必备工具。它帮助开发者灵活控制屏幕里的“窗口”，迅速在整个屏幕缩放或安
android仿游戏机炸币效果
10-15 2101
android仿街机炸游戏币的一个 动画界面效果。
几十行js实现很炫的canvas交互特效
福禄网络研发团队的博客
11-05 717
几十行js实现很炫的canvas交互特效 废话不多说，先上效果图！ 本篇文章的示例代码都是抄的一个叫Franks的老外在yutube上的一个教学视频，他还出了很多关于canvas的视频，十分值得学习，而我对canvas也不太熟悉，跟着大神一起敲代码，做个学习笔记，还要说一下，本文示例的页面结构很简单(html只包含一个canvas)，后面代码部分就不贴了，毕竟js才是主角。 1.画圆 首先从画...
谈谈在线团队协作工具 - Tower.im
田攀的日志
09-27 8685
彩程设计出品的Tower很明显是模仿国外大神公司37 Signals的Basecamp，彩程CEO沈学良也承认了这一点（这个争论在知乎里也是吵得火热），Tower和Basecamp界面设计和风格上确实极其类似。不管Tower是不是抄袭，这款产品着实解决了我在项目管理方面的许多问题，不得不说我爱死这款产品了。传统的项目管理工具多是通过Project或Excel等软件以甘特图的方式来记录项目计划、进度
【Lee-Teambition】团队任务协作工具Teambition
TK_Magician的博客
03-25 698
【Lee爱折腾-04】团队任务协作工具Teambition 任务 添加任务 任务填写完整 详细问题： 标题 标题必须包含：添加、修改、删除，三个标题，标志任务的用途 标题应有对任务简洁描述 时间+执行人+备注+参与者 时间、执行人、备注、参与者 【 必填！！！ 】 备注栏应有详细的任务描述。以1 2 3等标记详细描述。【 不能杂乱，全部放在一行 】 时间过期 设置的时间...
xxxxdfgfdgfdgd
最新发布
07-14
xxxxdfgfdgfdgd

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值