利用JavaScript實(shí)現(xiàn)仿QQ個(gè)人資料卡效果

更新時(shí)間：2022年08月21日 08:51:36 作者：小新愛(ài)學(xué)習(xí).

這篇文章主要為大家詳細(xì)介紹了如何利用HTML+CSS+JavaScript實(shí)現(xiàn)仿QQ個(gè)人資料卡效果，文中的示例代碼講解詳細(xì)，感興趣的可以動(dòng)手嘗試一下

前言

最近在學(xué)習(xí)前端的知識(shí)，無(wú)意間發(fā)現(xiàn)QQ 那個(gè)個(gè)人資料卡還挺好看的，就想著自己能不能照著原版搞出一個(gè)高仿出來(lái)，話不多時(shí)直接開(kāi)始先睡上一覺(jué)，找找靈感，睡醒來(lái)又餓了，出去吃個(gè)飯，回來(lái)天tm都黑了，哈哈哈哈，金今天又是擺爛的一天，啊啊啊，不行至少今天這篇博客得寫個(gè)前言部分…于是乎我們來(lái)到第二天，開(kāi)始干（要干啥來(lái)著，幸虧昨天還寫了個(gè)標(biāo)題，要不然都忘了——HTML+CSS+JS實(shí)現(xiàn)仿QQ個(gè)人資料卡）

不多逼逼直接上干貨

思路

首先我們先這樣，然后那樣，再然后這樣，最后再那樣，好，完成了，請(qǐng)看效果圖：

正經(jīng)點(diǎn),我們重新開(kāi)始

首先我們先參考一下QQ原生資料卡

這個(gè)資料卡乍一看好像其實(shí)并沒(méi)有覺(jué)得很復(fù)雜，但是如果往細(xì)了看（多細(xì)？比吳簽還細(xì)嗎？）

…

只能弱弱的說(shuō)一句：臥槽，真復(fù)雜啊，我們把圈起來(lái)的搞出來(lái)就行了吧，偷個(gè)小懶，哈哈哈

先聊聊思路：任何前端頁(yè)面都是由一個(gè)個(gè)小模塊拼接組成的，我們先將它們的每一個(gè)模塊劃分出來(lái)，在添加上對(duì)應(yīng)得描述，超鏈接和文字即可

模塊化：將整個(gè)主頁(yè)模塊化

我們就像拼拼圖一樣，先做好每一個(gè)小區(qū)域，然后將他們品“拼起來(lái)就行了“

如下圖：

首先看圈出來(lái)的東西，我們可以把這個(gè)頁(yè)面分為圖標(biāo)，按鈕和文字三個(gè)部分，包含各類樣式；圖標(biāo)：讓我們的鼠標(biāo)點(diǎn)到它，給出一個(gè)“反應(yīng)”

按鈕則是包含相關(guān)內(nèi)容的一個(gè)盒子，加上對(duì)應(yīng)內(nèi)容的超鏈接即可，并且有選中和未選中的兩種不同狀態(tài)：

