【说不得得半路出家】对一个html案例模版的小小修改

来源：互联网发布：深圳大学网络教育编辑：程序博客网时间：2024/04/28 12:19

对一个html案例模版的小小修改

本文所有代码都在这里可以下载：http://download.csdn.net/detail/u010090005/5925105

在本科毕设的时候被好友怂恿学了点PHP，顺带用bootstrap模版做了一个小网站，结果突然就成了会html脚本文件的“稀缺人才”了。惭愧啊，到现在还看不是很懂js文件呢。不过领导布置任务来了，硬着头皮也得上。下面是对我昨天做的一个案例进行的小结。首先声明，案例不是原创，我也不是专业的网页设计师，更不会写js（暂时），所以如果有什么不对之处还请勿喷~

1.案例html代码

首先先上案例代码：

<!DOCTYPE html><html lang="en">    <head><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>    </head>    <body>        <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                </a>                <span class="right"><a href="http://www.thebestdesigns.com" target="_blank">Websites found on The Best Designs</a>                    <a href="http://tympanus.net/codrops/2012/02/06/3d-gallery-with-css3-and-jquery/">                        <strong>Back to the Codrops Article</strong>                    </a>                </span>                <div class="clr"></div>            </div><!--/ Codrops top bar --><header><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></nav></header><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>http://www.percivalclo.com/</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>http://lifeingreenville.com/</div></a><a href="#"><img src="images/5.jpg" alt="image05"><div>http://circlemeetups.com/</div></a><a href="#"><img src="images/6.jpg" alt="image06"><div>http://www.castirondesign.com/</div></a><a href="#"><img src="images/7.jpg" alt="image07"><div>http://www.foundrycollective.com/</div></a><a href="#"><img src="images/8.jpg" alt="image08"><div>http://www.mathiassterner.com/home</div></a><a href="#"><img src="images/9.jpg" alt="image09"><div>http://learnlakenona.com/</div></a><a href="#"><img src="images/10.jpg" alt="image10"><div>http://www.neighborhood-studio.com/</div></a><a href="#"><img src="images/11.jpg" alt="image11"><div>http://www.beckindesign.com/</div></a><a href="#"><img src="images/12.jpg" alt="image12"><div>http://kicksend.com/</div></a></div><nav><span class="dg-prev"><</span><span class="dg-next">></span></nav></section>        </div><script type="text/javascript" src="http://ajax.googleapis.com/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/>    </body></html>

看起来代码并不多，实现的内容也貌似很简单。效果如下图所示：

静态的图片看不出什么效果，只能描述一下：点击网页正中间下方的按钮，网页中间的图片会前后切换，并有动态效果。

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>http://www.percivalclo.com/</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>http://lifeingreenville.com/</div></a><a href="#"><img src="images/5.jpg" alt="image05"><div>http://circlemeetups.com/</div></a><a href="#"><img src="images/6.jpg" alt="image06"><div>http://www.castirondesign.com/</div></a><a href="#"><img src="images/7.jpg" alt="image07"><div>http://www.foundrycollective.com/</div></a><a href="#"><img src="images/8.jpg" alt="image08"><div>http://www.mathiassterner.com/home</div></a><a href="#"><img src="images/9.jpg" alt="image09"><div>http://learnlakenona.com/</div></a><a href="#"><img src="images/10.jpg" alt="image10"><div>http://www.neighborhood-studio.com/</div></a><a href="#"><img src="images/11.jpg" alt="image11"><div>http://www.beckindesign.com/</div></a><a href="#"><img src="images/12.jpg" alt="image12"><div>http://kicksend.com/</div></a></div><nav><span class="dg-prev"><</span><span class="dg-next">></span></nav></section>

首先是修改背景。

一般来说，背景的设置要么是在body的属性中设置，要么就会在.css文件中body的相应属性里设置。

我们在demo.css文件里可以看到如下代码：

