以下是 可拖动对比图片jQuery焦点图js代码 的示例演示效果:
部分效果截图:
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" />
<title>���϶��Ա�ͼƬjQuery����ͼ</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>
</body>
</html>HTML代码(index2.html):
<!DOCTYPE html>
<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);
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代码(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
分享到微博
微信扫一扫