被選中時(shí)，先稍微多放大一些，然后字體顏色由黑色改變?yōu)樗{(lán)色；
未選中時(shí)，則保持原狀態(tài)不變；

文字：直接代碼中添加，然后確定位置即可

話不多說(shuō)，上代碼：

實(shí)現(xiàn)代碼

HTML

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>歡迎來(lái)到小新的個(gè)人主頁(yè)</title>
    <link rel="stylesheet" href="css/style.css" rel="external nofollow" >
    <link rel="icon" href="index_1.html" rel="external nofollow" >
    <audio src="etc/qfl.mp3" id="audio"></audio>
</head>

<body>
    <div class="container">
        <div class="user-form">
            <div class="bg-user">
                <div class="top"><img src="images/riluo.jpg"></div>
                <div class="circle"><img src="http://q1.qlogo.cn/g?b=qq&nk=2085324623&s=640"></div>
                <p class="user-title">&nbsp&nbsp&nbsp五月</p>
                <p class="user-qq">QQ: 2085324623</p>
                <div class="idcard"><img src="images/svip.png"></div>
                <div class="zan"><img src="images/zan.png"></div>
                <p class="sign-text"><img src="images/person.jpeg">&nbsp;男&nbsp;|&nbsp;金牛座&nbsp;|&nbsp;中國(guó)&nbsp;</p>
                <p class="sign-text"><img src="images/sign.jpeg"><a  rel="external nofollow" >#將溫柔寄予信~</a></p>
                <p class="sign-text"><img src="images/qzone.jpeg"><a  rel="external nofollow" >&nbsp;Ta的空間</a></p>
                <p class="sign-text"><img src="images/camera.jpeg">&nbsp;精選照片</p>
                <div class="border-img"><img src="images/012.gif"></div>
                <button class="btn-blue" onclick="window.open('tencent://message/?uin=2085324623&Menu=yes')">添加好友</button>
                <button class="btn-music" id="music">音樂(lè)設(shè)置</button>
            </div>
        </div>
    </div>
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/sweetalert.min.js"> </script>
    <script src="js/main.js"></script>
</body>

</html>

CSS

*{
    padding: 0px;
    margin:0px;
    font-family: "Arial","Microsoft YaHei","黑體","宋體",sans-serif;
}
body::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(125deg,#c5e6e8,#ced396,#a1c4fd,#a8edea,#d299c2);
    /*background: transparent url('../img/bg.jpg') no-repeat fixed;*/
    /*filter: blur(8px);*/
    background-size: cover;
    z-index: -1;
    
}
.container{
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top:50%;

}
.btn-blue{
    display: block;
    width:100%;
    height: 40px;
    margin-top:10px;
    background-color: #a1c4fd;
    border:2px solid #a1c4fd;
    border-color: #a1c4fd;
    border-radius: 5px 5px 5px 5px;
    outline: none;
    color:#fff;
    transition: 0.3s;
    transform: translateZ(0);
}
.btn-blue:hover{
    transform: scale(1.01);
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
/**************************/
.bg-user{
    width: 300px;
    padding: 20px;
    background-color: #fff;
    border-radius: 15px;
    transition: 0.3s;
}
.circle > img{
    border:0px solid #fff;
    height:80px;
    width: 80px;
    border-radius: 50%;
    margin-top: -50px;
}
@keyframes rotation{
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.circle > img:hover{
   animation: rotation 3s linear infinite;
}
.user-title{
    position: relative;
    display: inline;
    float: right;
    margin-top: -65px;
    margin-right: 160px;
    color:#ffffff;
    font-size: 15px;
    font-weight: 500;
}
.user-qq{
    display: inline;    
    float: right;
    margin-top: -30px;
    margin-right: 100px;
    font-size:15px;
    font-weight: 300;
}
.top{
    margin-top: -10px;
    margin-left: -10px;
    margin-right: -10px;
}
.top > img{
    width: 100%;
    height: 200px;
    border:0px solid #fff;
    border-radius: 15px;
}
.idcard{
    float: right;
    margin-top: -30px;
    margin-right: 45px;
}
.idcard > img{
    width: 40px;
    height: 13px;
}
.zan{
    position: relative;
    display: inline;
    float: right;
    margin-top: -75px;
    margin-right: -30px;
    transition: 0.5s;
}
.zan:hover{
    transform: scale(1.05);
    transform:rotate(10deg);
    -ms-transform:rotate(10deg); 	/* IE 9 */
    -moz-transform:rotate(10deg); 	/* Firefox */
    -webkit-transform:rotate(10deg); /* Safari 和 Chrome */
    -o-transform:rotate(10deg); 
}
.zan > img{
    height: 40%;
    width: 50%;
}
.sign-text{
    text-align: left;
    font-size: .85rem;
    margin-top: 10px;
    cursor: default;
}
.sign-text:hover{
    transition: 0.3s;
    color: #007bff;
    transform: scale(1.05);
}
a{
 text-decoration:none;
 color: inherit;
}
.sign-text>img{
width:20px;
height:20px;
vertical-align:middle;
}
.sign-img{
    text-align: left;
    font-size: .85rem;
    margin-top: 10px;
    cursor: default;
}
.sign-img:hover{
    transition: 0.3s;
    color: #007bff;
    transform: scale(1.05);
}
.border-img > img{
    width: 100%;
    margin-top: 10px;
    border: 2px solid rgba(0,0,0,0.2);
    border-radius: 15px;
    transition: 0.3s;
}
.whj{
  float:right;
}
.border-img > img:hover{
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.btn-music{
    display: block;
    width:100%;
    height: 40px;
    margin-top:10px;
    background-color: #fecfef;
    border:2px solid #fecfef;
    border-color: #fecfef;
    border-radius: 5px 5px 5px 5px;
    outline: none;
    color:#fff;
    transition: 0.3s;
}
.btn-music:hover{
    transform: scale(1.01);
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

背景音樂(lè)

這里突發(fā)奇想想添加個(gè)，能穿越時(shí)空的音樂(lè)——帶你回到18年的夏天，還附贈(zèng)了一個(gè)視頻，轉(zhuǎn)載自b站，所以外加了個(gè)JS，最后連接到HTML即可。

JavaScript

function playMusic() {
        var audioEle = document.getElementById("audio");
      if (audioEle.paused){
        audioEle.play();
      }else {
        audioEle.pause();
      }
    }
    
    $("#music").click(function(){
      play();
    });

    var player = document.getElementById("audio");
    play();
    function play(){
    swal("點(diǎn)擊開(kāi)啟音樂(lè)-起風(fēng)了\n可以邊瀏覽邊聽(tīng)哦~", {
            buttons: {
                cancel: "開(kāi)啟",
                allow: "關(guān)閉"
            }
        }).then(function(value) {
            if (value == "allow") {
                player.pause()
            } else {
                player.play();
            }
        });
    }

最終效果

知識(shí)點(diǎn)補(bǔ)充

 window.open('tencent://message/?uin=2085324623&Menu=yes')"

添加自己的QQ號(hào)，點(diǎn)擊對(duì)應(yīng)按鈕，即可打開(kāi)QQ，跳轉(zhuǎn)添加好友頁(yè)面

"https://mp.qzone.qq.com/u/327893?uin=2085324623&is_famous_space=0&brand_flag=0"

喚醒QQ ，跳轉(zhuǎn)個(gè)人QQ空間

到此這篇關(guān)于利用JavaScript實(shí)現(xiàn)仿QQ個(gè)人資料卡效果的文章就介紹到這了,更多相關(guān)JavaScript仿QQ個(gè)人資料卡內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: