利用JavaScript實(shí)現(xiàn)仿QQ個人資料卡效果
更新時間：2022年08月21日 08:51:36 作者：小新愛學(xué)習(xí).
這篇文章主要為大家詳細(xì)介紹了如何利用HTML+CSS+JavaScript實(shí)現(xiàn)仿QQ個人資料卡效果，文中的示例代碼講解詳細(xì)，感興趣的可以動手嘗試一下
前言
最近在學(xué)習(xí)前端的知識，無意間發(fā)現(xiàn)QQ 那個個人資料卡還挺好看的，就想著自己能不能照著原版搞出一個高仿出來，話不多時直接開始先睡上一覺，找找靈感，睡醒來又餓了，出去吃個飯，回來天tm都黑了，哈哈哈哈，金今天又是擺爛的一天，啊啊啊，不行至少今天這篇博客得寫個前言部分…于是乎我們來到第二天，開始干（要干啥來著，幸虧昨天還寫了個標(biāo)題，要不然都忘了——HTML+CSS+JS實(shí)現(xiàn)仿QQ個人資料卡）
不多逼逼直接上干貨
思路
首先我們先這樣，然后那樣，再然后這樣，最后再那樣，好，完成了，請看效果圖：
正經(jīng)點(diǎn),我們重新開始
首先我們先參考一下QQ原生資料卡
這個資料卡乍一看好像其實(shí)并沒有覺得很復(fù)雜，但是如果往細(xì)了看（多細(xì)？比吳簽還細(xì)嗎？）
…
只能弱弱的說一句：臥槽，真復(fù)雜啊，我們把圈起來的搞出來就行了吧，偷個小懶，哈哈哈
先聊聊思路：任何前端頁面都是由一個個小模塊拼接組成的，我們先將它們的每一個模塊劃分出來，在添加上對應(yīng)得描述，超鏈接和文字即可
模塊化：將整個主頁模塊化
我們就像拼拼圖一樣，先做好每一個小區(qū)域，然后將他們品“拼起來就行了“
如下圖：
首先看圈出來的東西，我們可以把這個頁面分為圖標(biāo)，按鈕和文字三個部分，包含各類樣式； 圖標(biāo)：讓我們的鼠標(biāo)點(diǎn)到它，給出一個“反應(yīng)”
按鈕則是包含相關(guān)內(nèi)容的一個盒子，加上對應(yīng)內(nèi)容的超鏈接即可，并且有選中和未選中的兩種不同狀態(tài)：
- 被選中時，先稍微多放大一些，然后字體顏色由黑色改變?yōu)樗{(lán)色；
- 未選中時，則保持原狀態(tài)不變；
文字：直接代碼中添加，然后確定位置即可
話不多說，上代碼：
實(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>歡迎來到小新的個人主頁</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">   五月</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"> 男 | 金牛座 | 中國 </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" > Ta的空間</a></p>
<p class="sign-text"><img src="images/camera.jpeg"> 精選照片</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">音樂設(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);
}
背景音樂
這里突發(fā)奇想想添加個，能穿越時空的音樂——帶你回到18年的夏天，還附贈了一個視頻，轉(zhuǎn)載自b站，所以外加了個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)擊開啟音樂-起風(fēng)了\n可以邊瀏覽邊聽哦~", {
buttons: {
cancel: "開啟",
allow: "關(guān)閉"
}
}).then(function(value) {
if (value == "allow") {
player.pause()
} else {
player.play();
}
});
}最終效果
知識點(diǎn)補(bǔ)充
window.open('tencent://message/?uin=2085324623&Menu=yes')"
添加自己的QQ號，點(diǎn)擊對應(yīng)按鈕，即可打開QQ，跳轉(zhuǎn)添加好友頁面
"https://mp.qzone.qq.com/u/327893?uin=2085324623&is_famous_space=0&brand_flag=0"
喚醒QQ ，跳轉(zhuǎn)個人QQ空間
到此這篇關(guān)于利用JavaScript實(shí)現(xiàn)仿QQ個人資料卡效果的文章就介紹到這了,更多相關(guān)JavaScript仿QQ個人資料卡內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了javascript防抖函數(shù)debounce,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，,需要的朋友可以參考下2019-06-06
為什么JS中eval處理JSON數(shù)據(jù)要加括號
這篇文章主要介紹了為什么JS中eval處理JSON數(shù)據(jù)要加括號的相關(guān)資料,需要的朋友可以參考下2015-04-04
AjaxUpLoad.js實(shí)現(xiàn)文件上傳
這篇文章主要為大家詳細(xì)介紹了AjaxUpLoad.js實(shí)現(xiàn)文件上傳的具體代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-03-03
javascript中xml操作實(shí)現(xiàn)代碼
好久沒寫了。感覺今時今日，HTML5 還依然只是一種玩票的東東。但愿 w3c 的標(biāo)準(zhǔn)可以早一點(diǎn)出臺，不要讓各種瀏覽器的兼容問題和支持程度搞死2011-11-11
從對象列表中獲取一個對象的方法,依據(jù)關(guān)鍵字和值
下面小編就為大家?guī)硪黄獜膶ο罅斜碇蝎@取一個對象的方法,依據(jù)關(guān)鍵字和值。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要給大家介紹了關(guān)于js指定日期增加指定月份的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
js函數(shù)中有三個在特定場合很好用的函數(shù):reduce(),map(),filter()。而數(shù)組經(jīng)常用到的方法有push、join、indexOf、slice等等，但是有一個經(jīng)常被我們忽略的方法：reduce，這個方法簡直強(qiáng)大的不要不要的。下面通過這篇文章來一起學(xué)習(xí)學(xué)習(xí)吧。2016-12-12
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)搖篩子效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要為大家詳細(xì)介紹了完美的js div拖拽實(shí)例代碼,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
對已聲明但未初始化的和未聲明的變量執(zhí)行typeof，都返回undefined，null表示一個空對象指針，typeof操作會返回object2014-09-09