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;left:0px;top:0px;width:400px;height:170px;border:solid black 1px;
}
.panel {
position:relative;left:0px;top:0px;width:400px;height:170px;
}
.text {
position:absolute;left:228px;top:0px;width:200px;height:170px;background-Color:#FFFFCC;padding-Left:5px;
}
.paginate {
position:absolute;z-Index:4;left:35px;top:10px;width:300px;height:50px;
}
.default {
width:15px;height:15px;background-Color:#FFFFCC;float:left;margin-Right:22px;border:solid #FF3300 1px;font-Size:12px;text-Align:center;
}
.mseover {
background-Color:#FFCC66;
}
.active {
background-Color:#FF0000;
}
/*]]>*/
</style>
<script type="text/javascript">
// Animate (11-January-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk
// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.
// **** Application Notes
// removed to allow posting
//
// **** Functional Code(1.52K) - NO NEED to Change
function zxcAnimate(mde,obj,srt){
this.to=null;
this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
this.mde=mde.replace(/\W/g,'');
this.data=[srt||0];
return this;
}
zxcAnimate.prototype={
animate:function(srt,fin,ms,scale,c){
clearTimeout(this.to);
this.time=ms||this.time||0;
this.neg=srt<0||fin<0;
this.data=[srt,srt,fin];
this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
this.inc=Math.PI/(2*this.mS);
this.srttime=new Date().getTime();
this.cng();
},
cng:function(){
var oop=this,ms=new Date().getTime()-this.srttime;
this.data[0]=Math.floor(this.c=='s'?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:this.c=='c'?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1]);
this.apply();
if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
else {
this.data[0]=this.data[2];
this.apply();
if (this.Complete) this.Complete(this);
}
},
apply:function(){
if (isFinite(this.data[0])){
if (this.data[0]<0&&!this.neg) this.data[0]=0;
if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
else zxcOpacity(this.obj,this.data[0]);
}
}
}
function zxcOpacity(obj,opc){
if (opc<0||opc>100) return;
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}
</script>
</head>
<body>
<div id="tst" >
<div class="panel" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="Img" width="230"/>
<div class="text" >
Panel 1
</div>
</div>
<div class="panel" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="Img" width="230"/>
<div class="text" >
Panel 2
</div>
</div>
<div class="panel" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="Img" width="230"/>
<div class="text" >
Panel 3
</div>
</div>
<div class="panel" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="Img" width="230"/>
<div class="text" >
Panel 4
</div>
</div>
<div id="Page1" class="paginate" >
<div class="default" ></div>
</div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
function FadeSS(o){
var obj=document.getElementById(o.ID);
obj.style.overflow='hidden';
this.panels=[];
var panels=this.bycls(o.PanelClassName,obj);
for (var z0=0;z0<panels.length;z0++){
panels[z0].style.position='absolute';
panels[z0].style.visibility=z0>0?'hidden':'visible';
zxcOpacity(panels[z0],z0>0?0:100);
this.panels[z0]=new zxcAnimate('opacity',panels[z0],z0>0?0:100);
this.panels[z0].Complete=function(){
if (this.data==0){
this.obj.style.visibility='hidden';
}
}
}
this.lst=this.panels[0];
this.to=null;
this.cnt=0;
this.ms=o.EffectDuration||1000;
this.hold=(o.HoldDuration||2000)+this.ms;
this.pages=[];
if (o.Paginate){
this.Paginate(o.Paginate);
}
this.auto();
}
FadeSS.prototype={
GoTo:function(nu){
clearTimeout(this.to);
this.animate(nu);
this.auto();
},
auto:function(){
var oop=this,nu=this.cnt;
this.to=setTimeout(function(){ oop.animate(nu=++nu%oop.panels.length); oop.auto(); },this.hold);
},
animate:function(nu){
this.lst.animate(this.lst.data[0],0,this.ms,[0,100]);
this.lst=this.panels[nu];
this.lst.obj.style.visibility='visible';
this.lst.animate(this.lst.data[0],100,this.ms,[0,100]);
if (this.pages[nu]){
this.pages[this.cnt].className=this.defcls;
this.pages[nu].className=this.actcls;
}
this.cnt=nu;
},
addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
},
bycls:function (nme,el){
for (var reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)){
ary.push(els[z0]);
}
}
return ary;
},
// Optional Paginate Code.
Paginate:function(o){
var obj=document.getElementById(o.ID);
if (obj){
this.defcls=o.DefaultClassName;
this.msecls=this.defcls+' '+(o.MouseOverClassName||'');
this.actcls=this.defcls+' '+(o.ActiveClassName||'');
var ps=this.bycls(this.defcls,obj);
if (!ps[0]){
ps[0]=document.createElement(o.NodeName||'DIV');
obj.appendChild(ps[0]);
}
var c=ps[0].cloneNode(true),html=o.HTML||[];
for (var z0=0;z0<this.panels.length;z0++){
if (!ps[z0]){
ps[z0]=document.createElement(ps[0].nodeName);
obj.appendChild(ps[z0]);
}
p=ps[z0];
ps[z0].className=z0!=this.cnt?this.defcls:this.actcls;
if (html[z0]){
ps[z0].innerHTML=html[z0];
}
this.addevt(ps[z0],'mouseup','GoTo',z0);
this.addevt(ps[z0],'mouseover','mse',z0);
this.addevt(ps[z0],'mouseout','mse',z0);
this.pages[z0]=ps[z0];
}
}
},
mse:function(nu,e){
if (nu!=this.cnt){
this.pages[nu].className=e.type=='mouseout'?this.defcls:this.msecls;
}
}
}
new FadeSS({
ID:'tst', // the unique ID name of the parent node. (string)
PanelClassName:'panel', // the common class name of the panel elements. (string)
EffectDuration:1000, //(optional) the duration of the slide move animation in milli seconds. (digits, default = 1000)
HoldDuration:2000, //(optional) the duration of the auto rotation 'hold' in milli seconds. (digits, default = 1000)
Paginate:{ //(optional) an object defining pagination options. (object, default = no pagination)
ID:'Page1', // the unique ID name of the parent node containing the paginate elements. (string)
DefaultClassName:'default', // the default class name of the paginate elements. (string)
MouseOverClassName:'mseover', //(optional) the mouseover modifier class name of the paginate elements. (string, default = mouseover class name)
ActiveClassName:'active', //(optional) the 'active' modifier class name of the paginate elements. (string, default = active class name)
HTML:['1','2','3','4'] //(optional) innerHTML of each page element. (array, default = no or existing HTML)
}
});
/*]]>*/
</script>
</body>
</html>
New Comer (less than 5 posts)
Panel text and transition effect in Step Carousel
Posting Permissions
Reply With Quote
Bookmarks