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

最新推荐文章于 2024-11-30 23:38:20 发布
最新推荐文章于 2024-11-30 23:38:20 发布
阅读量2.8k 收藏 1
点赞数 1
分类专栏： html 文章标签： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/kkdestiny/article/details/9943911
版权

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

 

本文所有代码都在这里可以下载：http://download.youkuaiyun.com/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.οnkeydοwn=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.οnkeydοwn=function(evt){
	evt = evt ? evt : (window.event ? window.event : null);
	switch (evt.keyCode)    //37--左键；38--上键；39--右键；40--下键
	{ 
		case 37: document.getElementById("pre").click();   break;   //left
		case 38: document.getElementById("pre").click();   break;   //up
		case 39: document.getElementById("next").click();  break;   //right
		case 40: document.getElementById("next").click();  break;   //down
		default: 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.youkuaiyun.com/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;   //left
	case 38: document.getElementById("pre").click();  if(i>1){i=i-1}else(i=max);break;   //up
	case 39: document.getElementById("next").click(); if(i<max){i=i+1}else(i=1);break;   //right
	case 40: document.getElementById("next").click(); if(i<max){i=i+1}else(i=1);break;   //down
	case 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.youkuaiyun.com/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.οnkeydοwn=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;   //left
			case 38: document.getElementById("pre").click();  if(i>1){i=i-1}else(i=max); /*alert("您按下了上键");*/ break;   //up
			case 39: document.getElementById("next").click(); if(i<max){i=i+1}else(i=1); /*alert(i);*/              break;   //right
			case 40: document.getElementById("next").click(); if(i<max){i=i+1}else(i=1); /*alert("您按下了下键");*/ break;   //down
			case 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 item
		autoplay	: false,// slideshow on / off
		interval	: 2000  // time between transitions
    };
	
	$.Gallery.prototype 	= {
		_init 				: function( options ) {
			
			this.options 		= $.extend( true, {}, $.Gallery.defaults, options );
			
			// support for 3d / 2d transforms and transitions
			this.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 items
			if( 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 events
			this._loadEvents();
			
			// slideshow
			if( 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 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 ) {
			
				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 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;
			
			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 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') );
						
					}
					else {
					
						// left item moves right
						this.$leftItm.addClass('dg-transition').css( this._getCoordinates('right') );
					
					}
					break;
					
				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') );
						
					}
					else {
					
						// right item moves left
						this.$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.οnlοad=function(){!d&&k(c.readyState)&&(d=1,j(),c.οnlοad=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.οnlοad=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.οnlοad=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.οnlοad=l.onreadystatechange=i,a=="img"?l.οnerrοr=i:a=="script"&&(l.οnerrοr=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
====================================

 

html基础
qq_50452445的博客
07-06 4275
HTML 的全称为超文本标记语言, 是一种标记语言。主要用来为文本添加语义。 注释 基本标签 h p img src: “图片的 URL”alt: “图像显示出错的替代文本”width: “图像宽度”height: “图像高度”注意点:​ 1.默认显示图像正常宽高​ 2.图像只设置宽度,高度自适应​ 3.图像只设置高度,宽度自适应​ 4.图像同时设置宽和高, 可能会导致图像变形 a href: “链接指向的页面 URL”target: “新页面打开方式” base target: “所有页面打开方
jquery ad-gallery参数
weixin_33862514的博客
05-08 269
1、准备Javascript及插件和CSS样式文件。 <scripttype="text/javascript"src="js/jquery.js"></script><scripttype="text/javascript"src="js/jquery.ad-gallery.js"></script><linkrel="sty...
Slider大屏轮播插件——3dGalley
AlvinNoending的专栏
12-30 1895
3d的大屏轮转插件3dGalley非常好用，功能异常强大，具体代码实现如下： HTML代码：     3D Gallery with CSS3 and jQuery                                         http://www.colazionedamichy.it/ htt
modernizr.custom.js制作html5页面一边展开
11-02
modernizr.custom.js制作html5页面一边展开 modernizr.custom.js制作html5页面一边展开
HTML——语法
Alyson_jm的博客
02-19 7222
文章目录页面结构一、文档声明头二、页面语言头标签meta 标签title 标签base 标签link 标签三、body 标签语义为什么要语义化写HTML 代码要注意些什么 页面结构 一个标准的HTML页面如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i
HTML语法格式
m0_56246862的博客
08-04 5365
HTMLHTML基本框架 HTML基本框架 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html> 在idea中创建HTML文件会自动生成以上代码片 !DOCTYPE html是用来告诉浏览器
html全局属性
十三阿哥的博客
05-25 1611
【代码】html全局属性。
HTML基础
weixin_43752912的博客
04-24 4257
HTML介绍 客户端和服务端 基础标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>这是一个网页</title> </head> <body> Hello World<br>你好 <p>这是第一个段落</p> <p>这是第二个段落</p>
HTML5 头部和元信息
atu1111的博客
08-23 733
HTML5 头部和元信息   meta元素用于定义页面的元信息 定义元信息 也就是指定一些name-value对      它有以下几个属性：      1.name: 指定元信息名称，该名称值可以随意指定      2.content: 指定元信息的值      3.http-eqiv: 指定元信息的名称，该属性指定的名称有特殊意义，它可以向浏览器传回一些有用的信息，帮助浏览器正确地处理网页内容      http-equiv属性所支持的值主要有如下几个：       1.Expires: 指定网页过期
html
weixin_49308607的博客
11-25 2025
HTML 第一个html程序 <!-- DOCTYPE:告诉浏览器我们要使用什么规范 --> <!DOCTYPE html> <html lang="en"> <!-- head标签代表网页头部 --> <head> <!-- meta描述性标签，它用来描述我们网站的一些信息 --> <!-- meta一般用来做SEO --> <meta charset="UTF-8"> &
HTML基础--CSS样式表（一）
m0_50315078的博客
08-04 4542
HTML基础之CSS样式表（一）
html笔记
最新发布
jsjbdjhd的博客
11-30 9823
你喜欢的食物：<input type="checkbox" name="sex" id="" value="鱼">鱼。<input type="text" value="username" id="" name="元素的名称"><input type="radio" name="sex" id="" value="女">女 <br>性别：<input type="radio" name="sex" id="" value="男">男。同一个页面，可以存在多个class值相同的标签-->
html乱码问题
Gehang的博客
05-07 1460
<!DOCTYPE html> <html lang="en"> <head> <!-- 作用:告诉浏览器所采用的编码字符集是什么，然后浏览器就会根据此字符集来解码,只是一个告诉浏览器的作用， 具体的内容字符集格式是根据当前编辑器来决定的 --> <meta charset="UTF-8"> ...
如何统计代码总行数：指令
学习笔记
04-19 5535
find . * |xargs wc -l 如果统计 .html，把前面的匹配改成 .html 即可 find . *.html |xargs wc -l 如果统计全部文件的行数 find . * |xargs wc -l 效果 6 images_bak/c3.png 188 images_bak/c3.jpg 459 images_bak/g3big.jp...
【<meta name="" content=">】的作用
445822357
01-18 502
一、语法：&lt;meta name="name" content="string"/&gt; 二、参数解析：a、name项：常用的选项有keywords(关键字) ，description(网站内容描述)，author(作者)，robots(机器人向导)等。b、http-equiv项：可用于代替name项，常用的选项有Expires(期限)，Pragma(cache模式)，Refresh(刷新...
html语言制作焦点图,HTML5实现的震撼3D焦点图动画的示例代码
weixin_42300798的博客
05-31 812
这是一款基于HTML5和jQuery的3D焦点图动画，焦点图中的图片利用了CSS3的相关特性实现图片倾斜效果，从而让图片出现3D的视觉效果。这款HTML5焦点图不仅可以手动点击按钮切换图片，而且还支持自动切换图片，使用起来也相当方便。如果你需要在网站中展示产品图片，那么这款焦点图插件非常适合你。HTML代码 http://www.colazionedamichy.it/ ...
meta
dou800的博客
03-14 339
参数解析：  a、name项：常用的选项有keywords(关键字) ，description(网站内容描述)，author(作者)，robots(机器人向导)等。  b、http-equiv项：可用于代替name项，常用的选项有Expires(期限)，Pragma(cache模式)，Refresh(刷新)，Set-Cookie(cookie设定)，Window-target(显示窗口的设定)
各种图片特效，你想要吗？你不是真的想要吧？【纯CSS实现】
weixin_30337251的博客
06-14 122
html部分：<!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie...
作为一名培训班半路出家的程序员，如何按时完成自己的工作
04-05
1. 确定目标和计划：首先，需要明确自己的目标和计划，制定出详细的工作计划，包括每天、每周和每月的任务安排，以及完成时间和优先级。 2. 提高效率：要提高自己的工作效率，可以利用一些工具和技巧，如使用开发工具、编写代码时采用高效的算法、缩短调试时间等。 3. 学会时间管理：学会合理安排自己的时间，避免时间浪费。可以使用时间管理工具帮助自己管理时间，如番茄工作法、GTD等。 4. 学会沟通：与同事、上级和客户之间保持良好的沟通，及时反馈进展情况和遇到的问题，以便及时调整计划和解决问题。 5. 不断学习和提升：作为一名半路出家的程序员，要不断学习和提升自己的技能和知识，参加培训、读书和参与开源项目等，保持自己的竞争力。 6. 保持积极心态：面对工作中的挑战和困难，保持积极的心态，勇于面对和解决问题，不断成长和进步。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值