jquery可播放视频的焦点图特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery可播放视频的焦点图特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery可播放视频的焦点图</title>
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<link rel="stylesheet" href="css/blueimp-gallery.css">
<link rel="stylesheet" href="css/blueimp-gallery-indicator.css">
<link rel="stylesheet" href="css/blueimp-gallery-video.css">
<link rel="stylesheet" href="css/demo.css">

</head>
<body>
<!-- 代码 开始 -->
<div class="container">
<div id="blueimp-video-carousel" class="blueimp-gallery blueimp-gallery-controls blueimp-gallery-carousel">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">&lsaquo;</a>
    <a class="next">&rsaquo;</a>
    <a class="play-pause"></a>
</div>
</div>
<script src="js/blueimp-helper.js"></script>
<script src="js/blueimp-gallery.min.js"></script>
<script src="js/blueimp-gallery-fullscreen.js"></script>
<script src="js/blueimp-gallery-video.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.blueimp-gallery.min.js"></script>
<script src="js/demo.js"></script>
<!-- 代码 结束 -->
</body>
</html>

JS代码(demo.js):

/* * blueimp Gallery Demo JS 2.11.1 * https://github.com/blueimp/Gallery * * Copyright 2013,Sebastian Tschan * https://blueimp.net * * Licensed under the MIT license:* http://www.opensource.org/licenses/MIT */
/* global blueimp,$ */
$(function (){
	'use strict';
	// Initialize the Gallery as video carousel:blueimp.Gallery([{
	title:'Sintel',href:'http://caichicong.qiniudn.com/lrtkweb.mp4',type:'video/mp4',poster:'images/1.jpg'}
,{
	title:'Big Buck Bunny',href:'http://caichicong.qiniudn.com/lrtkweb.mp4',type:'video/mp4',poster:'images/2.jpg'}
,{
	title:'Elephants Dream',href:'http://caichicong.qiniudn.com/lrtkweb.mp4',type:'video/mp4',poster:'images/3.jpg'}
],{
	container:'#blueimp-video-carousel',carousel:true}
);
}
);

CSS代码(blueimp-gallery.css):

@charset "UTF-8";/* * blueimp Gallery CSS 2.11.1 * https://github.com/blueimp/Gallery * * Copyright 2013,Sebastian Tschan * https://blueimp.net * * Licensed under the MIT license:* http://www.opensource.org/licenses/MIT */
.blueimp-gallery,.blueimp-gallery > .slides > .slide > .slide-content{position:absolute;top:0;right:0;bottom:0;left:0;/* Prevent artifacts in Mozilla Firefox:*/
 -moz-backface-visibility:hidden;}
