以下是 before-after焦点图插件轮播滚动切换特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为before-after焦点图插件，属于站长常用代码" />
<title>before-after焦点图插件</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<script type="text/javascript" src="js/freshline/jquery.freshline.beforeafter.js"> </script>
<script type="text/javascript" src="js/freshline/animadrag.js"> </script>
<link rel="stylesheet" type="text/css" href="css/beforeafter-settings.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/beforeafter-content.css" media="screen" />
<link href='css/css.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/freshline/jquery.freshline.demo.js"> </script>
</head>
<body><br /><br />
<!-- 代码 开始 -->
<div id="example" class="beforeafter_slider shadow1">
<div id="bannerlogo"><a href="#"><img src="images/nr1.png" /></a></div>
<ul>
<li><img src="images/beforeafter/1before.jpg" alt="images/beforeafter/1after.jpg" />
<div id="textbox_1" class="before">
<div id="title_1b" class="fadeup">BEFORE</div>
</div>
<div id="textbox_1" class="after">
<div id="title_1b" class="fadeup">AFTER</div>
</div>
<div id="textbox_1">
<div id="logo" class="faderight"><img src="images/yourlogo.png" alt="" /></div>
<div id="title" class="fadeup">My Sweet Girl</div>
<div id="description" class="fadeup">Description ipsum dolor sit amet, pericul sapen ius.</div>
</div>
</li>
<li><img src="images/beforeafter/2before.jpg" alt="images/beforeafter/2after.jpg" />
<div id="textbox_2">
<div id="logo_2" class="faderight"><img src="images/logo_india.png" alt=""></div>
<div id="description_2" class="fadeup"><i>Duo numquam assentior et.</i></div>
</div>
</li>
<li><img src="images/beforeafter/3before.jpg" alt="images/beforeafter/3after.jpg">
<div id="textbox_3">
<div id="title_3" class="fadeup"><u>My Storyboard</u><br>
<i>Scene 1</i></div>
</div>
</li>
<li><img src="images/beforeafter/4before.jpg" alt="images/beforeafter/4after.jpg" />
<div id="textbox_4">
<div id="logo_4" class="faderight"><img src="images/dr_logo.png" alt="" /></div>
<div id="description_4" class="fadeup"><a href="#" target="_new">www.hollywoodplastic.dr</a></div>
</div>
</li>
<li ><img src="images/beforeafter/5before.jpg" alt="images/beforeafter/5after.jpg" />
<div id="textbox_5">
<div id="title_5" class="fadeup"><i>Anytime anywhere </i></div>
</div>
</li>
<li ><img src="images/beforeafter/6before.jpg" alt="images/beforeafter/6after.jpg" />
<div id="textbox_6">
<div id="logo_6" class="faderight"><img src="images/wine.png" alt="" /></div>
<div id="title_6" class="fadeup">Feel the Difference!</div>
<div id="description_6" class="fadeup">Description ipsum dolor sit amet, <br>
pericula sapentim ei ius.</div>
</div>
</li>
<li ><img src="images/beforeafter/7before.jpg" alt="images/beforeafter/7after.jpg" />
<div id="textbox_7">
<div id="logo_7b" class="faderight"><img src="images/anim/flower_1_white_bg_30fps.gif" alt="" /></div>
<div id="logo_7" class="faderight"><img src="images/tatoologo.png" alt="" /></div>
<div id="description_7" class="fadeup">Pericula sapentim ei ius.<br>
<a href="#" target="_new">www.tatoo.fr</a></div>
</div>
</li>
<li ><img src="images/beforeafter/8before.jpg" alt="images/beforeafter/8after.jpg" />
<div id="textbox_8">
<div id="logo_8" class="faderight"><img src="images/yourlogo.png" alt="" /></div>
<div id="title_8" class="fadeup">Tomato Paste Italy Manufacturers</div>
<div id="description_8" class="fadeup">Description ipsum dolor sit amet, pericula sapentim ei ius. Pupolo patrioque elaboraret usu et.<br>
Duo numquam assentior et.</div>
</div>
</li>
<li ><img src="images/beforeafter/9translate_details.jpg" alt="images/beforeafter/9translate_details.jpg">
<div id="textbox_9" class="before">
<div id="logo_9" class="faderight"><img src="images/yourlogo.png" alt="" /></div>
<div id="title_9" class="fadeup">Kriki Choco Item (ENG)</div>
<div id="description_9" class="fadeup">Details ipsum dolor sit amet, pericula sapentim ei ius. <br>
Pupolo patrioque elaboraret usu et. Duo numquam assentior et.</div>
</div>
<div id="textbox_9" class="after">
<div id="logo_9" class="faderight"><img src="images/yourlogo.png" alt="" /></div>
<div id="title_9" class="fadeup">Kriki Choco Item (GER)</div>
<div id="description_9" class="fadeup">You can define Texts on the first level, second level, or on both.</div>
</div>
</li>
<li ><img src="images/beforeafter/10before.jpg" alt="images/beforeafter/10after.jpg" />
<div id="textbox_10">
<div id="title_10" class="fadeup">What is your</div>
<div id="description_10" class="fadeup">I.D.E.A.?</div>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
$(function() {
$.noConflict();
jQuery('#demo-content').freshlineDemo_init();
jQuery('#example').beforeAfter_slider(
{
width:876,
height:300,
banner_bordersize:12,
start_from:'right',
start_pos:230,
follow:true,
timer:4000
}
)
});
</script>
<!--
##############################
HTML DEMO PAGE HERE
##############################
-->
<div id="big_divider"></div>
<div id="demo-content">
<div id="grey_head"></div>
<div class="smallinfo">See how to create individual banners</div>
<div style="clear:both"></div>
<div id="panel">
<div class="smalldeclaration">Background:</div>
<div style="clear:both"></div>
<ul id="bgselector">
<li class="bg1"></li>
<li class="bg2"></li>
<li class="bg3"></li>
<li class="bg4"></li>
<li class="bg5"></li>
<li class="bg6"></li>
</ul>
<div class="smalldeclaration">Border:</div>
<div style="clear:both"></div>
<ul id="borderselector">
<li class="border1"></li>
<li class="border2"></li>
<li class="border3"></li>
<li class="border4"></li>
<li class="border5"></li>
<li class="border6"></li>
</ul>
<div style="clear:both"></div>
<div class="borderstyleselector">
<div id="rounded" class="rounded">Round</div>
<div class="seperator"> | </div>
<div id="square" class="square">Square</div>
<div id="photo" class="photo">Photo</div>
<div class="seperator"> | </div>
<div id="normal" class="normal">Normal</div>
</div>
<div style="clear:both"></div>
<div class="shadowselector">
<div id="shadow1">Shadow 1</div>
<div class="seperator"> | </div>
<div id="shadow2">Shadow 2</div>
<div class="seperator"> | </div>
<div id="shadow3">Shadow 3</div>
</div>
</div>
<div id="demo-settings">Demo Settings</div>
<div id="demo-toolbox">
<div class="button">1. Example</div>
<div id="divider"></div>
<div class="button" onclick="self.location.href='index2.html'">2. Example</div>
</div>
<div class="float_title">SOURCE CODE</div>
<div id="sourcecode-headline">HTML</div>
<div id="sourcecode">
<xmp>
<li> <img src="images/beforeafter/7before.jpg" alt="images/beforeafter/7after.jpg" />
<div id="textbox_7">
<div id="logo_7b" class="faderight"> <img src="images/anim/flower_1_white_bg_30fps.gif" alt="" /> </div>
<div id="logo_7" class="faderight"> <img src="images/tatoologo.png" alt="" /> </div>
<div id="description_7" class="fadeup"> Pericula sapentim ei ius.<br>
<a href="http://wwww.codecanyon.net/user/freshline" target="_new">www.tatoo.fr</a> </div>
</div>
</li>
</xmp>
</div>
<div class="gray-background"></div>
<hr />
<div id="infobox">
<div id="left_info">Preperation time: 5 min.</div>
<div id="right_info">Clean Documentation</div>
</div>
</div>
</body>
</html>HTML代码(index2.html):
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Before-After</title>
<link rel="icon" type="image/png" href="images/sitelogo.png" />
<!-- commented, remove this line to use IE & iOS favicons -->
<link rel="shortcut icon" href="images/favicon.ico" />
<!-- get jQuery from the google apis -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<!-- CSS STYLE -->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<!-- jQuery beforeAfter & CLASSes for Banner -->
<script type="text/javascript" src="js/freshline/jquery.freshline.beforeafter.js"> </script>
<script type="text/javascript" src="js/freshline/animadrag.js"> </script>
<link rel="stylesheet" type="text/css" href="css/beforeafter-settings.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/beforeafter-content.css" media="screen" />
<!-- FONT IMPORT -->
<link href='css/css.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/freshline/jquery.freshline.demo.js"> </script>
</head>
<body style="background-image:url(images/background/pattern/royal_line/royal_greyline.jpg)">
<div class="titlelogo"></div>
<!-- THE DEMOS -->
<div style="width:960px;height:400px;margin-left:auto;margin-right:auto;overflow:visible">
<!--
####################################
- BEFORE AFTER SLIDER DEMO 2-
####################################
-->
<div id="example2" class="beforeafter_slider_2 shadow3" style="float:left;margin-left:30px;margin-right:10px;">
<ul>
<li><img src="images/beforeafter_2/1before.jpg" alt="images/beforeafter_2/1after.jpg" /> </li>
<li><img src="images/beforeafter_2/2before.jpg" alt="images/beforeafter_2/2after.jpg" /> </li>
<li><img src="images/beforeafter_2/3before.jpg" alt="images/beforeafter_2/3after.jpg" /> </li>
<li><img src="images/beforeafter_2/4before.jpg" alt="images/beforeafter_2/4after.jpg" /> </li>
</ul>
</div>
<!--
####################################
- BEFORE AFTER SLIDER DEMO 3-
####################################
-->
<div id="example3" class="beforeafter_slider_3" style="float:left">
<ul>
<li><img src="images/beforeafter_3/3before.jpg" alt="images/beforeafter_3/3before.jpg" />
<div id="textbox_13">
<div id="logo_13" class="fadeleft"><img src="images/anim/bolt.gif" alt="" /></div>
</div>
<div id="textbox_13" class="before">
<div id="title_13" class="fadeup">10+1 Indian = ?</div>
</div>
<div id="textbox_13" class="after">
<div id="title_13" class="fadeup">I dunno…mmmh… *</div>
</div>
<div id="textbox_13b" class="after">
<div id="title_13b" class="fadeup"><i>Don't drink and ride</i></div>
</div>
<div id="textbox_13c" class="after">
<div id="title_13c" class="fadeup"><i>*For risks and side effects please<br>
read the item's documentation.</i></div>
</div>
</li>
<li><img src="images/beforeafter_3/f_bg.gif" alt="images/beforeafter_3/f_bg.gif" />
<div id="textbox_code" class="after">
<div id="code" class="fadeup"><img src="images/beforeafter_3/f_code.png" alt="" /></div>
</div>
<div id="textbox_green" class="before">
<div id="green" class="fadeleft"><img src="images/beforeafter_3/f_green.png" alt="" /></div>
</div>
<div id="textbox_green2" class="after">
<div id="green2" class="fade"><img src="images/beforeafter_3/f_green.png" alt="" /></div>
</div>
<div id="textbox_fish">
<div id="fish" class="fadedown"><img src="images/beforeafter_3/f_fish.png" alt="" /></div>
</div>
<div id="textbox_points" class="after">
<div id="points" class="faderight"><img src="images/beforeafter_3/f_points.png" alt="" /></div>
</div>
<div id="textbox_points" class="after">
<div id="points" class="faderight"><img src="images/beforeafter_3/f_border.png" alt="" /></div>
</div>
<div id="textbox_points" class="before">
<div id="points" class="faderight"><img src="images/beforeafter_3/f_points.png" alt="" /></div>
</div>
<div id="textbox_14c" class="after">
<div id="title_14c" class="fadeup">We are</div>
</div>
<div id="textbox_14a" class="after">
<div id="title_14" class="fadeup">freshline</div>
</div>
<div id="textbox_14b" class="before">
<div id="title_14" class="fadeup">fresh</div>
</div>
</li>
<li><img src="images/beforeafter_3/1before.jpg" alt="images/beforeafter_3/1after.jpg" />
<div id="textbox_11" class="before">
<div id="title_11" class="fadeup">Maybe John?</div>
</div>
<div id="textbox_11" class="after">
<div id="title_11" class="fadeup">No, Gabriel!</div>
</div>
</li>
<li><img src="images/beforeafter_3/2before.jpg" alt="images/beforeafter_3/2after.jpg" />
<div id="textbox_12" class="before">
<div id="title_12" class="fadeup">Baby Aupair</div>
</div>
<div id="textbox_12" class="after">
<div id="title_12" class="fadeup">No Guarantee!</div>
</div>
</li>
</ul>
</div>
</div>
<!--
##############################
- ACTIVATE THE BANNER HERE -
##############################
-->
<script type="text/javascript">
$(function() {
$.noConflict();
jQuery('#example2').beforeAfter_slider(
{
width:264,
height:264,
start_from:'right',
start_pos:230,
follow:false
}
)
jQuery('#example3').beforeAfter_slider(
{
width:496,
height:264,
start_from:'left',
start_pos:447,
follow:false,
timer:3500
}
)
});
</script>
<!--
##############################
HTML DEMO PAGE HERE
##############################
-->
<div id="demo-content">
<div id="grey_head"></div>
<div class="smallinfo">See how to create individual banners</div>
<div style="clear:both"></div>
<div id="demo-toolbox">
<div class="button" onClick="self.location.href='index.html'">1. Example</div>
<div id="divider"></div>
<div class="button" onClick="self.location.href='index2.html'">2. Example</div>
</div>
<div class="float_title">SOURCE CODE</div>
<div id="sourcecode-headline">HTML</div>
<div id="sourcecode">
<xmp><script>
$(function() {
$.noConflict();
jQuery('#example2').beforeAfter_slider(
{
width:264,
height:264,
start_from:'right',
start_pos:230,
follow:false
}
)
jQuery('#example3').beforeAfter_slider(
{
width:496,
height:264,
start_from:'left',
start_pos:447,
follow:false
}
)
});
</script>
</xmp>
</div>
<div class="gray-background"></div>
<hr />
<div id="infobox">
<div id="left_info">Preperation time: 5 min.</div>
<div id="right_info">Clean Documentation</div>
</div>
</div>
</body>
</html>
JS代码(html5.js):
/* HTML5 Shiv v3.7.0 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed*/
(function(l,f){
function m(){
var a=e.elements;
return"string"==typeof a?a.split(" "):a}
function i(a){
var b=n[a[o]];
b||(b={
}
,h++,a[o]=h,n[h]=b);
return b}
function p(a,b,c){
b||(b=f);
if(g)return b.createElement(a);
c||(c=i(b));
b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);
return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}
function t(a,b){
if(!b.cache)b.cache={
}
,b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
a.createElement=function(c){
return!e.shivMethods?b.createElem(c):p(c,a,b)}
;
a.createDocumentFragment=Function("h,f","return function(){
var n=f.cloneNode(),c=n.createElement;
h.shivMethods&&("+m().join().replace(/[\w\-]+/g,function(a){
b.createElem(a);
b.frag.createElement(a);
return'c("'+a+'")'}
)+");
return n}
")(e,b.frag)}
function q(a){
a||(a=f);
var b=i(a);
if(e.shivCSS&&!j&&!b.hasCSS){
var c,d=a;
c=d.createElement("p");
d=d.getElementsByTagName("head")[0]||d.documentElement;
c.innerHTML="x<style>article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{
display:block}
mark{
background:#FF0;
color:#000}
template{
display:none}
</style>";
c=d.insertBefore(c.lastChild,d.firstChild);
b.hasCSS=!!c}
g||t(a,b);
return a}
var k=l.html5||{
}
,s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={
}
,g;
(function(){
try{
var a=f.createElement("a");
a.innerHTML="<xyz></xyz>";
j="hidden"in a;
var b;
if(!(b=1==a.childNodes.length)){
f.createElement("a");
var c=f.createDocumentFragment();
b="undefined"==typeof c.cloneNode||"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}
g=b}
catch(d){
g=j=!0}
}
)();
var e={
elements:k.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:"3.7.0",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){
a||(a=f);
if(g)return a.createDocumentFragment();
for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;
d<h;
d++)c.createElement(e[d]);
return c}
}
;
l.html5=e;
q(f)}
)(this,document);
JS代码(jquery.easing.1.3.js):
/* * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/ * * Uses the built in easing capabilities added In jQuery 1.1 * to offer multiple easing options * * TERMS OF USE - jQuery Easing * * Open source under the BSD License. * * Copyright © 2008 George McGinley Smith * All rights reserved. * * Redistribution and use in source and binary forms,with or without modification,* are permitted provided that the following conditions are met:* * Redistributions of source code must retain the above copyright notice,this list of * conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice,this list * of conditions and the following disclaimer in the documentation and/or other materials * provided with the distribution. * * Neither the name of the author nor the names of contributors may be used to endorse * or promote products derived from this software without specific prior written permission. * * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY * EXPRESS OR IMPLIED WARRANTIES,INCLUDING,BUT NOT LIMITED TO,THE IMPLIED WARRANTIES OF * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT,INDIRECT,INCIDENTAL,SPECIAL,* EXEMPLARY,OR CONSEQUENTIAL DAMAGES (INCLUDING,BUT NOT LIMITED TO,PROCUREMENT OF SUBSTITUTE * GOODS OR SERVICES;
LOSS OF USE,DATA,OR PROFITS;
OR BUSINESS INTERRUPTION) HOWEVER CAUSED * AND ON ANY THEORY OF LIABILITY,WHETHER IN CONTRACT,STRICT LIABILITY,OR TORT (INCLUDING * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,EVEN IF ADVISED * OF THE POSSIBILITY OF SUCH DAMAGE. **/
// t:current time,b:begInnIng value,c:change In value,d:durationjQuery.easing['jswing'] = jQuery.easing['swing'];
jQuery.extend( jQuery.easing,{
def:'easeOutQuad',swing:function (x,t,b,c,d){
//alert(jQuery.easing.default);
return jQuery.easing[jQuery.easing.def](x,t,b,c,d);
}
,easeInQuad:function (x,t,b,c,d){
return c*(t/=d)*t + b;
}
,easeOutQuad:function (x,t,b,c,d){
return -c *(t/=d)*(t-2) + b;
}
,easeInOutQuad:function (x,t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
}
,easeInCubic:function (x,t,b,c,d){
return c*(t/=d)*t*t + b;
}
,easeOutCubic:function (x,t,b,c,d){
return c*((t=t/d-1)*t*t + 1) + b;
}
,easeInOutCubic:function (x,t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t*t + b;
return c/2*((t-=2)*t*t + 2) + b;
}
,easeInQuart:function (x,t,b,c,d){
return c*(t/=d)*t*t*t + b;
}
,easeOutQuart:function (x,t,b,c,d){
return -c * ((t=t/d-1)*t*t*t - 1) + b;
}
,easeInOutQuart:function (x,t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
return -c/2 * ((t-=2)*t*t*t - 2) + b;
}
,easeInQuint:function (x,t,b,c,d){
return c*(t/=d)*t*t*t*t + b;
}
,easeOutQuint:function (x,t,b,c,d){
return c*((t=t/d-1)*t*t*t*t + 1) + b;
}
,easeInOutQuint:function (x,t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
return c/2*((t-=2)*t*t*t*t + 2) + b;
}
,easeInSine:function (x,t,b,c,d){
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
}
,easeOutSine:function (x,t,b,c,d){
return c * Math.sin(t/d * (Math.PI/2)) + b;
}
,easeInOutSine:function (x,t,b,c,d){
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
}
,easeInExpo:function (x,t,b,c,d){
return (t==0) ? b:c * Math.pow(2,10 * (t/d - 1)) + b;
}
,easeOutExpo:function (x,t,b,c,d){
return (t==d) ? b+c:c * (-Math.pow(2,-10 * t/d) + 1) + b;
}
,easeInOutExpo:function (x,t,b,c,d){
if (t==0) return b;
if (t==d) return b+c;
if ((t/=d/2) < 1) return c/2 * Math.pow(2,10 * (t - 1)) + b;
return c/2 * (-Math.pow(2,-10 * --t) + 2) + b;
}
,easeInCirc:function (x,t,b,c,d){
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
}
,easeOutCirc:function (x,t,b,c,d){
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
}
,easeInOutCirc:function (x,t,b,c,d){
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
}
,easeInElastic:function (x,t,b,c,d){
var s=1.70158;
var p=0;
var a=c;
if (t==0) return b;
if ((t/=d)==1) return b+c;
if (!p) p=d*.3;
if (a < Math.abs(c)){
a=c;
var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
}
,easeOutElastic:function (x,t,b,c,d){
var s=1.70158;
var p=0;
var a=c;
if (t==0) return b;
if ((t/=d)==1) return b+c;
if (!p) p=d*.3;
if (a < Math.abs(c)){
a=c;
var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
}
,easeInOutElastic:function (x,t,b,c,d){
var s=1.70158;
var p=0;
var a=c;
if (t==0) return b;
if ((t/=d/2)==2) return b+c;
if (!p) p=d*(.3*1.5);
if (a < Math.abs(c)){
a=c;
var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
}
,easeInBack:function (x,t,b,c,d,s){
if (s == undefined) s = 1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
}
,easeOutBack:function (x,t,b,c,d,s){
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
}
,easeInOutBack:function (x,t,b,c,d,s){
if (s == undefined) s = 1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}
,easeInBounce:function (x,t,b,c,d){
return c - jQuery.easing.easeOutBounce (x,d-t,0,c,d) + b;
}
,easeOutBounce:function (x,t,b,c,d){
if ((t/=d) < (1/2.75)){
return c*(7.5625*t*t) + b;
}
else if (t < (2/2.75)){
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
}
else if (t < (2.5/2.75)){
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
}
else{
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
}
,easeInOutBounce:function (x,t,b,c,d){
if (t < d/2) return jQuery.easing.easeInBounce (x,t*2,0,c,d) * .5 + b;
return jQuery.easing.easeOutBounce (x,t*2-d,0,c,d) * .5 + c*.5 + b;
}
}
);
/* * * TERMS OF USE - EASING EQUATIONS * * Open source under the BSD License. * * Copyright © 2001 Robert Penner * All rights reserved. * * Redistribution and use in source and binary forms,with or without modification,* are permitted provided that the following conditions are met:* * Redistributions of source code must retain the above copyright notice,this list of * conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice,this list * of conditions and the following disclaimer in the documentation and/or other materials * provided with the distribution. * * Neither the name of the author nor the names of contributors may be used to endorse * or promote products derived from this software without specific prior written permission. * * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY * EXPRESS OR IMPLIED WARRANTIES,INCLUDING,BUT NOT LIMITED TO,THE IMPLIED WARRANTIES OF * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT,INDIRECT,INCIDENTAL,SPECIAL,* EXEMPLARY,OR CONSEQUENTIAL DAMAGES (INCLUDING,BUT NOT LIMITED TO,PROCUREMENT OF SUBSTITUTE * GOODS OR SERVICES;
LOSS OF USE,DATA,OR PROFITS;
OR BUSINESS INTERRUPTION) HOWEVER CAUSED * AND ON ANY THEORY OF LIABILITY,WHETHER IN CONTRACT,STRICT LIABILITY,OR TORT (INCLUDING * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,EVEN IF ADVISED * OF THE POSSIBILITY OF SUCH DAMAGE. * */
CSS代码(css.css):
@font-face{font-family:'Oswald';font-style:normal;font-weight:400;src:local('Oswald Regular'),local('Oswald-Regular'),url(../fonts/lanrentuku.woff) format('woff');}
CSS代码(lrtk.css):
/* ����ͼ�� �Ѽ����� www.lanrentuku.com */
CSS代码(style.css):
/*-----------------------------------------------------------------------------Before-After and BackstageScreen Stylesheetversion:1.0date:07/27/11author:freshlineemail:support@version-four.comwebsite:http://www.version-four.com-----------------------------------------------------------------------------*/
/***********/
/* BASICS */
/*********/
html{width:100%;}
/*************************/
/* BODY STYLE */
/***********************/
body{background-color:#A6B8CC;}
.titlelogo{background-image:url(../images/sitelogo.png);background-repeat:no-repeat;margin-left:auto;margin-right:auto;padding-top:35px;margin-top:20px;margin-bottom:-5px;display:block;width:250px;height:98px;}
#big_divider{margin-top:40px;}
#demo-content{font-family:'Oswald',sans-serif;margin-left:auto;margin-right:auto;width:900px;background-color:#fff;-webkit-box-shadow:0px -15px 35px -30px;-moz-box-shadow:0px -15px 35px -30px;box-shadow:0px -15px 35px -30px;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;position:relative;}
#demo-content .smallinfo{position:relative;z-index:10;font-family:'Oswald',sans-serif;float:right;font-size:12px;margin-right:30px;margin-top:10px;display:block;}
#demo-content .smalldeclaration{font-family:'Oswald',sans-serif;float:left;font-size:12px;margin-left:12px;margin-top:10px;display:block;}
#demo-content .float_title{font-family:'Oswald',sans-serif;color:#fff;font-weight:normal;font-size:14px;margin-top:88px;margin-left:30px;margin-right:30px;padding-top:5px;padding-bottom:5px;padding-left:10px;background-color:#1f2120;clear:both;}
#demo-content #demo-settings{position:absolute;color:#A6B8CC;font-family:'Oswald',sans-serif;font-size:18px;background:#1f2120 url(../images/navigation/settingsanim_1.gif) no-repeat 16px 5px;-webkit-box-shadow:0px 0px 6px 0px #797a79;-moz-box-shadow:0px 0px 6px 0px #797a79;box-shadow:0px 0px 6px 0px #797a79;padding-left:68px;padding-right:10px;padding-top:5px;padding-bottom:5px;margin-top:10px;margin-left:30px;width:126px;height:28px;z-index:10;cursor:pointer;border-top-right-radius:10px;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;border-bottom-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;}
#demo-content #panel{opacity:0.0;position:absolute;width:204px;height:0px;margin-top:0px;margin-left:30px;background-color:#fff;float:left;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;z-index:5;-webkit-box-shadow:0px 0px 4px 0px #797a79;-moz-box-shadow:0px 0px 4px 0px #797a79;box-shadow:0px 0px 4px 0px #797a79;}
#demo-content #panel li{width:18px;height:18px;float:left;margin-left:12px;margin-right:0px;margin-top:7px;border:1px solid #a6b8cc;cursor:pointer;}
#demo-content #panel ul,li{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;list-style-type:none;}
.bg1{background-color:#a6b8cc;}
.bg2{background:url(../images/background/pattern/royal_line/royal_wall.jpg);}
.bg3{background:url(../images/background/pattern/royal_line/royal_green.jpg);}
.bg4{background:url(../images/background/pattern/damask/royal_dark.jpg);}
.bg5{background:url(../images/background/textures/w_07.jpg);}
.bg6{background:url(../images/background/abstract/g_09.jpg);}
.border1{background-color:#000;}
.border2{background:url(../images/background/pattern/basic/pattern_1b.png);}
.border3{background:url(../images/background/pattern/damask/simple_med.png);}
.border4{background:url(../images/background/pattern/basic/pattern_02b.png);}
.border5{background:url(../images/background/pattern/basic/pattern_10.png);}
.border6{background:url(../images/background/pattern/damask/simple_grey.png);}
.borderstyleselector{color:#A6B8CC;font-family:'Oswald',sans-serif;font-size:12px;margin-top:10px;}
.rounded{float:left;margin-left:12px;color:#1f2120;}
.square{float:left;margin-right:10px;}
.photo{float:left;margin-right:0px;margin-left:5px;}
.normal{float:left;margin-right:10px;color:#1f2120;}
.seperator{float:left;margin-left:5px;margin-right:5px;}
#rounded:hover{cursor:pointer;color:#1f2120;}
#square:hover{cursor:pointer;color:#1f2120;}
#photo:hover{cursor:pointer;color:#1f2120;}
#normal:hover{cursor:pointer;color:#1f2120;}
.shadowselector{color:#A6B8CC;font-family:'Oswald',sans-serif;font-size:12px;margin-top:5px;margin-left:5px;}
#shadow1{cursor:pointer;float:left;margin-left:7px}
#shadow2{cursor:pointer;float:left;margin-left:0px}
#shadow3{cursor:pointer;float:left;margin-left:0px}
#demo-content #grey_head{position:absolute;top:0;left:0;background-color:#e8e8e8;height:58px;width:100%;border-top-right-radius:10px;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;border-top-left-radius:10px;-moz-border-radius-toprleft:10px;-webkit-border-top-left-radius:10px;}
#demo-content #demo-toolbox{position:relative;z-index:10;background-color:#1f2120;width:auto;float:right;margin-right:30px;margin-top:10px;margin-bottom:20px;padding-left:10px;padding-right:10px;padding-top:5px;padding-bottom:5px;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-box-shadow:0px 0px 6px 0px #797a79;-moz-box-shadow:0px 0px 6px 0px #797a79;box-shadow:0px 0px 6px 0px #797a79;}
#demo-content #demo-toolbox .button{font-family:'Oswald',sans-serif;color:#A6B8CC;font-size:18px;float:left;margin-left:10px;margin-right:10px;margin-top:0px;cursor:pointer;}
#demo-content #demo-toolbox .button:hover{color:#fff;}
#demo-content #demo-toolbox #divider{margin-left:10px;margin-right:10px;float:left;overflow:hidden;background-image:url(../images/navigation/toolbar_separator.png);width:2px;height:28px;}
#demo-content #sourcecode-headline{color:#000;font-family:'Oswald',sans-serif;font-size:16px;clear:both;margin:30px;}
#demo-content #sourcecode{color:#333;background-color:#f2f8ff;border:1px solid #b4b8bd;border-style:dotted;margin-left:30px;margin-right:30px;}
;.gray-background{background-color:#ccc;height:40px;width:100px;position:absolute;top:0px;left:0px;}
#demo-content hr{border-top:0;border-left:0;border-right:0;border-bottom:1px dotted #b4b8bd;height:0;margin-top:40px;margin-left:30px;margin-right:30px;margin-bottom:20px;}
#demo-content #infobox{margin-left:30px;overflow:hidden;}
#demo-content #infobox #left_info,#demo-content #infobox #right_info{float:left;padding-top:15px;height:38px;vertical-align:middle;color:#A6B8CC;font-size:14px;margin-bottom:30px;}
#demo-content #infobox #left_info{padding-left:60px;background:#fff url(../images/icon_1.png) no-repeat;border-right:1px dotted #b4b8bd;width:360px;}
#demo-content #infobox #right_info{padding-left:55px;background:#fff url(../images/icon_2.png) no-repeat;margin-left:30px;}
分享到QQ
分享到微博
微信扫一扫
