于萬國,馬　軍

(河北民族師范學(xué)院，河北 承德 067000)

?

基于jQuery視頻列表展示效果的技術(shù)實(shí)現(xiàn)

于萬國,馬軍

(河北民族師范學(xué)院，河北 承德 067000)

目的在分析視頻列表展示效果的功能需求基礎(chǔ)上，探討用HTML+CSS+jQuery實(shí)現(xiàn)視頻列表的展示效果。方法用HTML實(shí)現(xiàn)網(wǎng)頁的基本結(jié)構(gòu)，用CSS實(shí)現(xiàn)網(wǎng)頁效果的美化，用jQuery的選擇器、DOM操作、事件監(jiān)聽機(jī)制等來實(shí)現(xiàn)。結(jié)果用jQuery較好地實(shí)現(xiàn)了視頻列表展示效果。在該效果中，用戶可以單擊左上角的左右箭頭來控制視頻展示的左右滾動(dòng)。當(dāng)單擊向右箭頭時(shí)，視頻列表會(huì)向左滾動(dòng)隱藏，同時(shí)在右側(cè)新的視頻列表會(huì)以滾動(dòng)方式顯示出來，并有對(duì)應(yīng)列表序號(hào)的顯示標(biāo)識(shí)。當(dāng)單擊向左箭頭時(shí)，視頻列表會(huì)向右滾動(dòng)隱藏，同時(shí)在左側(cè)新的視頻列表會(huì)以滾動(dòng)方式顯示出來，并有對(duì)應(yīng)列表序號(hào)的顯示標(biāo)識(shí)。結(jié)論用jQuery實(shí)現(xiàn)比原來用JavaScript實(shí)現(xiàn)的方法更加簡(jiǎn)單靈活、代碼更加簡(jiǎn)潔。

jQuery;WEB應(yīng)用;視頻列表展示

0　背景分析

在WEB應(yīng)用網(wǎng)站中，經(jīng)常會(huì)看到用視頻列表展示效果來實(shí)現(xiàn)多個(gè)視頻的組織羅列。例如騰訊網(wǎng)站的“視覺焦點(diǎn)”板塊，如圖1所示，用的就是這種視頻列表展示效果。這種方式一方面能在有限的網(wǎng)頁空間內(nèi)增加視頻的數(shù)量，另一方面可以增強(qiáng)人們對(duì)內(nèi)容的直觀視覺效果，能更好地詮釋所要展示的視頻內(nèi)容。以前實(shí)現(xiàn)這種效果的代碼通常是用HTML+CSS+JavaScript來實(shí)現(xiàn)的[1-3]，筆者在分析源代碼的基礎(chǔ)上，用JavaScript的一個(gè)好用的程序庫jQuery較容易地實(shí)現(xiàn)了該技術(shù)。jQuery解決了跨平臺(tái)的兼容性問題，引入了強(qiáng)大的選擇器功能，簡(jiǎn)化了JavaScript開發(fā)人員遍歷HTML文檔選擇元素的操作，引入大量的DOM、CSS、事件處理、自定義動(dòng)畫等操作方法，對(duì)于Ajax也有強(qiáng)大的支持，改變了原JavaScript程序員的設(shè)計(jì)思路和編寫程序的方式?！癢irte less,do more.”(寫得少，做得多)是jQuery強(qiáng)調(diào)的理念[4-6]。最終實(shí)現(xiàn)的效果如圖2所示。

圖1　騰訊網(wǎng)站的“視覺焦點(diǎn)”板塊效果

圖2　視頻展示效果

在該效果中，用戶可以單擊左上角的左右箭頭來控制視頻展示的左右滾動(dòng)。當(dāng)單擊向右箭頭時(shí)，下面的展示視頻會(huì)向左滾動(dòng)隱藏，同時(shí)新的視頻展示會(huì)以滾動(dòng)方式展示出來。當(dāng)單擊向左箭頭時(shí)，下面的展示視頻會(huì)向右滾動(dòng)隱藏，同時(shí)新的視頻展示會(huì)以滾動(dòng)方式展示出來。在這里需要注意：

