以下是 jQuery原始图片对比特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ie7 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ie8 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9 no-js" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery原始图片对比</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.doubleviewer_s1.js"></script>
</head>
<body>
<div class="container">
<header>
<h1><span>jQuery原始图片对比</span></h1>
<br>
<nav class="codrops-demos">
<a class="current" id="t1" name="t1">Settings 1</a>
<a id="t2" name="t2">Settings 2</a>
<a id="t3" name="t3">Settings 3</a>
<nav>
<h3><div id="mtext">(Default settings)</div></h3>
</header>
<section>
<script type="text/javascript">
$(function(){
$("#t1").click(function(){
$('#cont').html('').append("<div id='DoubleViewer'></div>");
$('#DoubleViewer').doubleviewer();
$(".current", event.delegateTarget).removeClass("current");
$(this).addClass("current");
$('#mtext').text('(Default settings)');
});
$("#t2").click(function(){
var config = {
lineColor: '#fff',
noClick:true,
img_before: 'img/pic_1.jpg',
img_after: 'img/pic_2.jpg',
cursor:{
color: '#2D9EA3',
size: 8,
gap: 4,
lineColor: '#2D9EA3',
lineH: 30
}
}
$('#cont').html('').append("<div id='DoubleViewer'></div>");
$('#DoubleViewer').doubleviewer(config);
$(".current", event.delegateTarget).removeClass("current");
$(this).addClass("current");
$('#mtext').text('(Control without pressing the mouse)');
});
$("#t3").click(function(){
var config = {
lineColor: '#666',
lineWidth: 4,
cursorVisible: false,
stopClick: true,
img_before: 'img/pic_1.jpg',
img_after: 'img/pic_2.jpg',
startPosition: .3
}
$('#cont').html('').append("<div id='DoubleViewer'></div>");
$('#DoubleViewer').doubleviewer(config);
$(".current", event.delegateTarget).removeClass("current");
$(this).addClass("current");
$('#mtext').text('(Cursor invisible & line stop in click position)');
});
$('#DoubleViewer').doubleviewer();
});
</script>
<div id="cont">
<div id="DoubleViewer"></div>
<div id="chinazzzsc"></div>
</div>
</section>
</div>
</body>
</html>
JS代码(jquery.doubleviewer_s1.js):
eval(function(p,a,c,k,e,d){
e=function(c){
return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))}
;
if(!''.replace(/^/,String)){
while(c--){
d[e(c)]=k[c]||e(c)}
k=[function(e){
return d[e]}
];
e=function(){
return'\\w+'}
;
c=1}
;
while(c--){
if(k[c]){
p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}
}
return p}
('(A($){
$.2k.1H({
2l:A(1m){
a 1G={
1j:\'#2j\',R:2,b:2i,d:2f,1h:.5,1T:\'2g\',1J:\'Q/2h.1N\',1I:\'Q/2m.1N\',1b:E,Z:f,1B:f,8:{
1E:\'#2n\',j:10,1a:6,1j:\'#2s\',19:2t,1D:4}
}
;
1m=$.1H(1G,1m);
a 7=1A.2r(1A.2q()*2o);
2p 1P.2e(A(){
a o=1m;
o.R=o.R/2;
a l=$(1P);
$(l).b(o.b).d(o.d).t({
\'P\':\'N\',\'s\':\'24\',\'1y\':\'0\',\'d\':o.d}
);
$(l).18(\'<h C="23\'+7+\'"><Q b="\'+o.b+\'" d="\'+o.d+\'" 1u="\'+o.1J+\'" /></h>\');
$(l).18(\'<h C="1k\'+7+\'"><Q b="\'+o.b+\'" d="\'+o.d+\'" 1u="\'+o.1I+\'" /></h>\');
$(\'#1k\'+7).t({
\'d\':o.d,\'b\':(o.b*o.1h),\'s\':\'H\',\'P\':\'N\',\'n\':\'22\',\'z-1l\':\'1\'}
);
$(l).18(\'<h C="1t\'+7+\'"><h C="12\'+7+\'"></h></h>\');
k(o.1b){
$(\'#1t\'+7).18(\'<h C="14\'+7+\'">\'+\'<h C="1Q\'+7+\'"></h>\'+\'<h C="1O\'+7+\'"></h>\'+\'<h C="1M\'+7+\'"></h>\'+\'<h C="1L\'+7+\'"></h>\'+\'</h>\')}
$(\'#1Q\'+7).t({
\'s\':\'H\',\'P\':\'N\',\'b\':0,\'d\':0,\'K-n\':-o.8.1a/2+\'9\',\'O-p\':o.8.j+\'9 L 1o\',\'O-21\':o.8.j+\'9 L \'+o.8.1E,\'O-1K\':o.8.j+\'9 L 1o\'}
);
$(\'#1O\'+7).t({
\'s\':\'H\',\'P\':\'N\',\'b\':0,\'d\':0,\'K-n\':o.8.1a/2+o.8.j+\'9\',\'O-p\':o.8.j+\'9 L 1o\',\'O-n\':o.8.j+\'9 L \'+o.8.1E,\'O-1K\':o.8.j+\'9 L 1o\'}
);
$(\'#1M\'+7).t({
\'s\':\'H\',\'P\':\'N\',\'b\':o.8.1D+\'9\',\'d\':o.8.19+\'9\',\'K-n\':-o.8.1D/2+o.8.j+\'9\',\'K-p\':-o.8.19/2+o.8.j+\'9\',\'1R\':o.8.1j}
);
$(\'#1L\'+7).t({
\'s\':\'H\',\'P\':\'N\',\'b\':o.8.j*2+o.8.1a+\'9\',\'d\':o.8.19+\'9\',\'K-n\':-o.8.1a/2+\'9\',\'K-p\':-o.8.19/2+o.8.j+\'9\'}
);
$(l).18(\'<h C="1r\'+7+\'" 2b="1R:#2u;
b:\'+o.b+\'9;
d:\'+o.d+\'9;
s:H;
z-1l:2D">\'+\'<Q C="1S\'+7+\'" b="16" d="11" 1u="2V:2Z/2P;
2S,2R///2T+2U+2Y+2W+2X+2N/2B+2C+2O+2A+2z/2w+2x/2y/2E+2F" />\'+\'</h>\');
$(\'#1S\'+7).t({
\'s\':\'H\',\'P\':\'N\',\'p\':\'1F%\',\'n\':\'1F%\',\'K-n\':\'-2J\',\'K-p\':\'-2H\'}
);
$(\'#1r\'+7).t({
\'1w\':.2I}
);
a B=$(l).1g().n,J=$(l).1g().p;
$(\'#14\'+7).t({
\'1w\':1,\'s\':\'H\',\'1y\':\'0\',\'n\':(o.b*o.1h)-o.8.j+\'9\',\'p\':o.d/2+J-$(l).s().p-o.8.j,\'z-1l\':\'3\'}
);
$(\'#12\'+7).t({
\'O\':+o.R+\'9 L \'+o.1j,\'s\':\'H\',\'1y\':\'0\',\'2c-2G\':\'2K\',\'n\':(o.b*o.1h)-o.R+\'9\',\'z-1l\':\'2\'}
).d(o.d);
$(\'#1t\'+7).t(\'8\',o.1T);
a 1Z=$(l).1U(\'Q\').2L;
a i=0;
$(l).1U(\'Q\').1d(\'2Q\',A(){
i++;
k(i==1Z){
$(\'#1r\'+7).1c({
1w:0}
,1v,A(){
$(\'#1r\'+7).2v()}
)}
}
);
a F;
a X=f;
a Z=E;
A D(M,1f,I){
I=I==2a?0:I;
a r=c.u.r||c.v&&c.v.r||0;
a g=c.u.g||c.v&&c.v.g||0;
r-=c.u.1z;
g-=c.u.2d;
k(X||Z){
k(1e){
k(o.1b){
$(\'#14\'+7).S().1c({
\'p\':(1f-$(l).s().p-o.8.j)+\'9\',\'n\':(M-o.8.j)+\'9\'}
,{
1q:f,1p:I}
)}
$(\'#12\'+7).S().1c({
\'n\':(M-o.R)+\'9\'}
,{
1q:f,1p:I}
);
$(\'#1k\'+7).S().1c({
\'b\':(M)+\'9\'}
,{
1q:f,1p:I}
)}
15{
k(o.1b){
$(\'#14\'+7).S().t({
\'p\':(1f-$(l).s().p-o.8.j+r)+\'9\',\'n\':(M-o.8.j+g)+\'9\'}
)}
$(\'#12\'+7).S().t({
\'n\':(M-o.R+g)+\'9\'}
);
$(\'#1k\'+7).S().t({
\'b\':(M+g)+\'9\'}
)}
}
k(V&&o.1b){
$(\'#14\'+7).S().1c({
\'p\':(1f-$(l).s().p-o.8.j)+\'9\'}
,{
1q:f,1p:I}
);
V=f}
}
a 1n=f;
a q;
a x;
a 1s=0;
a 17;
a 1e=f;
a V=f;
$(c).1d(\'28 13\',A(e){
a w=e||m;
(w.Y)?w.Y():w.1C=f;
q=e.T==\'13\'?(m.U[0].y||m.W[0].y):e.y;
x=e.T==\'13\'?(m.U[0].G||m.W[0].G):e.G;
k(!o.1B&&!1n&&(1A.27(1s-(q-B))<1)){
1e=E;
k(17){
D(0,x,1v)}
15{
D(o.b,x,1v)}
}
1e=f;
X=f;
F=1V(A(){
V=E;
k(e.T==\'13\'){
k(17){
D(0,o.d/2+J,1i)}
15{
D(o.b,o.d/2+J,1i)}
}
}
,1i)}
);
$(l).1d(\'29\',A(e){
q=e.T==\'13\'?(m.U[0].y||m.W[0].y):e.y;
x=e.T==\'13\'?(m.U[0].G||m.W[0].G):e.G;
k(q<B){
D(0,x)}
15 k(q>o.b+B){
D(o.b,x)}
F=1V(A(){
V=E;
D(q-B,o.d/2+J,1i)}
,1Y);
X=f;
Z=X;
1n=E}
).1d(\'1x 26\',A(e){
a w=e||m;
(w.Y)?w.Y():w.1C=f;
Z=o.Z;
q=e.T==\'1x\'?e.y:(m.U[0].y||m.W[0].y);
x=e.T==\'1x\'?e.G:(m.U[0].G||m.W[0].G);
k(F){
V=f;
1X.1W(F);
F=0}
a r=c.u.r||c.v&&c.v.r||0;
a g=c.u.g||c.v&&c.v.g||0;
r-=c.u.1z;
g-=c.u.g;
k((q-B+g>0&&q-B+g<o.b)&&(x-J+r>0&&x-J+r<o.d)){
D(q-B,x)}
}
).1d(\'25 20\',A(e){
a w=e||m;
(w.Y)?w.Y():w.1C=f;
a r=c.u.r||c.v&&c.v.r||0;
a g=c.u.g||c.v&&c.v.g||0;
r-=c.u.1z;
g-=c.u.g;
q=e.y||(m.W[0].y||m.U[0].y);
k(q-B+g<$(\'#12\'+7).s().n+$(\'#12\'+7).b()/2){
17=E}
15{
17=f}
B=$(l).1g().n;
J=$(l).1g().p;
X=E;
1n=f;
k(F){
V=f;
1X.1W(F);
F=0}
1s=q-B;
k(o.1B){
X=E;
1e=E;
D(q-B,x,1Y)}
}
)}
)}
}
)}
)(2M);
',62,186,'|||||||rand|cursor|px|var|width|document|height||false|scrollLeft|div||size|if|obj|event|left||top|eClientX|scrollTop|position|css|documentElement|body|evt|eClientY|clientX||function|o_left|id|newPos|true|timer|clientY|absolute|dur|o_top|margin|solid|pX|hidden|border|overflow|img|lineWidth|stop|type|changedTouches|m_out|touches|mcl|preventDefault|noClick|||line|touchend|cur|else||cur_p|prepend|lineH|gap|cursorVisible|animate|bind|edge|pY|offset|startPosition|1000|lineColor|after|index|options|leave|transparent|duration|queue|loading|posXY|drag|src|200|opacity|mousemove|padding|clientTop|Math|stopClick|returnValue|lineW|color|50|defaults|extend|img_after|img_before|bottom|region|rect|jpg|cur_r|this|cur_l|background|loading_|cursorProperty|find|setTimeout|clearTimeout|window|100|numImgs|touchstart|right|0px|before|relative|mousedown|touchmove|abs|mouseup|mouseleave|undefined|style|vertical|clientLeft|each|400|move|pic_1|600|F60|fn|doubleviewer|pic_2|f80|999999|return|random|round|fff|40|ffffff|remove|7txxwlwv2isSacYUc|l4tADQGQ1mvpBAAIfkEAAsABwAsAAAAABAACwAABS8gII5kaZ7kRFGTqLLuqnIcJVK0DeA1r|u3HHCXC|4FIIACH5BAALAAYALAAAAAAQAAsAAAUvICCOZGme5ERRk6iy7qpyHCVStA3gNa|hWPzJFzOQQaeavWi7oqnVIhACH5BAALAAQALAAAAAAQAAsAAAUyICCOZGme1rJY5kRRk7hI0mJSVUXJtF3iOl7tltsBZsNfUegjAY3I5sgFY55KqdX1GgIAIfkEAAsABQAsAAAAABAACwAABTcgII5kaZ4kcV2EqLJipmnZhWGXaOOitm2aXQ4g7P2Ct2ER4AMul00kj5g0Al8tADY2y6C|HISxGBzdHTuBNOmcJVCyoUlk7CEAAh|QQACwADACwAAAAAEAALAAAFNSAgjqQIRRFUAo3jNGIkSdHqPI8Tz3V55zuaDacDyIQ|9999|aKxJpxhRz6Xi0ANAZDWa|kEAA7AAAAAAAAAAAA|align|5px|95|8px|middle|length|jQuery|QQACwACACwAAAAAEAALAAAFNiAgjothLOOIJAkiGgxjpGKiKMkbz7SN6zIawJcDwIK9W|YrBH|gif|load|R0lGODlhEAALAPQAAP|base64|wAAANra2tDQ0Orq6gYGBgAAAC4uLoKCgmBgYLq6uiIiIkpKSoqKimRkZL6|viYmJgQEBE5OTubm5tjY2PT09Dg4ONzc3PLy8ra2tqCgoMrKyu7u7gAAAAAAAAAAACH|data|QQACwABACwAAAAAEAALAAAFJGBhGAVgnqhpHIeRvsDawqns0qeN5|y967tYLyicBYE7EYkYAgAh|GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAALAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAALAAAFLSAgjmRpnqSgCuLKAq5AEIM4zDVw03ve27ifDgfkEYe04kDIDC5zrtYKRa2WQgAh|image'.split('|'),0,{
}
))CSS代码(demo.css):
@font-face{font-family:'BebasNeueRegular';src:url('fonts/BebasNeue-webfont.eot');src:url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/BebasNeue-webfont.woff') format('woff'),url('fonts/BebasNeue-webfont.ttf') format('truetype'),url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');font-weight:normal;font-style:normal;}
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
fieldset,img{border:0;}
ol,ul{list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
body{font-family:Constantia,Palatino,"Palatino Linotype","Palatino LT STD",Georgia,serif;background:#f8f8f8 url(ice_age.png) repeat top left;font-weight:400;font-size:15px;color:#416c80;overflow-y:scroll;overflow-x:hidden;}
.ie7 body{overflow:hidden;}
a{text-decoration:none;}
.container{width:100%;position:relative;text-align:center;}
.clr{clear:both;}
.container > header{padding:20px 30px 10px 30px;margin:0px;position:relative;display:block;text-shadow:1px 1px 1px rgba(0,0,0,0.2);text-align:center;}
.container > header h1{font-family:'BebasNeueRegular','Arial Narrow',Arial,sans-serif;font-size:54px;line-height:35px;position:relative;font-weight:400;color:#186f8f;text-shadow:1px 1px 1px rgba(0,0,0,0.3);padding:0px 0px 5px 0px;}
.container > header h1 span{color:#8A9396;text-shadow:0px 1px 1px rgba(255,255,255,0.8);}
.container > header h2,p.info{font-family:'BebasNeueRegular','Arial Narrow',Arial,sans-serif;font-size:24px;color:#999;text-shadow:0px 1px 1px rgba(255,255,255,1);}
.container > header h3,p.info{//font-family:'Arial Narrow',Arial,sans-serif;font-size:14px;font-style:italic;//font-style:italic;color:#888;text-shadow:0px 1px 1px rgba(255,255,255,1);}
.codrops-top{font-family:'Arial Narrow',Arial,sans-serif;line-height:24px;font-size:11px;background:#000;opacity:0.9;text-transform:uppercase;z-index:9999;position:relative;-moz-box-shadow:1px 0px 2px #000;-webkit-box-shadow:1px 0px 2px #000;box-shadow:1px 0px 2px #000;}
.codrops-demos{text-align:center;display:block;line-height:30px;padding:0px 0px;}
.codrops-demos a{display:inline-block;//margin:0px 2px;padding:4px 10px 4px 10px;color:#fff;line-height:20px;font-style:italic;font-size:13px;//border-radius:6px;background:#8A9396;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-o-transition:all 0.2s linear;-ms-transition:all 0.2s linear;transition:all 0.2s linear;}
.codrops-demos a:hover{cursor:pointer;background:rgba(0,0,0,0.7);}
.codrops-demos a.current,.codrops-demos a.current:hover{cursor:pointer;background:rgba(0,0,0,0.8);}
#DoubleViewer{margin:0 auto;}
#DoubleViewer p{display:block;padding-bottom:60px;}
@media screen and (max-width:767px){.container > header{text-align:center;}
p.codrops-demos{position:relative;top:auto;left:auto;}
}
分享到QQ
分享到微博
微信扫一扫
