騰訊新聞中心首頁改版啦

SillyMonkey 發(fā)布于2019-08-19 18:20 / 3149人閱讀

摘要：本人博客正式地址騰訊新聞中心的首頁改版啦，歡迎訪問。這次新聞首頁的改版，是從零開始寫的一個新頁面。除要聞頁卡外，其他頁卡的新聞均是通過的方式獲取的。總結(jié)新頁面上線后，還會有很多后續(xù)的功能需要添加。

本人博客：http://www.xiabingbao.com
正式地址：http://www.xiabingbao.com/news/2016/05/16/qq-news-revision

騰訊新聞中心的首頁改版啦，歡迎訪問【http://news.qq.com】。我是負(fù)責(zé)這次改版的前端開發(fā)工程師，今天也從前端的角度分析一下改版的過程和效果。

我們先來看看改版前后的首屏效果：

從對比圖上來看，主要有以下的變化：

樣式更加簡潔，刪除不必要的CSS裝飾

刪除額外的新聞介紹，更加突出新聞的標(biāo)題

頁面趨于扁平化

1. 網(wǎng)頁屬性和頭部信息

我們來看看兩個頁面中頭部信息的設(shè)置

舊頁面：

新頁面：

主要的變化有：

頁面從html4.01的聲明改為了html5的聲明

字符編碼從gb2312改為UTF-8

優(yōu)先使用 IE 最新版本和 Chrome

2. 頁面優(yōu)化

前幾個做的改版頁面，只是在原頁面上進行了簡單的CSS修改。這次新聞首頁的改版，是從零開始寫的一個新頁面。因此自主權(quán)更大，能把優(yōu)化做到最大；不過因為各種客觀和主觀的原因，依然還有很大進步的空間。

我在編寫頁面時盡量把CSS放在前面，js放到尾部。不過頁面里有很多公共的頁面片，只能include進來，因此這些頁面片里的js也跟著include進來。

2.1 圖片懶加載

在幾乎所有的頁面中，圖片是最拖延頁面加載的，之前的舊頁面在沒有任何懶加載的情況下，憑借著騰訊強大的服務(wù)器，也能快速的展示頁面。不過，在新頁面里，除了首屏展示的圖片外，幾乎所有的圖片都使用了懶加載，當(dāng)用戶看到這個地方時，才展示圖片。

圖片也是分塊加載的，滾動到某個區(qū)域時，才加載這個區(qū)域里所有的圖片。整個頁面從上往下分成了5個區(qū)域：

右側(cè)影像力的輪播圖: page_cnt_1

要聞的列表區(qū)后半部分（第14條-第46條）: page_cnt_2

軍事|社會模塊: page_cnt_3

歷史|傳媒模塊: page_cnt_4

影像力模塊: page_cnt_5

對需要懶加載的圖片，把真實的圖片地址放到_src的屬性中，不要寫src屬性，因為src的值為空時也會請求，或者為src設(shè)置一個1x1的占位圖片。

把整個頁面里的圖片劃分區(qū)域，每個區(qū)域按順序設(shè)置圖片的name屬性，值為page_cnt_{num}，num從1開始依次遞增不能有間斷：

當(dāng)滾動條滾動到當(dāng)前區(qū)域時，則把area1區(qū)域里name的值是page_cnt_1的圖片都加載完成，而area2則在滾動條再次滾動到相應(yīng)的距離時才加載。

2.2 頁卡的新聞延遲加載

在第3條新聞和第4條新聞中間有13個頻道的頁卡，用戶可以通過把鼠標(biāo)放到某個頁卡上獲取當(dāng)前頁卡的新聞，點擊頁卡時跳轉(zhuǎn)到相應(yīng)的頻道。除要聞頁卡外，其他頁卡的新聞均是通過ajax的方式獲取的。

考慮到用戶可能頻繁的切換頁卡，或者用戶可能只是想簡單從第1個頁卡移動到第5個頁卡。這種情況下，是沒有必要請求第2，3，4個頁卡里的內(nèi)容的。因此為頁卡切換設(shè)置了延時請求，當(dāng)鼠標(biāo)在當(dāng)前頁卡停留240ms以上，才認(rèn)為用戶確實想看這個頁卡的內(nèi)容，否則認(rèn)為鼠標(biāo)只是從當(dāng)前頁卡滑過，而不是真的想看其內(nèi)容。