.blueimp-gallery > .slides > .slide > .slide-content{margin:auto;width:auto;height:auto;max-width:100%;max-height:100%;opacity:1;}
.blueimp-gallery{position:fixed;z-index:999999;overflow:hidden;background:#000;background:rgba(0,0,0,0.9);opacity:0;display:none;direction:ltr;-ms-touch-action:none;touch-action:none;}
.blueimp-gallery-carousel{position:relative;z-index:auto;margin:1em auto;/* Set the carousel width/height ratio to 16/9:*/
 padding-bottom:56.25%;box-shadow:0 0 10px #000;-ms-touch-action:pan-y;touch-action:pan-y;}
.blueimp-gallery-display{display:block;opacity:1;}
.blueimp-gallery > .slides{position:relative;height:100%;overflow:hidden;}
.blueimp-gallery-carousel > .slides{position:absolute;}
.blueimp-gallery > .slides > .slide{position:relative;float:left;height:100%;text-align:center;-webkit-transition-timing-function:cubic-bezier(0.645,0.045,0.355,1.000);-moz-transition-timing-function:cubic-bezier(0.645,0.045,0.355,1.000);-ms-transition-timing-function:cubic-bezier(0.645,0.045,0.355,1.000);-o-transition-timing-function:cubic-bezier(0.645,0.045,0.355,1.000);transition-timing-function:cubic-bezier(0.645,0.045,0.355,1.000);}
.blueimp-gallery,.blueimp-gallery > .slides > .slide > .slide-content{-webkit-transition:opacity 0.5s linear;-moz-transition:opacity 0.5s linear;-ms-transition:opacity 0.5s linear;-o-transition:opacity 0.5s linear;transition:opacity 0.5s linear;}
.blueimp-gallery > .slides > .slide-loading{background:url(../images/loading.gif) center no-repeat;background-size:64px 64px;}
.blueimp-gallery > .slides > .slide-loading > .slide-content{opacity:0;}
.blueimp-gallery > .slides > .slide-error{background:url(../images/error.png) center no-repeat;}
.blueimp-gallery > .slides > .slide-error > .slide-content{display:none;}
.blueimp-gallery > .prev,.blueimp-gallery > .next{position:absolute;top:50%;left:15px;width:40px;height:40px;margin-top:-23px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:60px;font-weight:100;line-height:30px;color:#fff;text-decoration:none;text-shadow:0 0 2px #000;text-align:center;background:#222;background:rgba(0,0,0,0.5);-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;border:3px solid #fff;-webkit-border-radius:23px;-moz-border-radius:23px;border-radius:23px;opacity:0.5;cursor:pointer;display:none;}
.blueimp-gallery > .next{left:auto;right:15px;}
.blueimp-gallery > .close,.blueimp-gallery > .title{position:absolute;top:15px;left:15px;margin:0 40px 0 0;font-size:20px;line-height:30px;color:#fff;text-shadow:0 0 2px #000;opacity:0.8;display:none;}
.blueimp-gallery > .close{padding:15px;right:15px;left:auto;margin:-15px;font-size:30px;text-decoration:none;cursor:pointer;}
.blueimp-gallery > .play-pause{position:absolute;right:15px;bottom:15px;width:15px;height:15px;background:url(../images/play-pause.png) 0 0 no-repeat;cursor:pointer;opacity:0.5;display:none;}
.blueimp-gallery-playing > .play-pause{background-position:-15px 0;}
.blueimp-gallery > .prev:hover,.blueimp-gallery > .next:hover,.blueimp-gallery > .close:hover,.blueimp-gallery > .title:hover,.blueimp-gallery > .play-pause:hover{color:#fff;opacity:1;}
.blueimp-gallery-controls > .prev,.blueimp-gallery-controls > .next,.blueimp-gallery-controls > .close,.blueimp-gallery-controls > .title,.blueimp-gallery-controls > .play-pause{display:block;/* Fix z-index issues (controls behind slide element) on Android:*/
 -webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);}
.blueimp-gallery-single > .prev,.blueimp-gallery-left > .prev,.blueimp-gallery-single > .next,.blueimp-gallery-right > .next,.blueimp-gallery-single > .play-pause{display:none;}
.blueimp-gallery > .slides > .slide > .slide-content,.blueimp-gallery > .prev,.blueimp-gallery > .next,.blueimp-gallery > .close,.blueimp-gallery > .play-pause{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
/* Replace PNGs with SVGs for capable browsers (excluding IE<9) */
body:last-child .blueimp-gallery > .slides > .slide-error{background-image:url(../images/error.svg);}
body:last-child .blueimp-gallery > .play-pause{width:20px;height:20px;background-size:40px 20px;background-image:url(../images/play-pause.svg);}
body:last-child .blueimp-gallery-playing > .play-pause{background-position:-20px 0;}
/* IE7 fixes */
*+html .blueimp-gallery > .slides > .slide{min-height:300px;}
*+html .blueimp-gallery > .slides > .slide > .slide-content{position:relative;}

CSS代码(demo.css):

/* * blueimp Gallery Demo CSS 2.0.0 * https://github.com/blueimp/Gallery * * Copyright 2013,Sebastian Tschan * https://blueimp.net * * Licensed under the MIT license:* http://www.opensource.org/licenses/MIT */
body{max-width:750px;margin:0 auto;padding:1em;font-family:'Lucida Grande','Lucida Sans Unicode',Arial,sans-serif;font-size:1em;line-height:1.4em;background:#222;color:#fff;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
a{color:orange;text-decoration:none;}
img{border:0;vertical-align:middle;}
h1{line-height:1em;}
h2,.links{text-align:center;}
@media (min-width:481px){.navigation{list-style:none;padding:0;}
.navigation li{display:inline-block;}
.navigation li:not(:first-child):before{content:'| ';}
}

附件:下载该文件资源,减少时间成本(增值服务)