mirror of
https://gitee.com/coder-xiaomo/flashsale
synced 2025-09-13 07:21:38 +08:00
添加Metronic（作为LFS）
This commit is contained in:
@@ -0,0 +1,524 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
|
||||
<!--
|
||||
#######################################
|
||||
- THE HEAD PART -
|
||||
######################################
|
||||
-->
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
|
||||
<title>SLIDER REVOLUTION - The Responsive Slider Plugin</title>
|
||||
|
||||
<!-- get jQuery from the google apis -->
|
||||
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
|
||||
|
||||
<!-- CSS STYLE-->
|
||||
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
|
||||
|
||||
<!-- THE PREVIEW STYLE SHEETS, NO NEED TO LOAD IN YOUR DOM -->
|
||||
<link rel="stylesheet" type="text/css" href="css/navstylechange.css" media="screen" />
|
||||
<link rel="stylesheet" type="text/css" href="css/noneed.css" media="screen" />
|
||||
|
||||
|
||||
<!-- SLIDER REVOLUTION 4.x SCRIPTS -->
|
||||
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
|
||||
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
|
||||
|
||||
<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
|
||||
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
|
||||
|
||||
<!-- GOOGLE FONTS -->
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
#######################################
|
||||
- THE BODY PART -
|
||||
######################################
|
||||
-->
|
||||
<body>
|
||||
|
||||
<article class="prevnext">
|
||||
<a class="" href="01.Sample-Boxed.html">01</a>
|
||||
<a class="" href="02.Sample-Fullwidth.html">02</a>
|
||||
<a class="" href="03.Sample-FullScreen.html">03</a>
|
||||
<a class="" href="04.Sample-FullScreen-Offsets.html">04</a>
|
||||
<a class="active" href="05.Sample-Aligns.html">05</a>
|
||||
<a class="" href="06.Sample-AlignForce.html">06</a>
|
||||
<a class="" href="07.Sample-Videos.html">07</a>
|
||||
<a class="" href="08.Sample-NavigationStyle.html">08</a>
|
||||
<a class="" href="09.Sample-Api.html">09</a>
|
||||
<a class="" href="10.B.Sample-LazyLoading Level2.html">10</a>
|
||||
<a class="" href="11.Sample-Shuffle.html">11</a>
|
||||
<a class="" href="12.Sample-Backgrounds.html">12</a>
|
||||
<a class="" href="13.Sample-HideCaptions.html">13</a>
|
||||
<a class="" href="14.Sample-KenBurns.html">14</a>
|
||||
<a class="" href="15.Sample-VideoBG.html">15</a>
|
||||
<a class="" href="16.Caption-ShowDown.html">16</a>
|
||||
<a class="" href="17.Sample-DottedBG.html">17</a>
|
||||
<a class="" href="18.Sample-NewCaptionEffects.html">18</a>
|
||||
</article>
|
||||
|
||||
<!-- HEADER -->
|
||||
<header>
|
||||
<section class="container">
|
||||
<article class="logo-container"><a href="http://themes.themepunch.com/?theme=revolution_jq"><div class="logo"></div></a></article>
|
||||
<div class="button-holder"><a href="http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848" target="_blank" class="button"><strong>BUY NOW</strong></a></div>
|
||||
<div style="clear:both"></div>
|
||||
</section>
|
||||
</header> <!-- END OF HEADER -->
|
||||
|
||||
|
||||
<article class="boxedcontainer">
|
||||
|
||||
<!--
|
||||
#################################
|
||||
- THEMEPUNCH BANNER -
|
||||
#################################
|
||||
-->
|
||||
<!-- START REVOLUTION SLIDER 3.1 rev5 fullwidth mode -->
|
||||
|
||||
<div class="tp-banner-container">
|
||||
<div class="tp-banner" >
|
||||
<ul>
|
||||
<!-- SLIDE -->
|
||||
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
|
||||
<!-- MAIN IMAGE -->
|
||||
<img src="images/bg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
|
||||
|
||||
|
||||
<!-- LAYER NR. 1 -->
|
||||
<div class="tp-caption medium_bg_asbestos fade"
|
||||
data-x="0"
|
||||
data-y="0"
|
||||
data-speed="500"
|
||||
data-start="800"
|
||||
data-easing="Power4.easeOut"
|
||||
data-endspeed="300"
|
||||
data-endeasing="Power1.easeIn"
|
||||
data-captionhidden="off"
|
||||
style="z-index: 6">Left Top
|
||||
</div>
|
||||
|
||||
<!-- LAYER NR. 2 -->
|
||||
<div class="tp-caption medium_bg_asbestos sfl"
|
||||
data-x="center"
|
||||
data-y="0"
|
||||
data-speed="500"
|
||||
data-start="1200"
|
||||
data-easing="Power4.easeOut"
|
||||
data-endspeed="300"
|
||||
data-endeasing="Power1.easeIn"
|
||||
data-captionhidden="off"
|
||||
style="z-index: 6">Center Top
|
||||
</div>
|
||||
|
||||
<!-- LAYER NR. 3 -->
|
||||
<div class="tp-caption medium_bg_asbestos skewfromleft"
|
||||
data-x="right"
|
||||
data-y="0"
|
||||
data-speed="800"
|
||||
data-start="1900"
|
||||
data-easing="Power4.easeOut"
|
||||
data-endspeed="300"
|
||||
data-endeasing="Power1.easeIn"
|
||||
data-captionhidden="off"
|
||||
style="z-index: 6">Right Top
|
||||
</div>
|
||||
|
||||
<!-- LAYER NR. 4 -->
|
||||
<div class="tp-caption medium_bg_asbestos sft"
|
||||
data-x="0"
|
||||
data-y="center"
|
||||
data-speed="800"
|
||||
data-start="2600"
|
||||
data-easing="Power4.easeOut"
|
||||
data-endspeed="300"
|
||||
data-endeasing="Power1.easeIn"
|
||||
data-captionhidden="off"
|
||||
style="z-index: 6">Left Center
|
||||
</div>
|
||||
|
||||
<!-- LAYER NR. 5 -->
|
||||
<div class="tp-caption medium_bg_asbestos lft"
|
||||
data-x="center"
|
||||
|
||||
data-y="center"
|
||||
data-speed="800"
|
||||
data-start="3300"
|
||||
data-easing="Power4.easeOut"
|
||||
data-endspeed="300"
|
||||
data-endeasing="Power1.easeIn"
|
||||
data-captionhidden="off"
|
||||
style="z-index: 6">Center Center
|
||||
</div>
|
||||
|
||||
<!-- LAYER NR. 6 -->
|
||||
<div class="tp-caption medium_bg_asbestos sfr"
|
||||
data-x="right"
|
||||
data-hoffset="0"
|
||||
data-y="center"
|
||||
data-speed="800"
|
||||
data-start="4000"
|
||||
data-easing="Power4.easeOut"
|
||||
data-endspeed="300"
|
||||
data-endeasing="Power1.easeIn"
|
||||
data-captionhidden="off"
|
||||
style="z-index: 6">Right Center
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- LAYER NR. 7 -->
|
||||
<div class="tp-caption medium_bg_asbestos skewfromright"
|
||||
data-x="0"
|
||||
data-hoffset="0"
|
||||
data-y="bottom"
|
||||
data-speed="800"
|
||||
data-start="4700"
|
||||
data-easing="Power4.easeOut"
|
||||
data-endspeed="300"
|
||||
data-endeasing="Power1.easeIn"
|
||||
data-captionhidden="off"
|
||||
style="z-index: 6">Left Bottom
|
||||
</div>
|
||||
|
||||
|
||||
<!-- LAYER NR. 8 -->
|
||||
<div class="tp-caption medium_bg_asbestos sfb"
|
||||
data-x="center"
|
||||
data-hoffset="0"
|
||||
data-y="bottom"
|
||||
data-speed="800"
|
||||
data-start="5400"
|
||||
data-easing="Power4.easeOut"
|
||||
data-endspeed="300"
|
||||
data-endeasing="Power1.easeIn"
|
||||
data-captionhidden="off"
|
||||
style="z-index: 6">Center Bottom
|
||||
</div>
|
||||
|
||||
<!-- LAYER NR. 9 -->
|
||||
<div class="tp-caption medium_bg_asbestos lfb"
|
||||
data-x="right"
|
||||
data-hoffset="0"
|
||||
data-y="bottom"
|
||||
data-speed="800"
|
||||
data-start="6100"
|
||||
data-easing="Power4.easeOut"
|
||||
data-endspeed="300"
|
||||
data-endeasing="Power1.easeIn"
|
||||
data-captionhidden="off"
|
||||
style="z-index: 6">Right Bottom
|
||||
</div>
|
||||
|
||||
</li>
|
||||
|
||||
<!-- SLIDE -->
|
||||
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
|
||||
<!-- MAIN IMAGE -->
|
||||
<img src="images/bg2.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
|
||||
<!-- LAYERS -->
|
||||
<!-- LAYER 0 -->
|
||||
<!-- LAYER NR. 1 -->
|
||||
<div class="tp-caption medium_bg_asbestos fade"
|
||||
data-x="50"
|
||||
data-y="100"
|
||||
data-speed="500"
|
||||
data-start="800"
|
||||
data-easing="Power4.easeOut"
|
||||
data-endspeed="300"
|
||||
data-endeasing="Power1.easeIn"
|
||||
data-captionhidden="off"
|
||||
style="z-index: 6">Left Top (x+50, y+100)
|
||||
</div>
|
||||
|
||||
<!-- LAYER NR. 2 -->
|
||||
<div class="tp-caption medium_bg_asbestos sfl"
|
||||
data-x="center"
|
||||
data-y="40"
|
||||
data-hoffset="-50"
|
||||
data-speed="500"
|
||||
data-start="1200"
|
||||
data-easing="Power4.easeOut"
|
||||
data-endspeed="300"
|
||||
data-endeasing="Power1.easeIn"
|
||||
data-captionhidden="off"
|
||||
style="z-index: 6">Center Top (x-50, y+40)
|
||||
|
||||
</div>
|
||||
|
||||
<!-- LAYER NR. 3 -->
|
||||
<div class="tp-caption medium_bg_asbestos skewfromleft"
|
||||
data-x="right"
|
||||
data-y="20"
|
||||
data-hoffset="-90"
|
||||
|
||||
data-speed="800"
|
||||
data-start="1900"
|
||||
data-easing="Power4.easeOut"
|
||||
data-endspeed="300"
|
||||
data-endeasing="Power1.easeIn"
|
||||
data-captionhidden="off"
|
||||
style="z-index: 6">Right Top (x-90, y+20)
|
||||
</div>
|
||||
|
||||
<!-- LAYER NR. 4 -->
|
||||
<div class="tp-caption medium_bg_asbestos sft"
|
||||
data-x="30"
|
||||
data-y="center"
|
||||
data-voffset="-20"
|
||||
data-speed="800"
|
||||
data-start="2600"
|
||||
data-easing="Power4.easeOut"
|
||||
data-endspeed="300"
|
||||
data-endeasing="Power1.easeIn"
|
||||
data-captionhidden="off"
|
||||
style="z-index: 6">Left Center (x+30, y-20)
|
||||
</div>
|
||||
|
||||
<!-- LAYER NR. 5 -->
|
||||
<div class="tp-caption medium_bg_asbestos lft"
|
||||
data-x="center"
|
||||
data-y="center"
|
||||
data-hoffset="-30"
|
||||
data-voffset="20"
|
||||
data-speed="800"
|
||||
data-start="3300"
|
||||
data-easing="Power4.easeOut"
|
||||
data-endspeed="300"
|
||||
data-endeasing="Power1.easeIn"
|
||||
data-captionhidden="off"
|
||||
style="z-index: 6">Center Center (x-30,y+20)
|
||||
</div>
|
||||
|
||||
<!-- LAYER NR. 6 -->
|
||||
<div class="tp-caption medium_bg_asbestos sfr"
|
||||
data-x="right"
|
||||
data-y="center"
|
||||
data-hoffset="-50"
|
||||
data-voffset="-40"
|
||||
data-speed="800"
|
||||
data-start="4000"
|
||||
data-easing="Power4.easeOut"
|
||||
data-endspeed="300"
|
||||
data-endeasing="Power1.easeIn"
|
||||
data-captionhidden="off"
|
||||
style="z-index: 6">Right Center (x-50, y-40)
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- LAYER NR. 7 -->
|
||||
<div class="tp-caption medium_bg_asbestos skewfromright"
|
||||
data-x="15"
|
||||
data-y="bottom"
|
||||
data-voffset="-20"
|
||||
data-speed="800"
|
||||
data-start="4700"
|
||||
data-easing="Power4.easeOut"
|
||||
data-endspeed="300"
|
||||
data-endeasing="Power1.easeIn"
|
||||
data-captionhidden="off"
|
||||
style="z-index: 6">Left Bottom (x+15,y-20)
|
||||
</div>
|
||||
|
||||
|
||||
<!-- LAYER NR. 8 -->
|
||||
<div class="tp-caption medium_bg_asbestos sfb"
|
||||
data-x="center"
|
||||
data-hoffset="0"
|
||||
data-voffset="-10"
|
||||
data-y="bottom"
|
||||
data-speed="800"
|
||||
data-start="5400"
|
||||
data-easing="Power4.easeOut"
|
||||
data-endspeed="300"
|
||||
data-endeasing="Power1.easeIn"
|
||||
data-captionhidden="off"
|
||||
style="z-index: 6">Center Bottom (y-10)
|
||||
</div>
|
||||
|
||||
<!-- LAYER NR. 9 -->
|
||||
<div class="tp-caption medium_bg_asbestos lfb"
|
||||
data-x="right"
|
||||
data-y="bottom"
|
||||
data-hoffset="-30"
|
||||
data-voffset="-30"
|
||||
data-speed="800"
|
||||
data-start="6100"
|
||||
data-easing="Power4.easeOut"
|
||||
data-endspeed="300"
|
||||
data-endeasing="Power1.easeIn"
|
||||
data-captionhidden="off"
|
||||
style="z-index: 6">Right Bottom (x-30, y-30)
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- SLIDE -->
|
||||
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
|
||||
<!-- MAIN IMAGE -->
|
||||
<img src="images/bg3.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
|
||||
<!-- LAYERS -->
|
||||
<!-- LAYERS -->
|
||||
<div class="tp-caption mediumlarge_light_white_center customin customout start"
|
||||
data-x="right"
|
||||
data-hoffset="-60"
|
||||
data-y="bottom"
|
||||
data-voffset="-120"
|
||||
|
||||
data-customin="x:0;y:0;z:0;rotationX:90;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
|
||||
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
||||
data-speed="1000"
|
||||
data-start="500"
|
||||
data-easing="Back.easeInOut"
|
||||
data-endspeed="300">TRY THE<br>CAPTION ANIMATION<br> BUILDER BELOW
|
||||
</div>
|
||||
<!-- LAYER NR. 5 -->
|
||||
<div class="tp-caption medium_bg_asbestos skewfromleft customout"
|
||||
data-x="104"
|
||||
data-y="154"
|
||||
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
||||
data-speed="800"
|
||||
data-start="800"
|
||||
data-easing="Power4.easeOut"
|
||||
data-endspeed="300"
|
||||
data-endeasing="Power1.easeIn"
|
||||
data-captionhidden="on"
|
||||
style="z-index: 6">GO AND GIVE A TRY
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- SLIDE -->
|
||||
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
|
||||
<!-- MAIN IMAGE -->
|
||||
<img src="images/bg4.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
|
||||
<!-- LAYERS -->
|
||||
<!-- LAYER NR. 5 -->
|
||||
<div class="tp-caption medium_bg_asbestos skewfromleft customout"
|
||||
data-x="104"
|
||||
data-y="154"
|
||||
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
||||
data-speed="800"
|
||||
data-start="800"
|
||||
data-easing="Power4.easeOut"
|
||||
data-endspeed="300"
|
||||
data-endeasing="Power1.easeIn"
|
||||
data-captionhidden="on"
|
||||
style="z-index: 6">CREATE AWESOME ANIMATIONS
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
<div class="tp-bannertimer"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- THE SCRIPT INITIALISATION -->
|
||||
<!-- LOOK THE DOCUMENTATION FOR MORE INFORMATIONS -->
|
||||
<script type="text/javascript">
|
||||
|
||||
var revapi;
|
||||
|
||||
jQuery(document).ready(function() {
|
||||
|
||||
revapi = jQuery('.tp-banner').revolution(
|
||||
{
|
||||
delay:9000,
|
||||
startwidth:1170,
|
||||
startheight:500,
|
||||
hideThumbs:10
|
||||
|
||||
});
|
||||
|
||||
}); //ready
|
||||
|
||||
</script>
|
||||
|
||||
<!-- END REVOLUTION SLIDER -->
|
||||
|
||||
|
||||
</article><!-- Content End -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- HERE COMES ONLY THE DEMO INFORMATION, NO NEED TO CARE ABOUT IT -->
|
||||
|
||||
<section class="container">
|
||||
<h2>How to Align Captions ?</h2>
|
||||
<p>Each Caption is positioned via Absolute Position relative to the left/top corner of the Grid. The Grid is the Caption holder. It can but must not be the same size as the Slider itself. Since fullwidth and fullscreen slider can have a higher width or height dimension then the caption Grid itself. Still you can help yourself and position the captions on the center or bottom / right positions in the Grid. For this take a look on the following Settings in the Captions</p>
|
||||
<p>In case you wish to force the Aligns go to the real corners of the Slide and break the Grid size, you can do this via some special options. See example: <a href="04B.Sample-AlignForce.html">04B.Sample-AlignForce.html</a></p>
|
||||
<div style="width:100%;height:20px"></div>
|
||||
<h3>Caption at Center Center</h3>
|
||||
<pre>
|
||||
<div class="tp-caption medium_bg_asbestos lft"
|
||||
<strong>data-x="center"
|
||||
data-y="center"
|
||||
data-hoffset="0"
|
||||
data-voffset="0"</strong>
|
||||
data-speed="800"
|
||||
data-start="3300"
|
||||
data-easing="Power4.easeOut"
|
||||
data-endspeed="300"
|
||||
data-endeasing="Power1.easeIn"
|
||||
data-captionhidden="off"
|
||||
style="z-index: 6">Center Center
|
||||
</div>
|
||||
</pre>
|
||||
<div style="width:100%;height:20px"></div>
|
||||
<p>To move vertical or horizontal the caption from that aligned position, you can use the hoffset and voffset settings</p>
|
||||
<div style="width:100%;height:20px"></div>
|
||||
<h3>Center Center with -30px in the horizontal and +20px in the vertical direction</h3>
|
||||
<pre>
|
||||
<div class="tp-caption medium_bg_asbestos lft"
|
||||
<strong>data-x="center"
|
||||
data-y="center"
|
||||
data-hoffset="-30"
|
||||
data-voffset="20"</strong>
|
||||
data-speed="800"
|
||||
data-start="3300"
|
||||
data-easing="Power4.easeOut"
|
||||
data-endspeed="300"
|
||||
data-endeasing="Power1.easeIn"
|
||||
data-captionhidden="off"
|
||||
style="z-index: 6">Center Center
|
||||
</div>
|
||||
</pre>
|
||||
<div style="width:100%;height:20px"></div>
|
||||
<p>In case you set the data-x and data-y with a value (not like center, right or vertical top, center, bottom) the captions will be aligned to the left top corner.</p>
|
||||
<div style="width:100%;height:20px"></div>
|
||||
<h3>Left Top (default) Align, and simple positions</h3>
|
||||
<pre>
|
||||
<div class="tp-caption medium_bg_asbestos lft"
|
||||
<strong>data-x="250"
|
||||
data-y="180"</strong>
|
||||
data-speed="800"
|
||||
data-start="3300"
|
||||
data-easing="Power4.easeOut"
|
||||
data-endspeed="300"
|
||||
data-endeasing="Power1.easeIn"
|
||||
data-captionhidden="off"
|
||||
style="z-index: 6">Center Center
|
||||
</div>
|
||||
</pre>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
Reference in New Issue
Block a user