mirror of
https://gitee.com/coder-xiaomo/flashsale
synced 2025-09-12 15:01:39 +08:00
346 lines
13 KiB
HTML
346 lines
13 KiB
HTML
<!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="" 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="active" 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 -
|
|
#################################
|
|
-->
|
|
<div class="tp-banner-container">
|
|
<div class="tp-banner" >
|
|
<ul> <!-- SLIDE -->
|
|
<li data-transition="fadetobottomfadefromtop" data-slotamount="7" data-masterspeed="1500" >
|
|
<!-- MAIN IMAGE -->
|
|
<img src="images/transparent.png" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
|
|
<!-- LAYERS -->
|
|
|
|
<!-- LAYER NR. 1 -->
|
|
<div class="tp-caption medium_bg_orange skewfromleftshort customout"
|
|
data-x="right" data-hoffset="-90"
|
|
data-y="bottom" data-voffset="-50"
|
|
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="500"
|
|
data-start="500"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="500"
|
|
data-endeasing="Power4.easeIn"
|
|
data-captionhidden="on"
|
|
style="z-index: 21">Transparent Background
|
|
</div>
|
|
</li>
|
|
|
|
<li data-transition="fadetobottomfadefromtop" data-slotamount="7" data-masterspeed="1500" >
|
|
<!-- MAIN IMAGE -->
|
|
<img src="images/transparent.png" style="background-color:#34495e" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
|
|
<!-- LAYERS -->
|
|
|
|
<!-- LAYER NR. 1 -->
|
|
<div class="tp-caption medium_bg_orange skewfromleftshort customout"
|
|
data-x="right" data-hoffset="-90"
|
|
data-y="bottom" data-voffset="-50"
|
|
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="500"
|
|
data-start="500"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="500"
|
|
data-endeasing="Power4.easeIn"
|
|
data-captionhidden="on"
|
|
style="z-index: 21">Colored Background
|
|
</div>
|
|
</li>
|
|
|
|
<li data-transition="fadetobottomfadefromtop" data-slotamount="7" data-masterspeed="1500" >
|
|
<!-- MAIN IMAGE -->
|
|
<img src="images/huge.jpg" style="background-color:#34495e" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
|
|
<!-- LAYERS -->
|
|
|
|
<!-- LAYER NR. 1 -->
|
|
<div class="tp-caption medium_bg_orange skewfromleftshort customout"
|
|
data-x="right" data-hoffset="-90"
|
|
data-y="bottom" data-voffset="-50"
|
|
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="500"
|
|
data-start="500"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="500"
|
|
data-endeasing="Power4.easeIn"
|
|
data-captionhidden="on"
|
|
style="z-index: 21">Covering Left Top Aligned Image
|
|
</div>
|
|
</li>
|
|
|
|
<li data-transition="fadetobottomfadefromtop" data-slotamount="7" data-masterspeed="1500" >
|
|
<!-- MAIN IMAGE -->
|
|
<img src="images/huge.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
|
|
<!-- LAYERS -->
|
|
|
|
<!-- LAYER NR. 1 -->
|
|
<div class="tp-caption medium_bg_orange skewfromleftshort customout"
|
|
data-x="right" data-hoffset="-90"
|
|
data-y="bottom" data-voffset="-50"
|
|
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="500"
|
|
data-start="500"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="500"
|
|
data-endeasing="Power4.easeIn"
|
|
data-captionhidden="on"
|
|
style="z-index: 21">Covering Center Center Aligned Image
|
|
</div>
|
|
</li>
|
|
|
|
<li data-transition="fadetobottomfadefromtop" data-slotamount="7" data-masterspeed="1500" >
|
|
<!-- MAIN IMAGE -->
|
|
<img src="images/huge.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="right bottom" data-bgrepeat="no-repeat">
|
|
<!-- LAYERS -->
|
|
|
|
<!-- LAYER NR. 1 -->
|
|
<div class="tp-caption medium_bg_orange skewfromleftshort customout"
|
|
data-x="right" data-hoffset="-90"
|
|
data-y="bottom" data-voffset="-50"
|
|
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="500"
|
|
data-start="500"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="500"
|
|
data-endeasing="Power4.easeIn"
|
|
data-captionhidden="on"
|
|
style="z-index: 21">Covering Right Bottom Aligned Image
|
|
</div>
|
|
</li>
|
|
|
|
<li data-transition="fadetobottomfadefromtop" data-slotamount="7" data-masterspeed="1500" >
|
|
<!-- MAIN IMAGE -->
|
|
<img src="images/huge.jpg" alt="slidebg1" data-bgfit="contain" data-bgposition="center center" data-bgrepeat="no-repeat">
|
|
<!-- LAYERS -->
|
|
|
|
<!-- LAYER NR. 1 -->
|
|
<div class="tp-caption medium_bg_orange skewfromleftshort customout"
|
|
data-x="right" data-hoffset="-90"
|
|
data-y="bottom" data-voffset="-50"
|
|
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="500"
|
|
data-start="500"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="500"
|
|
data-endeasing="Power4.easeIn"
|
|
data-captionhidden="on"
|
|
style="z-index: 21">Containing Center Center Aligned Image
|
|
</div>
|
|
</li>
|
|
|
|
|
|
<li data-transition="fadetobottomfadefromtop" data-slotamount="7" data-masterspeed="1500" >
|
|
<!-- MAIN IMAGE -->
|
|
<img src="images/huge.jpg" alt="slidebg1" data-bgfit="contain" data-bgposition="right bottom" data-bgrepeat="no-repeat">
|
|
<!-- LAYERS -->
|
|
|
|
<!-- LAYER NR. 1 -->
|
|
<div class="tp-caption medium_bg_orange skewfromleftshort customout"
|
|
data-x="right" data-hoffset="-90"
|
|
data-y="bottom" data-voffset="-50"
|
|
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="500"
|
|
data-start="500"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="500"
|
|
data-endeasing="Power4.easeIn"
|
|
data-captionhidden="on"
|
|
style="z-index: 21">Containing Right Bottom Aligned Image
|
|
</div>
|
|
</li>
|
|
|
|
<li data-transition="fadetobottomfadefromtop" data-slotamount="7" data-masterspeed="1500" >
|
|
<!-- MAIN IMAGE -->
|
|
<img src="images/apple.png" alt="slidebg1" data-bgfit="normal" data-bgposition="center center" data-bgrepeat="repeat">
|
|
<!-- LAYERS -->
|
|
|
|
<!-- LAYER NR. 1 -->
|
|
<div class="tp-caption medium_bg_orange skewfromleftshort customout"
|
|
data-x="right" data-hoffset="-90"
|
|
data-y="bottom" data-voffset="-50"
|
|
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="500"
|
|
data-start="500"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="500"
|
|
data-endeasing="Power4.easeIn"
|
|
data-captionhidden="on"
|
|
style="z-index: 21">Repeating Background
|
|
</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(
|
|
{
|
|
dottedOverlay:"twoxtwo",
|
|
delay:9000,
|
|
startwidth:1170,
|
|
startheight:400,
|
|
hideThumbs:10,
|
|
lazyLoad:"on",
|
|
forceFullWidth:"on",
|
|
fullWidth:"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>Different Backgrounds</h2>
|
|
<p>You can set the Main Background transparent, Colored, or via an image source. Change the Image aligns, cover/contain/normal fillings and Repeating via the data options</p>
|
|
<div style="width:100%; height:20px"></div>
|
|
<h3>Transparent Background</h3>
|
|
<pre>
|
|
<li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >
|
|
<!-- MAIN IMAGE -->
|
|
<img <strong>src="images/transparent.png"</strong> alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
|
|
...
|
|
</pre>
|
|
<div style="width:100%; height:20px"></div>
|
|
<h3>Colored Background</h3>
|
|
<pre>
|
|
<li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >
|
|
<!-- MAIN IMAGE -->
|
|
<img <strong>src="images/transparent.png" style="background-color:#ff0000"</strong> alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
|
|
...
|
|
</pre>
|
|
<div style="width:100%; height:20px"></div>
|
|
<h3>Aligned Covering Background</h3>
|
|
<pre>
|
|
<li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >
|
|
<!-- MAIN IMAGE -->
|
|
<img <strong>src="images/someimage.png"</strong> alt="slidebg1" <strong>data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat"</strong>>
|
|
...
|
|
</pre>
|
|
<div style="width:100%; height:20px"></div>
|
|
<h3>Aligned Containing Background</h3>
|
|
<pre>
|
|
<li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >
|
|
<!-- MAIN IMAGE -->
|
|
<img <strong>src="images/someimage.png"</strong> alt="slidebg1" <strong>data-bgfit="contain" data-bgposition="center center" data-bgrepeat="no-repeat"</strong>>
|
|
...
|
|
</pre>
|
|
<div style="width:100%; height:20px"></div>
|
|
<h3>Repeated Background</h3>
|
|
<pre>
|
|
<li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >
|
|
<!-- MAIN IMAGE -->
|
|
<img <strong>src="images/tiledimage.png"</strong> alt="slidebg1" <strong>data-bgfit="normal" data-bgposition="top left" data-bgrepeat="repeat"</strong>>
|
|
...
|
|
</pre>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body> |