1419人阅读
对一个html案例模版的小小修改
本文所有代码都在这里可以下载：
&&&&&&&&& &在本科毕设的时候被好友怂恿学了点PHP，顺带用bootstrap模版做了一个小网站，结果突然就成了会html脚本文件的“稀缺人才”了。惭愧啊，到现在还看不是很懂js文件呢。不过领导布置任务来了，硬着头皮也得上。下面是对我昨天做的一个案例进行的小结。首先声明，案例不是原创，我也不是专业的网页设计师，更不会写js（暂时），所以如果有什么不对之处还请勿喷~
&&&1.案例html代码
&&&&&&& 首先先上案例代码：
&!DOCTYPE html&
&html lang=&en&&
&meta charset=&UTF-8& /&
&meta http-equiv=&X-UA-Compatible& content=&IE=edge,chrome=1&&
&title&3D Gallery with CSS3 and jQuery&/title&
&meta name=&viewport& content=&width=device-width, initial-scale=1.0&&
&meta name=&description& content=&3D Gallery with CSS3 and jQuery& /&
&meta name=&keywords& content=&3d, gallery, jquery, css3, auto, slideshow, navigate, mouse scroll, perspective& /&
&meta name=&author& content=&Codrops& /&
&link rel=&shortcut icon& href=&../favicon.ico&&
&link rel=&stylesheet& type=&text/css& href=&css/demo.css& /&
&link rel=&stylesheet& type=&text/css& href=&css/style.css& /&
&script type=&text/javascript& src=&js/modernizr.custom.53451.js&&&/script&
&div class=&container&&
&!-- Codrops top bar --&
&div class=&codrops-top&&
&a href=&http://tympanus.net/Tutorials/CSS3PageTransitions/index.html#home&&
&strong&<< Previous Demo: &/strong&Page Transitions with CSS3
&span class=&right&&
&a href=&& target=&_blank&&Websites found on The Best Designs&/a&
&a href=&http://tympanus.net/codrops//3d-gallery-with-css3-and-jquery/&&
&strong&Back to the Codrops Article&/strong&
&div class=&clr&&&/div&
&/div&&!--/ Codrops top bar --&
&h1&3D Gallery &span&with CSS3 & jQuery&/span&&/h1&
&nav class=&codrops-demos&&
&a class=&current-demo& href=&index.html&&Navigation&/a&
&a href=&index2.html&&Auto-Slideshow&/a&
&a href=&index3.html&&3 Elements&/a&
&section id=&dg-container& class=&dg-container&&
&div class=&dg-wrapper&&
&a href=&#&&&img src=&images/1.jpg& alt=&image01&&&div&http://www.colazionedamichy.it/&/div&&/a&
&a href=&#&&&img src=&images/2.jpg& alt=&image02&&&div&/&/div&&/a&
&a href=&#&&&img src=&images/3.jpg& alt=&image03&&&div&http://www.wanda.net/fr&/div&&/a&
&a href=&#&&&img src=&images/4.jpg& alt=&image04&&&div&/&/div&&/a&
&a href=&#&&&img src=&images/5.jpg& alt=&image05&&&div&/&/div&&/a&
&a href=&#&&&img src=&images/6.jpg& alt=&image06&&&div&/&/div&&/a&
&a href=&#&&&img src=&images/7.jpg& alt=&image07&&&div&/&/div&&/a&
&a href=&#&&&img src=&images/8.jpg& alt=&image08&&&div&/home&/div&&/a&
&a href=&#&&&img src=&images/9.jpg& alt=&image09&&&div&/&/div&&/a&
&a href=&#&&&img src=&images/10.jpg& alt=&image10&&&div&http://www./&/div&&/a&
&a href=&#&&&img src=&images/11.jpg& alt=&image11&&&div&/&/div&&/a&
&a href=&#&&&img src=&images/12.jpg& alt=&image12&&&div&/&/div&&/a&
&span class=&dg-prev&&&&/span&
&span class=&dg-next&&&&/span&
&/section&
&script type=&text/javascript& src=&/ajax/libs/jquery/1.7.1/jquery.min.js&&&/script&
&script type=&text/javascript& src=&js/jquery.gallery.js&&&/script&
&script type=&text/javascript&&
$(function() {
$('#dg-container').gallery();
&/script/&
&&&&&&& 看起来代码并不多，实现的内容也貌&#20284;很简单。效果如下图所示：
&&&&&&&&&&& 静态的图片看不出什么效果，只能描述一下：点击网页正中间下方的按钮，网页中间的图片会前后切换，并有动态效果。
&&&& 2.修改要求
&&&&&&&& &而领导的要求有如下几点：
&&&&&&& 1. 将背景图片修改。（刚听到这个要求偷笑中：太简单了吧。不过后来做起来发现，要做好这东西还真是不简单）
&&&&&&& 2. 去掉所有多余的信息，只需要图片。（这个真是偷笑中，实在是没有什么技术含量）
&&&&&&& 3. 用键盘取代左右两个按钮，代替图片前后切换。（原本以为只需要改变函数的调用位置即可，结果发现没这么简单）
&&&&&&& 4. 我自己加了一点：按下Enter键进入对应页面的网站。
&&&&&3.代码分析
&&&&&&&&& & 分析其代码，主要的功能实现部分就是在下面一段中：
&section id=&dg-container& class=&dg-container&&
&div class=&dg-wrapper&&
&a href=&#&&&img src=&images/1.jpg& alt=&image01&&&div&http://www.colazionedamichy.it/&/div&&/a&
&a href=&#&&&img src=&images/2.jpg& alt=&image02&&&div&/&/div&&/a&
&a href=&#&&&img src=&images/3.jpg& alt=&image03&&&div&http://www.wanda.net/fr&/div&&/a&
&a href=&#&&&img src=&images/4.jpg& alt=&image04&&&div&/&/div&&/a&
&a href=&#&&&img src=&images/5.jpg& alt=&image05&&&div&/&/div&&/a&
&a href=&#&&&img src=&images/6.jpg& alt=&image06&&&div&/&/div&&/a&
&a href=&#&&&img src=&images/7.jpg& alt=&image07&&&div&/&/div&&/a&
&a href=&#&&&img src=&images/8.jpg& alt=&image08&&&div&/home&/div&&/a&
&a href=&#&&&img src=&images/9.jpg& alt=&image09&&&div&/&/div&&/a&
&a href=&#&&&img src=&images/10.jpg& alt=&image10&&&div&http://www./&/div&&/a&
&a href=&#&&&img src=&images/11.jpg& alt=&image11&&&div&/&/div&&/a&
&a href=&#&&&img src=&images/12.jpg& alt=&image12&&&div&/&/div&&/a&
&span class=&dg-prev&&&&/span&
&span class=&dg-next&&&&/span&
&/section&
&&&&首先是修改背景。
&&&&&&&&一般来说，背景的设置要么是在body的属性中设置，要么就会在.css文件中body的相应属性里设置。
&&&&&&& 我们在demo.css文件里可以看到如下代码：
/* General Demo Style */
font-family: Cambria, Palatino, &Palatino Linotype&, &Palatino LT STD&, Georgia,
background: #333 url(../images/bg.jpg) no-
background-size:
font-weight: 400;
font-size: 15
color: #f0f0f0;
overflow-y:
&&&&&&& 可以看出其背景的基色是#333，背景图片是bg.jpg，效果是不重复。要想修改背景，如果不想要背景图片可以直接删除背景图片然后修改背景基色；如果一定要背景图片，也可以修改图片的文件名，或者修改效果（no-repeat-不允许重复，center-居中），具体效果可以参考&
在这里我设置为 center fixed。
&&&&去掉多余的内容，只剩下图片
&&&&&&& 这个。。我不想被鄙视，太简单了，就不多说了。
&&&&&用键盘控制网页（前后切换）
&&&&&&&&最初的想法很简单，既然要要键盘控制，只需要改一下触发的接口就行了。但是仔细观察这段代码以及script部分，我甚至都不知道究竟是如何按下按钮从而触发js的。我的想法是，要弄懂这个就需要进入js文件查看相关代码。之前说了，我不懂js，尽管我还是去看了js文件，并且看了一个下午加一个晚上，但仍然没有头绪，更谈不上解决问题。因此，投机取巧的想法诞生了：
&&&&&&& 之前不是按下按钮就触发吗？那我设定，当键盘输入方向键（如右键）的时候，网页接收到键&#20540;（右键是39），那么就调用系统函数.click()点击对应的&span&标签（当然需要先对该标签设定一个id号），并将该标签设定为不可见。说了一大通，其实就是在按下按键之后，模拟鼠标点击网页的按钮。这个必须是取巧的方法。不过实现起来也不容易，尤其是对我们这样半吊子的人来说。
&&&&&&& 首先我要获取键&#20540;，
&script language=&javascript&&
document.onkeydown=function(evt){
evt = evt ? evt : (window.event ? window.event : null);
alert(evt.keyCode);
&&&&&&& 上面的代码的作用是，在网页中按下任何一个按键，都可以弹出对话框显示该按键的键&#20540;。神器来的。在测试了上下左右按键后，知道了各个键&#20540;：//37--左键；38--上键；39--右键；40--下键。
&&&&&&& 接下来要做的就是，当接收到按键按下后，触发模拟鼠标按下了按钮。首先应该给对应的按钮做个记号（设定id）：
&span class=&dg-prev& id=&pre& style=&visibility:hidden&&&&/span&
&span class=&dg-next& id=&next& style=&visibility:hidden&&&&/span&
&&&&&&& 还要知道一个模拟鼠标点击按钮的函数：
document.getElementById(id).click();
&&&&&&& 其中id是上面代码中的id。因此，可以写出如下代码：
document.onkeydown=function(evt){
evt = evt ? evt : (window.event ? window.event : null);
switch (evt.keyCode)
//37--左键；38--上键；39--右键；40--下键
case 37: document.getElementById(&pre&).click();
case 38: document.getElementById(&pre&).click();
case 39: document.getElementById(&next&).click();
case 40: document.getElementById(&next&).click();
&&&& 键盘控制网页（按Enter键打卡选中图片的网站）&&
&&&&&&&&& &按下Enter键后，要进入选中图片的网站。其方法和上面所述相同，都是模拟鼠标点击网页某一元素（标签id）实现的。而这一步还需要做两个操作：首先要对图片进行设置（设置其网址等），还要有一个索引号（就是告诉网页要触发哪一张图片）。& 根据这个思路，首先对图片进行设置：
&div class=&dg-wrapper&&
&a id=&img1& href=&&&
&img src=&images/1.jpg& alt=&image01&&&/a&
&a id=&img2& href=&http://blog.csdn.net/kkdestiny&&&img src=&images/2.jpg& alt=&image02&&&/a&
&a id=&img3& href=&&&&img src=&images/3.jpg& alt=&image03&&&/a&
&a id=&img4& href=&&&&img src=&images/4.jpg& alt=&image04&&&/a&
&&&&&&&&再修改script，添加索引序号i，其逻辑是如下：
switch (evt.keyCode)
//37--左键；38--上键；39--右键；40--下键
case 37: document.getElementById(&pre&).click();
if(i&1){i=i-1}else(i=max);
case 38: document.getElementById(&pre&).click();
if(i&1){i=i-1}else(i=max);
case 39: document.getElementById(&next&).click(); if(i&max){i=i+1}else(i=1);
case 40: document.getElementById(&next&).click(); if(i&max){i=i+1}else(i=1);
case 13: enterProgram();
&&&&&&& 而当检测到按下Enter键后，则调用函数enterProgram，并根据索引号i来确定要点击哪一张图片。上代码：
function enterProgram(){
if (i==1){
document.getElementById(&img1&).click();
}else if(i==2){
document.getElementById(&img2&).click();
}else if(i==3){
document.getElementById(&img3&).click();
}else if(i==4){
document.getElementById(&img4&).click();
<span style="font-size:18 color:#.修改后代码
&&&&&& 下面是修改后的所有代码：
&!DOCTYPE html&
&html lang=&en&&
&meta charset=&UTF-8& /&
&meta http-equiv=&X-UA-Compatible& content=&IE=edge,chrome=1&&
&title&KONKA DEMO PAGE&/title&
&meta name=&viewport& content=&width=device-width, initial-scale=1.0&&
&meta name=&description& content=&KONKA DEMO PAGE& /&
&meta name=&keywords& content=&3d, gallery, jquery, css3, auto, slideshow, navigate, mouse scroll, perspective& /&
&meta name=&author& content=&Codrops& /&
&link rel=&shortcut icon& href=&../favicon.ico&&
&link rel=&stylesheet& type=&text/css& href=&css/demo.css& /&
&link rel=&stylesheet& type=&text/css& href=&css/style.css& /&
&script type=&text/javascript& src=&js/modernizr.custom.53451.js&&&/script&
&div class=&container&&
&!-- Codrops top bar --&
&h1&KONKA &span&DEMO&/span&&/h1&
&section id=&dg-container& class=&dg-container&&
&div class=&dg-wrapper&&
&a id=&img1& href=&&&
&img src=&images/1.jpg& alt=&image01&&&/a&
&a id=&img2& href=&http://blog.csdn.net/kkdestiny&&&img src=&images/2.jpg& alt=&image02&&&/a&
&a id=&img3& href=&&&&img src=&images/3.jpg& alt=&image03&&&/a&
&a id=&img4& href=&&&&img src=&images/4.jpg& alt=&image04&&&/a&
&span class=&dg-prev& id=&pre& style=&visibility:hidden&&&&/span&
&span class=&dg-next& id=&next& style=&visibility:hidden&&&&/span&
&/section&
&script language=&javascript&&
var max=4;
document.onkeydown=function(evt){
//var evt=evt?evt:window.
evt = evt ? evt : (window.event ? window.event : null);
//弹出对话框提示输入的按键
// alert(evt.keyCode);
//解开此代码可以测试各按键的键值
switch (evt.keyCode)
//37--左键；38--上键；39--右键；40--下键
case 37: document.getElementById(&pre&).click();
if(i&1){i=i-1}else(i=max); /*alert(i);*/
case 38: document.getElementById(&pre&).click();
if(i&1){i=i-1}else(i=max); /*alert(&您按下了上键&);*/
case 39: document.getElementById(&next&).click(); if(i&max){i=i+1}else(i=1); /*alert(i);*/
case 40: document.getElementById(&next&).click(); if(i&max){i=i+1}else(i=1); /*alert(&您按下了下键&);*/
case 13: enterProgram();
function enterProgram(){
if (i==1){
document.getElementById(&img1&).click();
}else if(i==2){
document.getElementById(&img2&).click();
}else if(i==3){
document.getElementById(&img3&).click();
}else if(i==4){
document.getElementById(&img4&).click();
&script type=&text/javascript& src=&/ajax/libs/jquery/1.7.1/jquery.min.js&&&/script&
&script type=&text/javascript& src=&js/jquery.gallery.js&&&/script&
&script type=&text/javascript&&
$(function() {
$('#dg-container').gallery();
&/script/&
<span style="font-size:18 color:#.可拓展性
&&&&&&&&&& 对于一个产品而言，其可拓展性极其重要。比如我现在需要更换一张背景图，或者需要添加更多的幻灯片，能不能快速修改以适应新的需求，是考验一个产品好坏的重要标准。
&&&&&&& 对这一个小网页而言，这些都不是问题。可以很快的定制页面。
&&&&&&& 1.背景的修改
&&&&&&& 只需要在demo.css中找到body的属性设置，修改下列代码即可。甚至只需要在image文件夹中更换bg.jpg文件即可。
background: #333 url(../images/bg.jpg) no-
&&&&&&& 2.网页的标签名称的修改
&&&&&&& 每一个网页都有一个标签名称，可以在&head&标签中修改&title&
&title&KONKA DEMO PAGE&/title&
&&&&&&& 3.网站LOGO或名称修改
&&&&&&& 网站名的位置是自己设定的，在这里，可以在&body&里的&header&中修改
&h1&KONKA &span&DEMO&/span&&/h1&
&&&&&&& 4.添加更多幻灯片并响应
&&&&&&& 要添加更多幻灯片，主要修改如下几个地方。以从4个幻灯片增加到6个为例，首先需要在&section&中添加如下内容：
&a id=&img5& href=&&&&img src=&images/5.jpg& alt=&image05&&&/a&
&a id=&img6& href=&&&&img src=&images/6.jpg& alt=&image06&&&/a&
&&&&&&& 再在script中修改最大&#20540;
var max=6;
&&&&&&& 以及相应的处理逻辑
function enterProgram(){
if (i==1){
document.getElementById(&img1&).click();
}else if(i==2){
document.getElementById(&img2&).click();
}else if(i==3){
document.getElementById(&img3&).click();
}else if(i==4){
document.getElementById(&img4&).click();
}else if(i==5){
document.getElementById(&img5&).click();
}else if(i==6){
document.getElementById(&img6&).click();
<span style="font-size:18 color:#.附上js和css源代码
&&文件结构如下：
&---根目录
&&&&& |--demo.css
&&&& &|--style.css
&&&&& |--modernizr.custom.53451.js
&&&&& |--jquery.gallery.js
&& |--images
&&&&& |--1.jpg
&&&&& |--……(此处省略)
&&&&& |--6.jpg
&&&&& |--bg.jpg
&&&&& |--arrows.png(网页中的按钮原图)
&&&& js/jquery.gallery.js
* jquery.gallery.js
* Copyright 2011, Pedro Botelho / Codrops
* Free to use under the MIT license.
* Date: Mon Jan 30 2012
(function( $, undefined ) {
* Gallery object.
= function( options, element ) {
this.$el = $( element );
this._init( options );
$.Gallery.defaults
: 0, // index of current item
autoplay : false,// slideshow on / off
interval : 2000
// time between transitions
$.Gallery.prototype
: function( options ) {
this.options
= $.extend( true, {}, $.Gallery.defaults, options );
// support for 3d / 2d transforms and transitions
this.support3d
= Modernizr.csstransforms3d;
this.support2d
= Modernizr.
this.supportTrans = Modernizr.
this.$wrapper
= this.$el.find('.dg-wrapper');
this.$items
= this.$wrapper.children();
this.itemsCount
= this.$items.
= this.$el.find('nav');
this.$navPrev
= this.$nav.find('.dg-prev');
this.$navNext
= this.$nav.find('.dg-next');
// minimum of 3 items
if( this.itemsCount & 3 ) {
this.$nav.remove();
this.current
= this.options.
this.isAnim
this.$items.css({
'opacity' : 0,
'visibility': 'hidden'
this._validate();
this._layout();
// load the events
this._loadEvents();
// slideshow
if( this.options.autoplay ) {
this._startSlideshow();
: function() {
if( this.options.current & 0 || this.options.current & this.itemsCount - 1 ) {
this.current = 0;
: function() {
// current, left and right items
this._setItems();
// current item is not changed
// left and right one are rotated and translated
var leftCSS, rightCSS, currentCSS;
if( this.support3d && this.supportTrans ) {
'-webkit-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
'-moz-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
'-o-transform'
: 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
'-ms-transform'
: 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
'transform'
: 'translateX(-350px) translateZ(-200px) rotateY(45deg)'
rightCSS = {
'-webkit-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
'-moz-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
'-o-transform'
: 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
'-ms-transform'
: 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
'transform'
: 'translateX(350px) translateZ(-200px) rotateY(-45deg)'
leftCSS.opacity
leftCSS.visibility = 'visible';
rightCSS.opacity = 1;
rightCSS.visibility = 'visible';
else if( this.support2d && this.supportTrans ) {
'-webkit-transform' : 'translate(-350px) scale(0.8)',
'-moz-transform' : 'translate(-350px) scale(0.8)',
'-o-transform'
: 'translate(-350px) scale(0.8)',
'-ms-transform'
: 'translate(-350px) scale(0.8)',
'transform'
: 'translate(-350px) scale(0.8)'
rightCSS = {
'-webkit-transform' : 'translate(350px) scale(0.8)',
'-moz-transform' : 'translate(350px) scale(0.8)',
'-o-transform'
: 'translate(350px) scale(0.8)',
'-ms-transform'
: 'translate(350px) scale(0.8)',
'transform'
: 'translate(350px) scale(0.8)'
currentCSS = {
leftCSS.opacity
leftCSS.visibility = 'visible';
rightCSS.opacity = 1;
rightCSS.visibility = 'visible';
this.$leftItm.css( leftCSS || {} );
this.$rightItm.css( rightCSS || {} );
this.$currentItm.css( currentCSS || {} ).css({
'opacity' : 1,
'visibility': 'visible'
}).addClass('dg-center');
: function() {
this.$items.removeClass('dg-center');
this.$currentItm = this.$items.eq( this.current );
this.$leftItm
= ( this.current === 0 ) ? this.$items.eq( this.itemsCount - 1 ) : this.$items.eq( this.current - 1 );
this.$rightItm
= ( this.current === this.itemsCount - 1 ) ? this.$items.eq( 0 ) : this.$items.eq( this.current + 1 );
if( !this.support3d && this.support2d && this.supportTrans ) {
this.$items.css( 'z-index', 1 );
this.$currentItm.css( 'z-index', 999 );
// next & previous items
if( this.itemsCount & 3 ) {
// next item
this.$nextItm
= ( this.$rightItm.index() === this.itemsCount - 1 ) ? this.$items.eq( 0 ) : this.$rightItm.next();
this.$nextItm.css( this._getCoordinates('outright') );
// previous item
this.$prevItm
= ( this.$leftItm.index() === 0 ) ? this.$items.eq( this.itemsCount - 1 ) : this.$leftItm.prev();
this.$prevItm.css( this._getCoordinates('outleft') );
_loadEvents
: function() {
var _self =
this.$navPrev.on( 'click.gallery', function( event ) {
if( _self.options.autoplay ) {
clearTimeout( _self.slideshow );
_self.options.autoplay =
_self._navigate('prev');
this.$navNext.on( 'click.gallery', function( event ) {
if( _self.options.autoplay ) {
clearTimeout( _self.slideshow );
_self.options.autoplay =
_self._navigate('next');
this.$wrapper.on( 'webkitTransitionEnd.gallery transitionend.gallery OTransitionEnd.gallery', function( event ) {
_self.$currentItm.addClass('dg-center');
_self.$items.removeClass('dg-transition');
_self.isAnim =
_getCoordinates
: function( position ) {
if( this.support3d && this.supportTrans ) {
switch( position ) {
case 'outleft':
'-webkit-transform' : 'translateX(-450px) translateZ(-300px) rotateY(45deg)',
'-moz-transform' : 'translateX(-450px) translateZ(-300px) rotateY(45deg)',
'-o-transform'
: 'translateX(-450px) translateZ(-300px) rotateY(45deg)',
'-ms-transform'
: 'translateX(-450px) translateZ(-300px) rotateY(45deg)',
'transform'
: 'translateX(-450px) translateZ(-300px) rotateY(45deg)',
'visibility'
: 'hidden'
case 'outright':
'-webkit-transform' : 'translateX(450px) translateZ(-300px) rotateY(-45deg)',
'-moz-transform' : 'translateX(450px) translateZ(-300px) rotateY(-45deg)',
'-o-transform'
: 'translateX(450px) translateZ(-300px) rotateY(-45deg)',
'-ms-transform'
: 'translateX(450px) translateZ(-300px) rotateY(-45deg)',
'transform'
: 'translateX(450px) translateZ(-300px) rotateY(-45deg)',
'visibility'
: 'hidden'
case 'left':
'-webkit-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
'-moz-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
'-o-transform'
: 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
'-ms-transform'
: 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
'transform'
: 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
'visibility'
: 'visible'
case 'right':
'-webkit-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
'-moz-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
'-o-transform'
: 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
'-ms-transform'
: 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
'transform'
: 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
'visibility'
: 'visible'
case 'center':
'-webkit-transform' : 'translateX(0px) translateZ(0px) rotateY(0deg)',
'-moz-transform' : 'translateX(0px) translateZ(0px) rotateY(0deg)',
'-o-transform'
: 'translateX(0px) translateZ(0px) rotateY(0deg)',
'-ms-transform'
: 'translateX(0px) translateZ(0px) rotateY(0deg)',
'transform'
: 'translateX(0px) translateZ(0px) rotateY(0deg)',
'visibility'
: 'visible'
else if( this.support2d && this.supportTrans ) {
switch( position ) {
case 'outleft':
'-webkit-transform' : 'translate(-450px) scale(0.7)',
'-moz-transform' : 'translate(-450px) scale(0.7)',
'-o-transform'
: 'translate(-450px) scale(0.7)',
'-ms-transform'
: 'translate(-450px) scale(0.7)',
'transform'
: 'translate(-450px) scale(0.7)',
'visibility'
: 'hidden'
case 'outright':
'-webkit-transform' : 'translate(450px) scale(0.7)',
'-moz-transform' : 'translate(450px) scale(0.7)',
'-o-transform'
: 'translate(450px) scale(0.7)',
'-ms-transform'
: 'translate(450px) scale(0.7)',
'transform'
: 'translate(450px) scale(0.7)',
'visibility'
: 'hidden'
case 'left':
'-webkit-transform' : 'translate(-350px) scale(0.8)',
'-moz-transform' : 'translate(-350px) scale(0.8)',
'-o-transform'
: 'translate(-350px) scale(0.8)',
'-ms-transform'
: 'translate(-350px) scale(0.8)',
'transform'
: 'translate(-350px) scale(0.8)',
'visibility'
: 'visible'
case 'right':
'-webkit-transform' : 'translate(350px) scale(0.8)',
'-moz-transform' : 'translate(350px) scale(0.8)',
'-o-transform'
: 'translate(350px) scale(0.8)',
'-ms-transform'
: 'translate(350px) scale(0.8)',
'transform'
: 'translate(350px) scale(0.8)',
'visibility'
: 'visible'
case 'center':
'-webkit-transform' : 'translate(0px) scale(1)',
'-moz-transform' : 'translate(0px) scale(1)',
'-o-transform'
: 'translate(0px) scale(1)',
'-ms-transform'
: 'translate(0px) scale(1)',
'transform'
: 'translate(0px) scale(1)',
'visibility'
: 'visible'
switch( position ) {
case 'outleft' :
case 'outright' :
case 'left'
case 'right' :
'visibility'
: 'hidden'
case 'center' :
'visibility'
: 'visible'
: function( dir ) {
if( this.supportTrans && this.isAnim )
this.isAnim =
switch( dir ) {
case 'next' :
this.current = this.$rightItm.index();
// current item moves left
this.$currentItm.addClass('dg-transition').css( this._getCoordinates('left') );
// right item moves to the center
this.$rightItm.addClass('dg-transition').css( this._getCoordinates('center') );
// next item moves to the right
if( this.$nextItm ) {
// left item moves out
this.$leftItm.addClass('dg-transition').css( this._getCoordinates('outleft') );
this.$nextItm.addClass('dg-transition').css( this._getCoordinates('right') );
// left item moves right
this.$leftItm.addClass('dg-transition').css( this._getCoordinates('right') );
case 'prev' :
this.current = this.$leftItm.index();
// current item moves right
this.$currentItm.addClass('dg-transition').css( this._getCoordinates('right') );
// left item moves to the center
this.$leftItm.addClass('dg-transition').css( this._getCoordinates('center') );
// prev item moves to the left
if( this.$prevItm ) {
// right item moves out
this.$rightItm.addClass('dg-transition').css( this._getCoordinates('outright') );
this.$prevItm.addClass('dg-transition').css( this._getCoordinates('left') );
// right item moves left
this.$rightItm.addClass('dg-transition').css( this._getCoordinates('left') );
this._setItems();
if( !this.supportTrans )
this.$currentItm.addClass('dg-center');
_startSlideshow
: function() {
var _self =
this.slideshow = setTimeout( function() {
_self._navigate( 'next' );
if( _self.options.autoplay ) {
_self._startSlideshow();
}, this.options.interval );
: function() {
this.$navPrev.off('.gallery');
this.$navNext.off('.gallery');
this.$wrapper.off('.gallery');
var logError
= function( message ) {
if ( this.console ) {
console.error( message );
$.fn.gallery
= function( options ) {
if ( typeof options === 'string' ) {
var args = Array.prototype.slice.call( arguments, 1 );
this.each(function() {
var instance = $.data( this, 'gallery' );
if ( !instance ) {
logError( &cannot call methods on gallery pri & +
&attempted to call method '& + options + &'& );
if ( !$.isFunction( instance[options] ) || options.charAt(0) === &_& ) {
logError( &no such method '& + options + &' for gallery instance& );
instance[ options ].apply( instance, args );
this.each(function() {
var instance = $.data( this, 'gallery' );
if ( !instance ) {
$.data( this, 'gallery', new $.Gallery( options, this ) );
})( jQuery );
modernizr.custom.53451.js
/* Modernizr 2.0.6 (Custom Build) | MIT & BSD
* Build: /download/#-csstransforms-csstransforms3d-csstransitions-iepp-cssclasses-teststyles-testprop-testallprops-prefixes-domprefixes-load
;window.Modernizr=function(a,b,c){function C(a,b){var c=a.charAt(0).toUpperCase()+a.substr(1),d=(a+& &+o.join(c+& &)+c).split(& &);return B(d,b)}function B(a,b){for(var d in a)if(k[a[d]]!==c)return b==&pfx&?a[d]:!0;return!1}function A(a,b){return!!~(&&+a).indexOf(b)}function z(a,b){return typeof a===b}function y(a,b){return x(n.join(a+&;&)+(b||&&))}function x(a){k.cssText=a}var d=&2.0.6&,e={},f=!0,g=b.documentElement,h=b.head||b.getElementsByTagName(&head&)[0],i=&modernizr&,j=b.createElement(i),k=j.style,l,m=Object.prototype.toString,n=& -webkit- -moz- -o- -ms- -khtml- &.split(& &),o=&Webkit Moz O ms Khtml&.split(& &),p={},q={},r={},s=[],t=function(a,c,d,e){var f,h,j,k=b.createElement(&div&);if(parseInt(d,10))while(d--)j=b.createElement(&div&),j.id=e?e[d]:i+(d+1),k.appendChild(j);f=[&&&,&&style&&,a,&&/style&&].join(&&),k.id=i,k.innerHTML+=f,g.appendChild(k),h=c(k,a),k.parentNode.removeChild(k);return!!h},u,v={}.hasOwnProperty,w;!z(v,c)&&!z(v.call,c)?w=function(a,b){return v.call(a,b)}:w=function(a,b){return b in a&&z(a.constructor.prototype[b],c)};var D=function(a,c){var d=a.join(&&),f=c.t(d,function(a,c){var d=b.styleSheets[b.styleSheets.length-1],g=d.cssRules&&d.cssRules[0]?d.cssRules[0].cssText:d.cssText||&&,h=a.childNodes,i={};while(f--)i[h[f].id]=h[f];e.csstransforms3d=i.csstransforms3d.offsetLeft===9},f,c)}([,[&@media (&,n.join(&transform-3d),(&),i,&)&,&{#csstransforms3d{left:9position:absolute}}&].join(&&)],[,&csstransforms3d&]);p.csstransforms=function(){return!!B([&transformProperty&,&WebkitTransform&,&MozTransform&,&OTransform&,&msTransform&])},p.csstransforms3d=function(){var a=!!B([&perspectiveProperty&,&WebkitPerspective&,&MozPerspective&,&OPerspective&,&msPerspective&]);a&&&webkitPerspective&in g.style&&(a=e.csstransforms3d);return a},p.csstransitions=function(){return C(&transitionProperty&)};for(var E in p)w(p,E)&&(u=E.toLowerCase(),e[u]=p[E](),s.push((e[u]?&&:&no-&)+u));x(&&),j=l=null,a.attachEvent&&function(){var a=b.createElement(&div&);a.innerHTML=&&elem&&/elem&&;return a.childNodes.length!==1}()&&function(a,b){function s(a){var b=-1;while(++b&g)a.createElement(f[b])}a.iepp=a.iepp||{};var d=a.iepp,e=d.html5elements||&abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video&,f=e.split(&|&),g=f.length,h=new RegExp(&(^|\\s)(&+e+&)&,&gi&),i=new RegExp(&&(/*)(&+e+&)&,&gi&),j=/^\s*[\{\}]\s*$/,k=new RegExp(&(^|[^\\n]*?\\s)(&+e+&)([^\\n]*)({[\\n\\w\\W]*?})&,&gi&),l=b.createDocumentFragment(),m=b.documentElement,n=m.firstChild,o=b.createElement(&body&),p=b.createElement(&style&),q=/print|all/,r;d.getCSS=function(a,b){if(a+&&===c)return&&;var e=-1,f=a.length,g,h=[];while(++e&f){g=a[e];if(g.disabled)b=g.media||b,q.test(b)&&h.push(d.getCSS(g.imports,b),g.cssText),b=&all&}return h.join(&&)},d.parseCSS=function(a){var b=[],c;while((c=k.exec(a))!=null)b.push(((j.exec(c[1])?&\n&:c[1])+c[2]+c[3]).replace(h,&$1.iepp_$2&)+c[4]);return b.join(&\n&)},d.writeHTML=function(){var a=-1;r=r||b.while(++a&g){var c=b.getElementsByTagName(f[a]),d=c.length,e=-1;while(++e&d)c[e].className.indexOf(&iepp_&)&0&&(c[e].className+=& iepp_&+f[a])}l.appendChild(r),m.appendChild(o),o.className=r.className,o.id=r.id,o.innerHTML=r.innerHTML.replace(i,&&$1font&)},d._beforePrint=function(){p.styleSheet.cssText=d.parseCSS(d.getCSS(b.styleSheets,&all&)),d.writeHTML()},d.restoreHTML=function(){o.innerHTML=&&,m.removeChild(o),m.appendChild(r)},d._afterPrint=function(){d.restoreHTML(),p.styleSheet.cssText=&&},s(b),s(l);d.disablePP||(n.insertBefore(p,n.firstChild),p.media=&print&,p.className=&iepp-printshim&,a.attachEvent(&onbeforeprint&,d._beforePrint),a.attachEvent(&onafterprint&,d._afterPrint))}(a,b),e._version=d,e._prefixes=n,e._domPrefixes=o,e.testProp=function(a){return B([a])},e.testAllProps=C,e.testStyles=t,g.className=g.className.replace(/\bno-js\b/,&&)+(f?& js &+s.join(& &):&&);return e}(this,this.document),function(a,b,c){function k(a){return!a||a==&loaded&||a==&complete&}function j(){var a=1,b=-1;while(p.length- ++b)if(p[b].s&&!(a=p[b].r))a&&g()}function i(a){var c=b.createElement(&script&),d;c.src=a.s,c.onreadystatechange=c.onload=function(){!d&&k(c.readyState)&&(d=1,j(),c.onload=c.onreadystatechange=null)},m(function(){d||(d=1,j())},H.errorTimeout),a.e?c.onload():n.parentNode.insertBefore(c,n)}function h(a){var c=b.createElement(&link&),d;c.href=a.s,c.rel=&stylesheet&,c.type=&text/css&;if(!a.e&&(w||r)){var e=function(a){m(function(){if(!d)try{a.sheet.cssRules.length?(d=1,j()):e(a)}catch(b){b.code==1e3||b.message==&security&||b.message==&denied&?(d=1,m(function(){j()},0)):e(a)}},0)};e(c)}else c.onload=function(){d||(d=1,m(function(){j()},0))},a.e&&c.onload();m(function(){d||(d=1,j())},H.errorTimeout),!a.e&&n.parentNode.insertBefore(c,n)}function g(){var a=p.shift();q=1,a?a.t?m(function(){a.t==&c&?h(a):i(a)},0):(a(),j()):q=0}function f(a,c,d,e,f,h){function i(){!o&&k(l.readyState)&&(r.r=o=1,!q&&j(),l.onload=l.onreadystatechange=null,m(function(){u.removeChild(l)},0))}var l=b.createElement(a),o=0,r={t:d,s:c,e:h};l.src=l.data=c,!s&&(l.style.display=&none&),l.width=l.height=&0&,a!=&object&&&(l.type=d),l.onload=l.onreadystatechange=i,a==&img&?l.onerror=i:a==&script&&&(l.onerror=function(){r.e=r.r=1,g()}),p.splice(e,0,r),u.insertBefore(l,s?null:n),m(function(){o||(u.removeChild(l),r.r=r.e=o=1,j())},H.errorTimeout)}function e(a,b,c){var d=b==&c&?z:y;q=0,b=b||&j&,C(a)?f(d,a,b,this.i++,l,c):(p.splice(this.i++,0,a),p.length==1&&g());return this}function d(){var a=H;a.loader={load:e,i:0};return a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName(&script&)[0],o={}.toString,p=[],q=0,r=&MozAppearance&in l.style,s=r&&!!b.createRange().compareNode,t=r&&!s,u=s?l:n.parentNode,v=a.opera&&o.call(a.opera)==&[object Opera]&,w=&webkitAppearance&in l.style,x=w&&&async&in b.createElement(&script&),y=r?&object&:v||x?&img&:&script&,z=w?&img&:y,A=Array.isArray||function(a){return o.call(a)==&[object Array]&},B=function(a){return Object(a)===a},C=function(a){return typeof a==&string&},D=function(a){return o.call(a)==&[object Function]&},E=[],F={},G,H;H=function(a){function f(a){var b=a.split(&!&),c=E.length,d=b.pop(),e=b.length,f={url:d,origUrl:d,prefixes:b},g,h;for(h=0;h&e;h++)g=F[b[h]],g&&(f=g(f));for(h=0;h&c;h++)f=E[h](f);return f}function e(a,b,e,g,h){var i=f(a),j=i.autoCif(!i.bypass){b&&(b=D(b)?b:b[a]||b[g]||b[a.split(&/&).pop().split(&?&)[0]]);if(i.instead)return i.instead(a,b,e,g,h);e.load(i.url,i.forceCSS||!i.forceJS&&/css$/.test(i.url)?&c&:c,i.noexec),(D(b)||D(j))&&e.load(function(){d(),b&&b(i.origUrl,h,g),j&&j(i.origUrl,h,g)})}}function b(a,b){function c(a){if(C(a))e(a,h,b,0,d);else if(B(a))for(i in a)a.hasOwnProperty(i)&&e(a[i],h,b,i,d)}var d=!!a.test,f=d?a.yep:a.nope,g=a.load||a.both,h=a.callback,i;c(f),c(g),a.complete&&b.plete)}var g,h,i=this.yepnope.if(C(a))e(a,0,i,0);else if(A(a))for(g=0;g&a.g++)h=a[g],C(h)?e(h,0,i,0):A(h)?H(h):B(h)&&b(h,i);else B(a)&&b(a,i)},H.addPrefix=function(a,b){F[a]=b},H.addFilter=function(a){E.push(a)},H.errorTimeout=1e4,b.readyState==null&&b.addEventListener&&(b.readyState=&loading&,b.addEventListener(&DOMContentLoaded&,G=function(){b.removeEventListener(&DOMContentLoaded&,G,0),b.readyState=&complete&},0)),a.yepnope=d()}(this,this.document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};
@font-face {
font-family: 'BebasNeueRegular';
src: url('fonts/BebasNeue-webfont.eot');
src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/BebasNeue-webfont.woff') format('woff'),
url('fonts/BebasNeue-webfont.ttf') format('truetype'),
url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight:
font-style:
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
padding:0;
html,body {
padding:0;
border-collapse:
border-spacing:0;
fieldset,img {
address,caption,cite,code,dfn,th,var {
font-style:
font-weight:
list-style:
caption,th {
text-align:
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:
q:before,q:after {
content:'';
abbr,acronym { border:0;
section, header{
/* General Demo Style */
font-family: Cambria, Palatino, &Palatino Linotype&, &Palatino LT STD&, Georgia,
background: #333 url(../images/bg.jpg)
background-size:
font-weight: 400;
font-size: 15
color: #f0f0f0;
overflow-y:
text-decoration:
.container{
width: 100%;
text-align:
.container & header{
padding: 20px 30px 10px 30
margin-bottom: 40
text-align:
.container & header h1{
font-family: &BebasNeueRegular&, Arial, sans-
font-size: 35
font-weight: 300;
text-transform:
color: rgba(255,48,48,0.9);
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
padding: 0px 0px 5px 0
.container & header h1 span{
color: #D3D3D3;
text-shadow: 1px 1px 1px rgba(255,255,255,0.4);
.container & header h2{
/* Header Style */
.codrops-top{
line-height: 24
font-size: 11
background: rgba(255, 255, 255, 0.5);
text-transform:
z-index: 9999;
box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
-webkit-animation: slideOut 0.5s ease-in-out 0.3
@-webkit-keyframes slideOut{
0%{top:-30 opacity: 0;}
100%{top:0 opacity: 1;}
.codrops-top a{
padding: 0px 10
letter-spacing: 1
color: #333;
text-shadow: 0px 1px 1px #
.codrops-top a:hover{
background: #
.codrops-top span.right{
.codrops-top span.right a{
.codrops-demos{
text-align:
padding-top: 20
.codrops-demos a,
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover{
display: inline-
border: 1px solid #719c7f;
padding: 4px 10px 3
font-size: 13
line-height: 18
margin: 0px 3
font-weight: 800;
-webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:0px 1px 1px rgba(0,0,0,0.1);
box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
-webkit-border-radius: 5
-moz-border-radius: 5
border-radius: 5
background: #90bd9e;
background: -moz-linear-gradient(top, #90bd9e 0%, #72a081 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#90bd9e), color-stop(100%,#72a081));
background: -webkit-linear-gradient(top, #90bd9e 0%,#72a081 100%);
background: -o-linear-gradient(top, #90bd9e 0%,#72a081 100%);
background: -ms-linear-gradient(top, #90bd9e 0%,#72a081 100%);
background: linear-gradient(top, #90bd9e 0%,#72a081 100%);
.codrops-demos a:hover{
background: #85b995;
.codrops-demos a:active{
-webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.4);
-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.4);
box-shadow: 0px 1px 1px rgba(255,255,255,0.4);
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover{
color: #506757;
text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
/* Media Queries */
@media screen and (max-width: 767px) {
.container & header{
text-align:
p.codrops-demos {
.dg-container{
width: 100%;
height: 450
.dg-wrapper{
width: 481
height: 316
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 1000
-moz-perspective: 1000
-o-perspective: 1000
-ms-perspective: 1000
perspective: 1000
.dg-wrapper a{
width: 482
height: 316
-background: transparent url(../images/browser.png) no-
box-shadow: 0px 10px 10px rgba(0,0,0,0.3);
.dg-wrapper a.dg-transition{
-webkit-transition: all 0.5s ease-in-
-moz-transition: all 0.5s ease-in-
-o-transition: all 0.5s ease-in-
-ms-transition: all 0.5s ease-in-
transition: all 0.5s ease-in-
.dg-wrapper a img{
padding: 41px 0px 0px 1
.dg-wrapper a div{
font-style:
text-align:
line-height: 50
text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
color: #333;
font-size: 16
width: 100%;
bottom: -55
.dg-wrapper a.dg-center div{
.dg-container nav{
z-index: 1000;
bottom: 40
left: 50%;
margin-left: -29
.dg-container nav span{
text-indent: -9000
height: 25
opacity: 0.8;
background: transparent url(../images/arrows.png) no-
.dg-container nav span:hover{
opacity: 1;
.dg-container nav span.dg-next{
background-position:
margin-left: 10
& Destiny & & 于深圳南山区
====================================
====================================
邮箱/Email:
====================================
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：27173次
排名：千里之外
评论：15条