var timer_0 = null;
$(".news .title").on("mouseenter", "a", function(){
    // 若鼠標(biāo)放在當(dāng)前的頁卡上，不再重復(fù)請求
    if( $(this).parent().hasClass("current") ){
        return;
    }

    // 鼠標(biāo)hover到這個頁卡時，取消上個頁卡的請求
    timer_0 && clearTimeout(timer_0);

    var $self = $(this);
    timer_0 = setTimeout(function(){
        // 開始請求內(nèi)容

    }, 240);
}).on("mouseout", function(){
    // 鼠標(biāo)離開整個區(qū)域時也停止請求

    timer_0 && clearTimeout(timer_0);
});

2.3 js、css、img壓縮

這3個都是最基本的優(yōu)化原則。背景圖片能合并的則合并，不能合并的則通過工具進行壓縮，js和css也進行相應(yīng)的壓縮。

3. 功能提升

除了頁面基本的功能外，也還有其他的幾個亮點提升用戶的體驗。

3.1 hover放大效果

整個頁面左側(cè)的圖片，鼠標(biāo)hover時有放大的效果，這里是使用到了CSS3的transition屬性，因此在IE8及以下是看不到這種效果的。

img{
    -webkit-transition: transform .2s ease-out;
    -moz-transition: transform .2s ease-out;
    -ms-transition: transform .2s ease-out;
    -o-transition: transform .2s ease-out;
    transition: transform .2s ease-out;
}
img:hover{
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

3.2 影像力圖片的蒙層

在影像力模塊里，鼠標(biāo)hover時感覺會添加了一個蒙層效果，其實是圖片的透明度發(fā)生了變化：

.yingxiangli .con img {
    -webkit-transition: opacity 0.3s ease-out;
    -moz-transition: opacity 0.3s ease-out;
    -o-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
}
.yingxiangli .con img:hover {
    opacity: 0.8;
    filter: alpha(opacity=80)
}

3.3 拖拽頁卡修改順序

頁卡的默認(rèn)順序是：財經(jīng)、體育、娛樂、房產(chǎn)...社會、教育。在“更多”的頁卡里有個排序選項，可以在彈出框里修改頁卡的展示順序，讓自己更感興趣的頻道排在前面。

拖拽相應(yīng)的頻道，完成后保存即可。下次打開頁面時，就會展示之前拖拽好的順序。

其實在點擊“保存”后，程序會將調(diào)整后的頁卡順序保存到cookie中，以后每次打開頁面時，都會檢查是否存在這個cookie，若存在cookie則展示相應(yīng)的順序，否則展示頁卡的默認(rèn)順序。

4. 總結(jié)

新頁面上線后，還會有很多后續(xù)的功能需要添加。在此也只是做個改版的階段性總結(jié)，望大家批評改正。

本人博客：http://www.xiabingbao.com
正式地址：http://www.xiabingbao.com/news/2016/05/16/qq-news-revision

GPU云服務(wù)器云服務(wù)器新聞中心騰訊云官網(wǎng)首頁仿騰訊迷你首頁亞洲交友中心首頁

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/79467.html

發(fā)表評論

登陸后可評論

0條評論

SillyMonkey

男|高級講師

我要關(guān)注我要私信

TA的文章

前端進階（8） - 前端開發(fā)需要了解的工具集合：webpack, eslint, prettier,

閱讀 1876·2019-08-29 16:44
HTML與CSS中的定位個人分享

閱讀 2179·2019-08-29 16:30
Z-index 層疊上下文和層疊水平

閱讀 788·2019-08-29 15:12
使用next.js結(jié)合GITHUB ISSUE實現(xiàn)博客。

閱讀 3534·2019-08-26 10:48
Vue數(shù)據(jù)響應(yīng)式原理筆記就幾行沒啥可看的

閱讀 2664·2019-08-23 18:33
避免CDN引用資源被webpack打包進出口bundle.js文件

閱讀 3785·2019-08-23 17:01
scheduler 源碼

閱讀 1947·2019-08-23 15:54
前端路由跳轉(zhuǎn)基本原理

閱讀 1310·2019-08-23 15:05

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

騰訊新聞中心首頁改版啦

相關(guān)文章