3)左上角的箭頭旁邊的藍(lán)色圓點(diǎn)應(yīng)該與動(dòng)畫一起切換，它代表著當(dāng)前所處的版面。

1　技術(shù)實(shí)現(xiàn)

該實(shí)現(xiàn)效果的文件目錄結(jié)構(gòu)如圖3所示，其中video文件夾用于存放視頻文件，jquery.js是從jQuery官方網(wǎng)站http://jquery.com/下載的jQuery庫文件。

圖3　實(shí)現(xiàn)效果的目錄結(jié)構(gòu)

下面分別介紹其它3個(gè)文件的建立。

1)用HTML設(shè)計(jì)頁面結(jié)構(gòu)，寫出index.html代碼。

整個(gè)頁面結(jié)構(gòu)比較簡(jiǎn)單，主要采用的是DIV+CSS的布局方式，網(wǎng)頁結(jié)構(gòu)代碼如下：

2)CSS頁面的修飾非常關(guān)鍵，限于篇幅，在這里直接給出CSS代碼，讀者可自行分析。樣式文件style.css代碼如下所示：

*{padding:0;margin:0;list-style:none;}

body{color:gray;font-size:12px;font-family:Helvetica,Arial,sans-serif;background:white;}

h4{font-size:1em;}

img{border:0;}