/* General Demo Style */body{font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;background: #333 url(../images/bg.jpg) no-repeat;background-size:contain;font-weight: 400;font-size: 15px;color: #f0f0f0;overflow-y: scroll;}

可以看出其背景的基色是#333，背景图片是bg.jpg，效果是不重复。要想修改背景，如果不想要背景图片可以直接删除背景图片然后修改背景基色；如果一定要背景图片，也可以修改图片的文件名，或者修改效果（no-repeat-不允许重复，center-居中），具体效果可以参考http://www.w3school.com.cn/css/css_background.asp 在这里我设置为 center fixed。

去掉多余的内容，只剩下图片

这个。。我不想被鄙视，太简单了，就不多说了。

用键盘控制网页（前后切换）

最初的想法很简单，既然要要键盘控制，只需要改一下触发的接口就行了。但是仔细观察这段代码以及script部分，我甚至都不知道究竟是如何按下按钮从而触发js的。我的想法是，要弄懂这个就需要进入js文件查看相关代码。之前说了，我不懂js，尽管我还是去看了js文件，并且看了一个下午加一个晚上，但仍然没有头绪，更谈不上解决问题。因此，投机取巧的想法诞生了：

之前不是按下按钮就触发吗？那我设定，当键盘输入方向键（如右键）的时候，网页接收到键值（右键是39），那么就调用系统函数.click()点击对应的<span>标签（当然需要先对该标签设定一个id号），并将该标签设定为不可见。说了一大通，其实就是在按下按键之后，模拟鼠标点击网页的按钮。这个必须是取巧的方法。不过实现起来也不容易，尤其是对我们这样半吊子的人来说。

首先我要获取键值，

<script language="javascript">document.onkeydown=function(evt){evt = evt ? evt : (window.event ? window.event : null);alert(evt.keyCode); </script>

上面的代码的作用是，在网页中按下任何一个按键，都可以弹出对话框显示该按键的键值。神器来的。在测试了上下左右按键后，知道了各个键值：//37--左键；38--上键；39--右键；40--下键。

接下来要做的就是，当接收到按键按下后，触发模拟鼠标按下了按钮。首先应该给对应的按钮做个记号（设定id）：

<nav><span class="dg-prev" id="pre" style="visibility:hidden"><</span><span class="dg-next" id="next" style="visibility:hidden">></span></nav>

还要知道一个模拟鼠标点击按钮的函数：

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();   break;   //leftcase 38: document.getElementById("pre").click();   break;   //upcase 39: document.getElementById("next").click();  break;   //rightcase 40: document.getElementById("next").click();  break;   //downdefault: return;}

键盘控制网页（按Enter键打卡选中图片的网站）

按下Enter键后，要进入选中图片的网站。其方法和上面所述相同，都是模拟鼠标点击网页某一元素（标签id）实现的。而这一步还需要做两个操作：首先要对图片进行设置（设置其网址等），还要有一个索引号（就是告诉网页要触发哪一张图片）。根据这个思路，首先对图片进行设置：

<div class="dg-wrapper"><a id="img1" href="http://kkoa.konka.com">         <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="http://www.baidu.com"><img src="images/3.jpg" alt="image03"></a><a id="img4" href="http://www.163.com"><img src="images/4.jpg" alt="image04"></a></div>

再修改script，添加索引序号i，其逻辑是如下：

switch (evt.keyCode)    //37--左键；38--上键；39--右键；40--下键{ case 37: document.getElementById("pre").click();  if(i>1){i=i-1}else(i=max);break;   //leftcase 38: document.getElementById("pre").click();  if(i>1){i=i-1}else(i=max);break;   //upcase 39: document.getElementById("next").click(); if(i<max){i=i+1}else(i=1);break;   //rightcase 40: document.getElementById("next").click(); if(i<max){i=i+1}else(i=1);break;   //downcase 13: enterProgram(); break;default: return;}

而当检测到按下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();}}

4.修改后代码

下面是修改后的所有代码：

