基于jQuery视频列表展示效果的技术实现

于万国,马　军

(河北民族师范学院，河北 承德 067000)



基于jQuery视频列表展示效果的技术实现

于万国,马军

(河北民族师范学院，河北 承德 067000)

目的在分析视频列表展示效果的功能需求基础上，探讨用HTML+CSS+jQuery实现视频列表的展示效果。方法用HTML实现网页的基本结构，用CSS实现网页效果的美化，用jQuery的选择器、DOM操作、事件监听机制等来实现。结果用jQuery较好地实现了视频列表展示效果。在该效果中，用户可以单击左上角的左右箭头来控制视频展示的左右滚动。当单击向右箭头时，视频列表会向左滚动隐藏，同时在右侧新的视频列表会以滚动方式显示出来，并有对应列表序号的显示标识。当单击向左箭头时，视频列表会向右滚动隐藏，同时在左侧新的视频列表会以滚动方式显示出来，并有对应列表序号的显示标识。结论用jQuery实现比原来用JavaScript实现的方法更加简单灵活、代码更加简洁。

jQuery;WEB应用;视频列表展示

0　背景分析

在WEB应用网站中，经常会看到用视频列表展示效果来实现多个视频的组织罗列。例如腾讯网站的“视觉焦点”板块，如图1所示，用的就是这种视频列表展示效果。这种方式一方面能在有限的网页空间内增加视频的数量，另一方面可以增强人们对内容的直观视觉效果，能更好地诠释所要展示的视频内容。以前实现这种效果的代码通常是用HTML+CSS+JavaScript来实现的[1-3]，笔者在分析源代码的基础上，用JavaScript的一个好用的程序库jQuery较容易地实现了该技术。jQuery解决了跨平台的兼容性问题，引入了强大的选择器功能，简化了JavaScript开发人员遍历HTML文档选择元素的操作，引入大量的DOM、CSS、事件处理、自定义动画等操作方法，对于Ajax也有强大的支持，改变了原JavaScript程序员的设计思路和编写程序的方式。“Wirte less,do more.”(写得少，做得多)是jQuery强调的理念[4-6]。最终实现的效果如图2所示。

图1　腾讯网站的“视觉焦点”板块效果

图2　视频展示效果

在该效果中，用户可以单击左上角的左右箭头来控制视频展示的左右滚动。当单击向右箭头时，下面的展示视频会向左滚动隐藏，同时新的视频展示会以滚动方式展示出来。当单击向左箭头时，下面的展示视频会向右滚动隐藏，同时新的视频展示会以滚动方式展示出来。在这里需要注意：

3)左上角的箭头旁边的蓝色圆点应该与动画一起切换，它代表着当前所处的版面。

1　技术实现

该实现效果的文件目录结构如图3所示，其中video文件夹用于存放视频文件，jquery.js是从jQuery官方网站http://jquery.com/下载的jQuery库文件。

图3　实现效果的目录结构

下面分别介绍其它3个文件的建立。

1)用HTML设计页面结构，写出index.html代码。

整个页面结构比较简单，主要采用的是DIV+CSS的布局方式，网页结构代码如下：

......//后面的视频文件列表省略

2)CSS页面的修饰非常关键，限于篇幅，在这里直接给出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代码。

相应的结点找到之后，就可以添加动画效果了。使用animate()方法通过控制“视频列表区域”的left属性的值来实现动画效果，每个版面的宽度就按left的值。每个版面的宽度可以使用width()方法来获取，代码如下：

var v_width=$v_detail.width();

(2)“视频列表区域”最后一个版面的取得。

版面之间的跳转应该是这样的：在到达最后一个版面之前，需要在当前版面数的基础上加1；到达最后一个版面时，即当前的版面数等于总的版面数，则需要把当前的版面数设置为1，使之从第一个版面重新开始动画[7]。从效果图可知，4张视频图片组成了“视频列表区域”的1个版面，可以通过获取视频图片的总数后除以4得到总的版面数。例如，8张视频图片对应2个版面；12张视频图片对应3个版面；9张视频图片，9除以4之后必须把小数向上取整，对应3个版面。

首先定义一个变量page并赋值为1，即初始值为第一个版面：

var page=1;

对应于“视频列表区域”的版面，还需要使左上角的箭头旁边的蓝色原点跟随动画一起切换，来标识当前所处的版面。只需要把样式“cur”添加到代表当前版面的“蓝色圆点”上就可以了，同时去除其它圆点的cur样式，用到了addClass和removeClass方法[8-10]。同时需要注意，eq方法的下标是从0开始的，所以第一个版面的eq方法的下标应该为page-1。故下面一行代码即可实现当前版面的圆点标识。

$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　结论与讨论

从上面分析的方法和实现的技术可知，用jQuery实现比原来用JavaScript实现的方法更加简单灵活、代码更加简洁。这是因为jQuery拥有强大的选择器功能、丰富的DOM操作方法、事件监听机制及自定义动画效果等大量的方法库，掌握好jQuery的这些方法库可以轻松地实现利用JavaScript难于实现的效果。

[1]于万国.运用jQuery对电商网站商品图片自动放大效果技术的实现[J].河北北方学院学报：自然科学版，2014，(04)：22-25.

[2]吴瑞红,张环冲.浅谈JavaScript库——jQuery,ExtJs的对比研究[J].科技信息,2010,(09):474-475.

[3]李轶.基于JavaScript的面向对象程序设计研究[J].江汉大学学报：自然科学版,2010,(03):52-56.

[4]乔志刚.JavaScript在ASP技术中的应用[J].宁波职业技术学院学报,2005,(02):81-84.

[5]张红琴,白林如.基于CSS和JavaScript的网页选项卡的设计和实现[J].洛阳理工学院学报：自然科学版,2012,(01):40-44.

[6]郑蓉,徐丽珍,徐秋芬.基于JavaScript的网页特效及实例[J].电脑学习,2006,(03):21-22.

郑蓉,徐丽珍,徐秋芬.基于JavaScript的网页特效及实例[J].微型电脑应用,2006,(08):63-64+3.

[7]单东林.锋利的jQuery[M].2版.北京：人民邮电出版社,2012：88-139.

[8]孙良军.HTML+CSS+JavaScript网页设计与布局实用教程[M].北京：清华大学出版社,2011：223-226.

[9]明日科技.JavaScript从入门到精通[M].北京：清华大学出版社,2012：172-185.

[10]Timothy B.Web开发入门经典[M].北京：清华大学出版社,2009：332-396.

[责任编辑：关金玉英文编辑：刘彦哲]

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年度国家民委教改项目：“民族院校应用型人才培养目标下的计算机网络方向实践教学改革研究”阶段性研究成果(15114)；承德市教育科学研究“十二五”规划2015年度专项课题(1501004)

于万国(1976-)，男，蒙古族，河北承德人，河北民族师范学院数学与计算机系讲师，理学硕士，研究方向为多媒体技术和WEB应用开发。

TP 312

A

10.3969/j.issn.1673-1492.2016.09.003