mirror of
https://gitee.com/coder-xiaomo/flashsale
synced 2025-09-12 23:11:38 +08:00
添加Metronic（作为LFS）
This commit is contained in:
@@ -0,0 +1,487 @@
|
||||
<!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="" href="05.Sample-Aligns.html">05</a>
|
||||
<a class="active" 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>
|
||||
|
||||
|
||||
|
||||
|
||||
<article class="">
|
||||
|
||||
<!--
|
||||
#################################
|
||||
- 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,
|
||||
fullScreen:"on",
|
||||
fullScreenAlignForce:"on"
|
||||
});
|
||||
|
||||
}); //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 Force the Captions Aligns in FullScreen?</h2>
|
||||
<p>In Default mode the captions are aligned within the Grid. The Gird is always vertical and horizontal aligned when the slider container is bigger then the Grid startwidth and startheight size. Since some Fullscreen Demo needs the very far corners, we added this forceAlign option. For this simple initialise the slider with the following options:</p>
|
||||
<pre>
|
||||
<script type="text/javascript">
|
||||
|
||||
var revapi;
|
||||
|
||||
jQuery(document).ready(function() {
|
||||
|
||||
revapi = jQuery('.tp-banner').revolution(
|
||||
{
|
||||
delay:9000,
|
||||
startwidth:1170,
|
||||
startheight:500,
|
||||
hideThumbs:10,
|
||||
fullScreen:"on",
|
||||
<strong>fullScreenAlignForce:"on"</strong>
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</pre>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
Reference in New Issue
Block a user