a{text-decoration:none;color:#ccc;}

a:hover{text-decoration:underline;color:#666;}

#v_list{margin:20px 0 1px 60px;width:595px;}

#v_title{background:url(img/btn_video.gif)no-repeat 0 0; height:35px;overflow:hidden;}

#v_title h2{background:url(img/btn_video.gif)no-repeat;overflow:hidden;float:left;width:84px;height:35px;text-indent:-9999em;}

.enlight{float:left;display:inline;margin:14px 0 0 10px;}

.enlight span{margin:0px 2px;width:7px;height:7px;display:inline;float:left;overflow:hidden;}

#v_title.video{background-position:0-100px;}

#v_title.variety{background-position:-100px-100px;}

background:url(img/btn_video.gif)no-repeat 0-320px;text-indent:-9999px;}

.enlight.cur{background-position:0-220px;}

.btn{margin:7px 0 0 10px;float:left;}

.btn span{background:url(img/btn_video.gif)no-repeat;display:block;float:left;width:30px;height:23px;overflow:hidden;text-indent:-9999em;cursor:pointer;}

.btn.pre{background-position:0-400px;}

.btn.next{width:31px;background-position:-30px-400px;}

.v_title em{margin:10px 12px 0 0;display:inline;font-family:simsun;float:right;}

.v_detail{position:relative;width:592px;height:160px;border-bottom:1px solid gray;overflow:hidden;border-right:1px solid gray;border-left:1px solid pink;}

.v_detail ul li{float:left;}.

v_detail_list{position:absolute;width:2500px;top:0px;left:0px;}

.v_detail ul li{display:inline;float:left;margin:10px 2px 0;padding:8px;background:url(img/v_bg.gif)no-repeat;}

.v_detail ul li a{width:128px;height:80px;display:block;}

.v_detail ul li img{width:128px;height:96px;}

.v_detail ul li h4{margin:12px 0 0 0;width:128px;height:18px;}

.v_detail ul li h4 a{float:left}.

v_detail ul li em{color:#666;}

.v_detail ul li span{color:gray;}

3)編寫腳本來控制頁面的交互，寫出videolist.js代碼。

相應(yīng)的結(jié)點(diǎn)找到之后，就可以添加動(dòng)畫效果了。使用animate()方法通過控制“視頻列表區(qū)域”的left屬性的值來實(shí)現(xiàn)動(dòng)畫效果，每個(gè)版面的寬度就按left的值。每個(gè)版面的寬度可以使用width()方法來獲取，代碼如下：

var v_width=$v_detail.width();

(2)“視頻列表區(qū)域”最后一個(gè)版面的取得。

版面之間的跳轉(zhuǎn)應(yīng)該是這樣的：在到達(dá)最后一個(gè)版面之前，需要在當(dāng)前版面數(shù)的基礎(chǔ)上加1；到達(dá)最后一個(gè)版面時(shí)，即當(dāng)前的版面數(shù)等于總的版面數(shù)，則需要把當(dāng)前的版面數(shù)設(shè)置為1，使之從第一個(gè)版面重新開始動(dòng)畫[7]。從效果圖可知，4張視頻圖片組成了“視頻列表區(qū)域”的1個(gè)版面，可以通過獲取視頻圖片的總數(shù)后除以4得到總的版面數(shù)。例如，8張視頻圖片對(duì)應(yīng)2個(gè)版面；12張視頻圖片對(duì)應(yīng)3個(gè)版面；9張視頻圖片，9除以4之后必須把小數(shù)向上取整，對(duì)應(yīng)3個(gè)版面。

首先定義一個(gè)變量page并賦值為1，即初始值為第一個(gè)版面：

var page=1;

對(duì)應(yīng)于“視頻列表區(qū)域”的版面，還需要使左上角的箭頭旁邊的藍(lán)色原點(diǎn)跟隨動(dòng)畫一起切換，來標(biāo)識(shí)當(dāng)前所處的版面。只需要把樣式“cur”添加到代表當(dāng)前版面的“藍(lán)色圓點(diǎn)”上就可以了，同時(shí)去除其它圓點(diǎn)的cur樣式，用到了addClass和removeClass方法[8-10]。同時(shí)需要注意，eq方法的下標(biāo)是從0開始的，所以第一個(gè)版面的eq方法的下標(biāo)應(yīng)該為page-1。故下面一行代碼即可實(shí)現(xiàn)當(dāng)前版面的圓點(diǎn)標(biāo)識(shí)。

$parent.find("span").eq((page-1)).addClass("cur").siblings().removeClass("cur");

最終代碼如下所示：

$(function(){

var page=1;

var i=4;

$("span.pre").bind(“click”,function(){

var $parent=$(this).parents("div.v_list");

var $v_list=$parent.find("div.v_detail_list");

var $v_detail=$parent.find("div.v_detail");

var w=$v_detail.width();

var length=$v_list.find("li").length;

var pageCount=Math.ceil(length/i);

if(!$v_list.is(":animated")){

if(page==1){

$v_list.animate({left:'-='+vw*(pageCount-1)},200);

page=pageCount;

}else{

$v_list.animate({left:'+='+w},200);

page--;

}

}

$parent.find("span").eq((page-1)).addClass("cur").siblings().removeClass("cur");

});

$("span.next").bind(“click”,function(){

var $par=$(this).parents("#v_list");

var $v_list=$par.find("div.v_detail_list");

var $v_detail=$par.find("div.v_detail");

var w=$v_detail.width();

var length=$v_list.find("li").length;

var pageCcount=Math.ceil(length/i);

if(!$v_list.is(":animated")){

if(page==pageCount){

$v_list.animate({left:'0px'},200);

page=1;

}else{

$v_list.animate({left:'-='+w},200);

page++;

}

}

$parent.find("span").eq((page-1))

.addClass("cur").siblings()

.removeClass("cur");

});

});

2　結(jié)論與討論

從上面分析的方法和實(shí)現(xiàn)的技術(shù)可知，用jQuery實(shí)現(xiàn)比原來用JavaScript實(shí)現(xiàn)的方法更加簡(jiǎn)單靈活、代碼更加簡(jiǎn)潔。這是因?yàn)閖Query擁有強(qiáng)大的選擇器功能、豐富的DOM操作方法、事件監(jiān)聽機(jī)制及自定義動(dòng)畫效果等大量的方法庫，掌握好jQuery的這些方法庫可以輕松地實(shí)現(xiàn)利用JavaScript難于實(shí)現(xiàn)的效果。