<!DOCTYPE html><html lang="en">    <head><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>    </head>    <body>        <div class="container"><!-- Codrops top bar --><header><h1>KONKA <span>DEMO</span></h1></header><section id="dg-container" class="dg-container"><div class="dg-wrapper"><a id="img1" href="http://kkoa.konka.com">         <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="http://www.baidu.com"><img src="images/3.jpg" alt="image03"></a><a id="img4" href="http://www.163.com"><img src="images/4.jpg" alt="image04"></a></div><nav><span class="dg-prev" id="pre" style="visibility:hidden"><</span><span class="dg-next" id="next" style="visibility:hidden">></span></nav></section>        </div><script language="javascript">var i=1;var max=4;document.onkeydown=function(evt){//var evt=evt?evt:window.event;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);*/              break;   //leftcase 38: document.getElementById("pre").click();  if(i>1){i=i-1}else(i=max); /*alert("您按下了上键");*/ break;   //upcase 39: document.getElementById("next").click(); if(i<max){i=i+1}else(i=1); /*alert(i);*/              break;   //rightcase 40: document.getElementById("next").click(); if(i<max){i=i+1}else(i=1); /*alert("您按下了下键");*/ break;   //downcase 13: enterProgram(); break;default: return;}  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><script type="text/javascript" src="http://ajax.googleapis.com/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/>    </body></html>

5.可拓展性

对于一个产品而言，其可拓展性极其重要。比如我现在需要更换一张背景图，或者需要添加更多的幻灯片，能不能快速修改以适应新的需求，是考验一个产品好坏的重要标准。

对这一个小网页而言，这些都不是问题。可以很快的定制页面。

1.背景的修改

只需要在demo.css中找到body的属性设置，修改下列代码即可。甚至只需要在image文件夹中更换bg.jpg文件即可。

background: #333 url(../images/bg.jpg) no-repeat;

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="http://www.163.com"><img src="images/5.jpg" alt="image05"></a><a id="img6" href="http://www.163.com"><img src="images/6.jpg" alt="image06"></a>

再在script中修改最大值

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();} }

6.附上js和css源代码

文件结构如下：

---根目录

|--css

|--demo.css

|--style.css

|--js

|--modernizr.custom.53451.js

|--jquery.gallery.js

|--images

|--1.jpg

|--……(此处省略)

|--6.jpg

|--bg.jpg

|--arrows.png(网页中的按钮原图)

js/jquery.gallery.js

