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">
.marquee{
position: relative;
overflow:hidden;
width: 200px; /*marquee width */
height: 200px; /*marquee height */
background-color:#FFFFCC;
border: 1px solid black;
padding: 2px;
padding-left: 4px;
}
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Simple Marquee (21-October-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk/
// A simple lightweight Marquee to scroll a DIV content within a parent DIV.
// The scroll is continious with no gaps between the scroll content.
// The scroll may be 'Vertical' or 'Horizontal' and there may be as many applications on a page as required.
// The script is light weight with a functioam code size of just 1.11K.
//****** Application Notes
// **** The HTML and CSS Code.
//
// The scroll content must be nested in a DIV element.
// This scroll content DIV must be nested within a parent DIV.
// This parent DIV must be assigned a unique ID name
// and CSS style position of 'relative' or 'absolute' and width and height
// defined by CSS class rule or inline style.
// The scroll content DIV may have its width and or height specified
// by a CSS class rule or inline style.
// The parent DIV is assigned a style overflow of 'hidden'
// and the scroll content DIV style a position of 'absolute' by the script.
// e.g.
// <div id="tst2" class="marquee" onMouseover="M2.Speed=0" onMouseout="M2.Speed=2">
// <div style="width: 98%;">
// <h4>Your scroller contents 1</h4>
// <h4>Your scroller contents 2</h4>
// <h4>Your scroller contents 3</h4>
// <h4>Your scroller contents 4</h4>
// <h4>Your scroller contents 5</h4>
// </div>
// </div>
//
// **** Initialising the Script.
//
// The script is initialised by assigning a new instance of the script to a global variable.
// Script options are passed as an object to function 'zxcMarquee' by the initisation call after the page has loaded.
// e.g.
// var M1=new zxcMarquee({
// ID:'tst1', // the unique ID name of the parent DIV. (string)
// Mode:'V', //(optional) the mode of execution, Horizontal' or 'Vertical'. (string, default = 'Vertical')
// Speed:2, //(optional) the speed of execution, 1 = slow, 10 = fast, 0 = stop. (digits, default = -1)
// DelayStart:2000 //(optional) the auto start in milli seconds. (digits, default = 10)
// });
//
// **** Controlling the Scoll.
//
// The scroll is controlled by changing the scroll speed by inline event calls.
// Changing the speed to 0 will stop the scroll,
// a speed greater than 0 will scroll clockwise,
// a speed less than than 0 will scroll anticlockwise.
// e.g
// <div id="tst1" class="marqueecontainer" onMouseover="M1.Speed=0" onMouseout="M1.Speed=2">
// where M1 is the global variable which has been assigned the script instance.
//
// ****** Functional Code(1.11K) - NO NEED to Change
function zxcMarquee(o){
this.mde=typeof(o.Mode)=='string'&&o.Mode.charAt(0)=='H'?'left':'top';
var p=document.getElementById(o.ID),oop=this,os=this.mde=='top'?'Height':'Width',dly=typeof(o.DelayStart)=='number'?o.DelayStart:10;
p.style.overflow='hidden';
this.divs=[p.getElementsByTagName('DIV')[0]];
this.divs[0].style.position='absolute';
this.sz=this.divs[0]['offset'+os];
this.divs[0].style[this.mde]=-this.sz+'px';
for (var nu=Math.ceil(p['offset'+os]/this.divs[0]['offset'+os])+1,z0=0;z0<nu;z0++){
this.divs[z0+1]=this.divs[0].cloneNode(true);
p.appendChild(this.divs[z0+1]);
this.divs[z0+1].style[this.mde]=this.sz*z0+'px';
}
this.nu=this.divs.length;
this.Speed=o.Speed||-1;
setTimeout(function(){ oop.scroll(); },dly);
}
zxcMarquee.prototype.scroll=function(){
for (var oop=this,pos,z0=0;z0<this.nu;z0++){
pos=parseInt(this.divs[z0].style[this.mde]);
if ((this.Speed<0&&pos<-this.sz)||(this.Speed>0&&pos>this.sz*(this.nu-2))){
pos+=this.sz*this.nu*(this.Speed<0?1:-1);
}
this.divs[z0].style[this.mde]=pos+this.Speed+'px';
}
setTimeout(function(){ oop.scroll(); },50);
}
/*]]>*/
</script>
</head>
<body>
<div id="tst1" class="marquee" onMouseover="M1.Speed=0" onMouseout="M1.Speed=2" style="width:110px;">
<div>
<img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" />
<img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook2.gif" />
<img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook3.gif" />
<img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook4.gif" />
</div>
</div>
<br />
<div id="tst2" class="marquee" onMouseover="M2.Speed=0" onMouseout="M2.Speed=2" style="height:140px;">
<div style="width:450px;">
<img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" />
<img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook2.gif" />
<img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook3.gif" />
<img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook4.gif" />
</div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
var M1=new zxcMarquee({
ID:'tst1', // the unique ID name of the parent DIV. (string)
Mode:'V', //(optional) the mode of execution, Horizontal' or 'Vertical'. (string, default = 'Vertical')
Speed:2, //(optional) the speed of execution, 1 = slow, 10 = fast, 0 = stop. (digits, default = -1)
DelayStart:2000 //(optional) the auto start in milli seconds. (digits, default = 10)
});
var M2=new zxcMarquee({
ID:'tst2',
Mode:'H',
Speed:-2 //(optional) the speed of execution, 1 = slow, 10 = fast, 0 = stop. (digits, default = -1)
});
/*]]>*/
</script>
</body>
</html>
New Comer (less than 5 posts)
2 Conveyor Belts on 1 website
Originally Posted by jscheuer1
Posting Permissions
Reply With Quote
Bookmarks