Code:
<!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" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#tst {
position:relative;width:940px;height:529px;border:solid black 1px;
}
.before {
position:relative;width:940px;height:529px;background-Image:url(http://www.abc.net.au/news/events/japan-quake-2011/images/beforeafter/sendai-arahama-1.jpg);background-Repeat:none;
}
.after {
position:absolute;left:936px;top:0px;width:0px;height:529px;background-Image:url(http://www.abc.net.au/news/events/japan-quake-2011/images/beforeafter/sendai-arahama-2.jpg);background-Repeat:none;
border-Left:solid red 4px;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Drag & Drop III (05-Febuary-2009)
// by Vic Phillips http://www.vicsjavascripts.org.uk/
// obj.drag=new zxcDrag(document.getElementById('tst'),false,'xy',[0,300,0,250])
// where:
// parameter 1 = the object to activate drag on mousedown. (object)
// parameter 2 = the object to dragged on mousemove. (object, or false to default to parameter 1)
// parameter 3 = (optional) a string containing 'x' to drag x and/or 'y' to drag y. (string, default 'xy')
// parameter 4 = (optional) an array defining the minimum and maximum x and y coordinates (array, default [])
// where:
// field 0 = the minimum x cordinate. (digits, null = not set)
// field 1 = the maximum x cordinate. (digits, null = not set)
// field 2 = the minimum y cordinate. (digits, null = not set)
// field 3 = the maximum y cordinate. (digits, null = not set)
// parameter 4 = (optional) a string defining a function to be called on mouseup. (string) (see Note 2)
// parameter 5 = (optional) a string defining a function to be called on mousemove. (string) (see Note 2)
// parameter 6 = (optional) a string defining a function to be called on mousedown. (string) (see Note 2)
// Note 1:
// On mousedown of the object the object z_index is increased by 10.
// On the mouseup the z-Index is restored to the original z-Index.
// Note 2:
// When a function is called the zxcDrag function is passed to the function.
// The drag object may be access by argument[0].dobj, and the event as argument[1].
// e.g.
// function Test(obj,evt){
// alert(obj.dobj);
// alert(evt.type);
// }
// Functional Code Size 2.43K
// Functional Code
function zxcDrag(obj,root,dxy,mm,uf,mf,df){
this.dobj=root?root:obj;
mm=mm||['x','x','y','y'];
dxy=(dxy||'xy').toLowerCase();
this.dx=dxy.indexOf('x')>-1?true:false;
this.dy=dxy.indexOf('y')>-1?true:false;
this.minX=typeof mm[0]=='number'&&this.dx?mm[0]+.1:false;
this.maxX=typeof mm[1]=='number'&&this.dx?mm[1]+.1:false;
this.minY=typeof mm[2]=='number'&&this.dy?mm[2]+.1:false;
this.maxY=typeof mm[3]=='number'&&this.dy?mm[3]+.1:false;
this.df=df||''; this.mf=mf||''; this.uf=uf||'';
this.addevt(obj,'mousedown','down');
this.addevt(document,'mousemove','move');
this.addevt(document,'mouseup','up');
}
zxcDrag.prototype.down=function(ev){
document.onselectstart=function(event){ window.event.returnValue=false; }
this.dobj.style.zIndex=zxcLT(this.dobj,'z-Index')+10+'';
this.lastXY=[ev.clientX,ev.clientY];
this.drag=true;
if (window[this.df]) window[this.df](this,ev);
if (!window.event) ev.preventDefault();
return false;
}
zxcDrag.prototype.move=function(ev){
if (this.drag){
var mse=[ev.clientX,ev.clientY];
var lft=zxcLT(this.dobj,'left')+mse[0]-this.lastXY[0];
var top=zxcLT(this.dobj,'top')+mse[1]-this.lastXY[1];
if (this.dx) this.dobj.style.left=Math.min(this.maxX||lft,Math.max(this.minX||lft,lft))+'px';
if (this.dy) this.dobj.style.top=Math.min(this.max1||top,Math.max(this.minY||top,top))+'px';
lft=zxcLT(this.dobj,'left');
top=zxcLT(this.dobj,'top');
if ((this.maxX&&lft>=this.maxX-.1)||(this.minX&&lft<=this.minX-.1)||(this.maxY&&top>=this.maxY-.1)||(this.minY&&top<=this.minY-.1)) this.drag=false;
this.lastXY=mse;
if (this.mf) this.mf(this,ev);
}
if (!window.event) ev.preventDefault();
return false;
}
zxcDrag.prototype.up=function(ev){
if (this.drag){
this.drag=false;
document.onselectstart=null;
this.dobj.style.zIndex=zxcLT(this.dobj,'z-Index')-10+'';
if (window[this.uf]) window[this.uf](this,ev);
}
}
zxcDrag.prototype.addevt=function(o,t,f){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e); });
else {
var prev=o['on'+t];
if (prev) o['on'+t]=function(e){ prev(e); oop[f](e); };
else o['on'+t]=o[f];
}
}
function zxcLT(obj,p){
if (obj.currentStyle) return parseInt(obj.currentStyle[p.replace(/-/g,'')]);
return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(p));
}
/*]]>*/
</script>
</head>
</head>
<body>
<div id="tst" >
<div class="before" ></div>
<div class="after" ></div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
function zxcBeforeAfter(o){
var oop=this,obj=document.getElementById(o.ID),after=obj.getElementsByTagName('DIV')[1];
this.drag=new zxcDrag(after,null,'x',[0,this.width],null,oop.drag)
this.drag.after=after;
this.drag.width=obj.offsetWidth;
}
zxcBeforeAfter.prototype={
drag:function(){
this.dobj.style.width=Math.max(this.width-this.dobj.offsetLeft,0)+'px';
this.dobj.style.backgroundPosition=-this.dobj.offsetLeft+'px';
}
}
new zxcBeforeAfter({
ID:'tst'
});
/*]]>*/
</script>
</body>
</html>
Junior Coders
Before and After image viewer
Posting Permissions
Reply With Quote
Bookmarks