/** * jquery.gallery.js * http://www.codrops.com * * Copyright 2011, Pedro Botelho / Codrops * Free to use under the MIT license. * * Date: Mon Jan 30 2012 */(function( $, undefined ) {/* * Gallery object. */$.Gallery = function( options, element ) {this.$el= $( element );this._init( options );};$.Gallery.defaults = {current: 0,// index of current itemautoplay: false,// slideshow on / offinterval: 2000  // time between transitions    };$.Gallery.prototype = {_init : function( options ) {this.options = $.extend( true, {}, $.Gallery.defaults, options );// support for 3d / 2d transforms and transitionsthis.support3d= Modernizr.csstransforms3d;this.support2d= Modernizr.csstransforms;this.supportTrans= Modernizr.csstransitions;this.$wrapper= this.$el.find('.dg-wrapper');this.$items= this.$wrapper.children();this.itemsCount= this.$items.length;this.$nav= this.$el.find('nav');this.$navPrev= this.$nav.find('.dg-prev');this.$navNext= this.$nav.find('.dg-next');// minimum of 3 itemsif( this.itemsCount < 3 ) {this.$nav.remove();return false;}this.current= this.options.current;this.isAnim= false;this.$items.css({'opacity': 0,'visibility': 'hidden'});this._validate();this._layout();// load the eventsthis._loadEvents();// slideshowif( this.options.autoplay ) {this._startSlideshow();}},_validate: function() {if( this.options.current < 0 || this.options.current > this.itemsCount - 1 ) {this.current = 0;}},_layout: function() {// current, left and right itemsthis._setItems();// current item is not changed// left and right one are rotated and translatedvar leftCSS, rightCSS, currentCSS;if( this.support3d && this.supportTrans ) {leftCSS = {'-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= 1;leftCSS.visibility= 'visible';rightCSS.opacity= 1;rightCSS.visibility= 'visible';}else if( this.support2d && this.supportTrans ) {leftCSS = {'-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= {'z-index': 999};leftCSS.opacity= 1;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');},_setItems: 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 itemsif( this.itemsCount > 3 ) {// next itemthis.$nextItm= ( this.$rightItm.index() === this.itemsCount - 1 ) ? this.$items.eq( 0 ) : this.$rightItm.next();this.$nextItm.css( this._getCoordinates('outright') );// previous itemthis.$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;this.$navPrev.on( 'click.gallery', function( event ) {if( _self.options.autoplay ) {clearTimeout( _self.slideshow );_self.options.autoplay= false;}_self._navigate('prev');return false;});this.$navNext.on( 'click.gallery', function( event ) {if( _self.options.autoplay ) {clearTimeout( _self.slideshow );_self.options.autoplay= false;}_self._navigate('next');return false;});this.$wrapper.on( 'webkitTransitionEnd.gallery transitionend.gallery OTransitionEnd.gallery', function( event ) {_self.$currentItm.addClass('dg-center');_self.$items.removeClass('dg-transition');_self.isAnim= false;});},_getCoordinates: function( position ) {if( this.support3d && this.supportTrans ) {switch( position ) {case 'outleft':return {'-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)','opacity': 0,'visibility': 'hidden'};break;case 'outright':return {'-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)','opacity': 0,'visibility': 'hidden'};break;case 'left':return {'-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)','opacity': 1,'visibility': 'visible'};break;case 'right':return {'-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)','opacity': 1,'visibility': 'visible'};break;case 'center':return {'-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)','opacity': 1,'visibility': 'visible'};break;};}else if( this.support2d && this.supportTrans ) {switch( position ) {case 'outleft':return {'-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)','opacity': 0,'visibility': 'hidden'};break;case 'outright':return {'-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)','opacity': 0,'visibility': 'hidden'};break;case 'left':return {'-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)','opacity': 1,'visibility': 'visible'};break;case 'right':return {'-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)','opacity': 1,'visibility': 'visible'};break;case 'center':return {'-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)','opacity': 1,'visibility': 'visible'};break;};}else {switch( position ) {case 'outleft': case 'outright': case 'left': case 'right':return {'opacity': 0,'visibility': 'hidden'};break;case 'center':return {'opacity': 1,'visibility': 'visible'};break;};}},_navigate: function( dir ) {if( this.supportTrans && this.isAnim )return false;this.isAnim= true;switch( dir ) {case 'next' :this.current= this.$rightItm.index();// current item moves leftthis.$currentItm.addClass('dg-transition').css( this._getCoordinates('left') );// right item moves to the centerthis.$rightItm.addClass('dg-transition').css( this._getCoordinates('center') );// next item moves to the rightif( this.$nextItm ) {// left item moves outthis.$leftItm.addClass('dg-transition').css( this._getCoordinates('outleft') );this.$nextItm.addClass('dg-transition').css( this._getCoordinates('right') );}else {// left item moves rightthis.$leftItm.addClass('dg-transition').css( this._getCoordinates('right') );}break;case 'prev' :this.current= this.$leftItm.index();// current item moves rightthis.$currentItm.addClass('dg-transition').css( this._getCoordinates('right') );// left item moves to the centerthis.$leftItm.addClass('dg-transition').css( this._getCoordinates('center') );// prev item moves to the leftif( this.$prevItm ) {// right item moves outthis.$rightItm.addClass('dg-transition').css( this._getCoordinates('outright') );this.$prevItm.addClass('dg-transition').css( this._getCoordinates('left') );}else {// right item moves leftthis.$rightItm.addClass('dg-transition').css( this._getCoordinates('left') );}break;};this._setItems();if( !this.supportTrans )this.$currentItm.addClass('dg-center');},_startSlideshow: function() {var _self= this;this.slideshow= setTimeout( function() {_self._navigate( 'next' );if( _self.options.autoplay ) {_self._startSlideshow();}}, this.options.interval );},destroy: 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 prior to initialization; " +"attempted to call method '" + options + "'" );return;}if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {logError( "no such method '" + options + "' for gallery instance" );return;}instance[ options ].apply( instance, args );});} else {this.each(function() {var instance = $.data( this, 'gallery' );if ( !instance ) {$.data( this, 'gallery', new $.Gallery( options, this ) );}});}return this;};})( jQuery );

modernizr.custom.53451.js

/* Modernizr 2.0.6 (Custom Build) | MIT & BSD * Build: http://www.modernizr.com/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.length;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:9px;position: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)continue;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.body;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))break;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.autoCallback;if(!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.load(a.complete)}var g,h,i=this.yepnope.loader;if(C(a))e(a,0,i,0);else if(A(a))for(g=0;g<a.length;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))};

demo.css

@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: normal;    font-style: normal;}/* 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 { margin:0;padding:0;}html,body {margin:0;padding:0;}table {border-collapse:collapse;border-spacing:0;}fieldset,img { border:0;}address,caption,cite,code,dfn,th,var {font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}q:before,q:after {content:'';}abbr,acronym { border:0;}section, header{display: block;}/* General Demo Style */body{font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;background: #333 url(../images/bg.jpg) center fixed;background-size:contain;font-weight: 400;font-size: 15px;color: #f0f0f0;overflow-y: scroll;}a{color: #ddd;text-decoration: none;}a:hover{color: #fff;}.container{width: 100%;position: relative;text-align: center;}.clr{clear: both;}.container > header{padding: 20px 30px 10px 30px;margin-bottom: 40px;position: relative;display: block;    text-align: center;}.container > header h1{font-family: "BebasNeueRegular", Arial, sans-serif;font-size: 35px;position: relative;font-weight: 300;text-transform: uppercase;color: rgba(255,48,48,0.9);text-shadow: 1px 1px 1px rgba(0,0,0,0.2);    padding: 0px 0px 5px 0px;}.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: 24px;font-size: 11px;background: rgba(255, 255, 255, 0.5);text-transform: uppercase;z-index: 9999;position: relative;box-shadow: 1px 0px 2px rgba(0,0,0,0.2);-webkit-animation: slideOut 0.5s ease-in-out 0.3s backwards;}@-webkit-keyframes slideOut{0%{top:-30px; opacity: 0;}100%{top:0px; opacity: 1;}}.codrops-top a{padding: 0px 10px;letter-spacing: 1px;color: #333;text-shadow: 0px 1px 1px #fff;display: block;float: left;}.codrops-top a:hover{background: #fff;}.codrops-top span.right{float: right;}.codrops-top span.right a{float: left;display: block;}.codrops-demos{text-align:center;display: block;padding-top: 20px;}.codrops-demos a, .codrops-demos a.current-demo,.codrops-demos a.current-demo:hover{    display: inline-block;border: 1px solid #719c7f;padding: 4px 10px 3px;font-size: 13px;line-height: 18px;margin: 0px 3px;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);color: #fff;text-shadow: 1px 1px 1px rgba(0,0,0,0.9);-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;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: center;}p.codrops-demos {position: relative;top: auto;left: auto;}}

style.css

.dg-container{width: 100%;height: 450px;position: relative;}.dg-wrapper{width: 481px;height: 316px;margin: 0 auto;position: relative;-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: 1000px;-moz-perspective: 1000px;-o-perspective: 1000px;-ms-perspective: 1000px;perspective: 1000px;}.dg-wrapper a{width: 482px;height: 316px;display: block;position: absolute;left: 0;top: 0;-background: transparent url(../images/browser.png) no-repeat top left;box-shadow: 0px 10px 10px rgba(0,0,0,0.3);}.dg-wrapper a.dg-transition{-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}.dg-wrapper a img{display: block;padding: 41px 0px 0px 1px;}.dg-wrapper a div{font-style: italic;text-align: center;line-height: 50px;text-shadow: 1px 1px 1px rgba(255,255,255,0.5);color: #333;font-size: 16px;width: 100%;bottom: -55px;display: none;position: absolute;}.dg-wrapper a.dg-center div{display: block;}.dg-container nav{width: 58px;position: absolute;z-index: 1000;bottom: 40px;left: 50%;margin-left: -29px;}.dg-container nav span{text-indent: -9000px;float: left;cursor:pointer;width: 24px;height: 25px;opacity: 0.8;background: transparent url(../images/arrows.png) no-repeat top left;}.dg-container nav span:hover{opacity: 1;}.dg-container nav span.dg-next{background-position: top right;margin-left: 10px;}

Destiny 2013-08-13 于深圳南山区

====================================

博主信息

====================================

Destiny

QQ: 1139904786

邮箱/Email:1139904786@qq.com

====================================