[1]于萬國.運(yùn)用jQuery對(duì)電商網(wǎng)站商品圖片自動(dòng)放大效果技術(shù)的實(shí)現(xiàn)[J].河北北方學(xué)院學(xué)報(bào)：自然科學(xué)版，2014，(04)：22-25.

[2]吳瑞紅,張環(huán)沖.淺談JavaScript庫——jQuery,ExtJs的對(duì)比研究[J].科技信息,2010,(09):474-475.

[3]李軼.基于JavaScript的面向?qū)ο蟪绦蛟O(shè)計(jì)研究[J].江漢大學(xué)學(xué)報(bào)：自然科學(xué)版,2010,(03):52-56.

[4]喬志剛.JavaScript在ASP技術(shù)中的應(yīng)用[J].寧波職業(yè)技術(shù)學(xué)院學(xué)報(bào),2005,(02):81-84.

[5]張紅琴,白林如.基于CSS和JavaScript的網(wǎng)頁選項(xiàng)卡的設(shè)計(jì)和實(shí)現(xiàn)[J].洛陽理工學(xué)院學(xué)報(bào)：自然科學(xué)版,2012,(01):40-44.

[6]鄭蓉,徐麗珍,徐秋芬.基于JavaScript的網(wǎng)頁特效及實(shí)例[J].電腦學(xué)習(xí),2006,(03):21-22.

鄭蓉,徐麗珍,徐秋芬.基于JavaScript的網(wǎng)頁特效及實(shí)例[J].微型電腦應(yīng)用,2006,(08):63-64+3.

[7]單東林.鋒利的jQuery[M].2版.北京：人民郵電出版社,2012：88-139.

[8]孫良軍.HTML+CSS+JavaScript網(wǎng)頁設(shè)計(jì)與布局實(shí)用教程[M].北京：清華大學(xué)出版社,2011：223-226.

[9]明日科技.JavaScript從入門到精通[M].北京：清華大學(xué)出版社,2012：172-185.

[10]Timothy B.Web開發(fā)入門經(jīng)典[M].北京：清華大學(xué)出版社,2009：332-396.

[責(zé)任編輯：關(guān)金玉英文編輯：劉彥哲]

Technical Implementation of Video List Display Effect Based on jQuery

YU Wan-guo,Ma Jun

(Hebei Normal University for Nationalities,Chengde,Hebei 067000,China)

ObjectiveBased on the analysis of functional requirements for displaying the effect of video list,implementation effect of video display list with HTML+CSS+jQuery was discussed.MethodsUsing HTML to realize the basic structure of the WEB pages,using CSS to implement effect of beautification and using jQuery selector mechanism,DOM manipulation,event listeners,etc,to realize the operation of WEB application.ResultsjQuery was better for implementation of a video list display effect.In the effect,the user could click the left and right arrows on the upper left corner to control the video display.With clicking on the arrow to the right,the scroll hid video list to the left,at the same time the new video list of the right side was displayed in the rolling way.And there was a corresponding list showing identification serial number.With clicking the arrow to the left,scroll hid video list to the right,and at the same time the list on the left side of the new video was displayed in the rolling way.And there was a corresponding list showing identification serial number.ConclusionUsing jQuery implementation method is simpler and more flexible than the original JavaScript implementation,and the codes are more concise.

jQuery;WEB application;video list display

2015年度國家民委教改項(xiàng)目：“民族院校應(yīng)用型人才培養(yǎng)目標(biāo)下的計(jì)算機(jī)網(wǎng)絡(luò)方向?qū)嵺`教學(xué)改革研究”階段性研究成果(15114)；承德市教育科學(xué)研究“十二五”規(guī)劃2015年度專項(xiàng)課題(1501004)

于萬國(1976-)，男，蒙古族，河北承德人，河北民族師范學(xué)院數(shù)學(xué)與計(jì)算機(jī)系講師，理學(xué)碩士，研究方向?yàn)槎嗝襟w技術(shù)和WEB應(yīng)用開發(fā)。

TP 312

A

10.3969/j.issn.1673-1492.2016.09.003