当青训营遇上码上掘金—个人名片设计

1.题目介绍

名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。请大家围绕“我的名片”这个主题进行代码创作。

2.具体思路

使用开发工具：IntelliJ IDEA

开发语言：html+css+javaScript 前端三件套

功能设计：可以展示个人头像和个人的基本信息(写我最喜欢的哆啦A梦的名片)以及其他信息

3.详细设计

功能概述

本设计主要三个html页面组成，第一个html页面是主页面，第二个html页面是伙伴介绍页面，实现了一个卡片设计，第三个html页面是图片展示，实现了一个轮播图。（部分代码来自百度）

zhuye.html

主页部分主要由三个模块组成：

• 头像模块：头像模块实现了一个头像翻转效果

.logo2:hover{
    /*变形属性：垂直反转*/
    transform: rotateX(360deg);
    box-shadow: 0px 0px 50px rgba(255, 255, 255, 1);
    /*垂直反转时间1s*/
    transition: all 1s;
}

• 人物和背景模块：利用js实现了人物悬停效果，且当鼠标移动时背景会发生变化

function load2D_bg(){
    var background = document.getElementById("background");
    var range = 40;
    var calcValue = function calcValue(a, b) {
        return (a / b * range - range / 2).toFixed(1);
    };
    var timeout = void 0;
    document.addEventListener('mousemove',
    function(_ref) {
        var x = _ref.x,
        y = _ref.y;
        if (timeout) {
            window.cancelAnimationFrame(timeout);
        }
        timeout = window.requestAnimationFrame(function() {
            var yValue = calcValue(y, window.innerHeight);
            var xValue = calcValue(x, window.innerWidth);            
            background.style.backgroundPositionX = xValue * 1 -200+ "px ";
            background.style.backgroundPositionY =  (-yValue * 0.75-50 ) + "px";
        })
    },false);

}

• 按钮模块:通过js实现页面的跳转

function toBaidu(){
    window.open("https://baike.baidu.com/item/%E5%93%86%E5%95%A6A%E6%A2%A6/185384?fr=aladdin");
}

function toPart(){
    window.location.href= 'part.html';
}
function toTime(){
    window.location.href= 'lbt.html';
}

part.html

主要实现了卡片的效果，四个卡片是同样的格式。
当鼠标移入卡片时，卡片从背景变成头像，然后显示相关信息。
部分代码：

/* 默认大图 */
.card .photo{
    /* 绝对定位 */
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 0%;
    overflow: hidden;
    /* 动画过渡 */
    transition: 0.5s;
}
/* 鼠标移入变小图 */
.card:hover .photo{
    top: 30px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
}  

lbt.html

实现了一个轮播图，用于图片的展示

自动切换

let timer = setInterval(_move, 2500);
document.querySelector(".container").addEventListener("mouseover", () => {
    clearInterval(timer);
});
document.querySelector(".container").addEventListener("mouseout", () => {
    timer = setInterval(_move, 2500)
});