Method to invoke:
First you have to link the script to your page, or you can call the link below directly. Of course, it's best to download it to your own machine.
Copy Code code as follows:
<script type= "Text/javascript" src= "Http://www.aeroom.org/include/scripts/scrollingAD.js" ></script>
Here is the first way to use it, which may seem a bit cumbersome, but requires only two lines of code;
Copy Code code as follows:
var samplediv = new Scrollingad ("divID", MB, "yellow", "up", +, N, true);
Samplediv.move ();
This creates an uninterrupted loop-scrolling area based on a DIV object id= "divID" in the document. The range is 200px, height is 100px, background color is yellow (do not worry about your English is not good, you can use the "#ff00ff" format), the direction of scrolling up. In fact, you can also choose to scroll to the left, as long as the "up" changed to "leave" on the line. But scrolling right and down is not supported, so do not try to "right" and "down"-in fact, to achieve these two directions is also very easy, but the individual feel less practical, so did not do--each 1px rolling delay time is 10ms, that is, the ideal state is rolling 100px per second. The 20px is paused once per scroll, and the time of each pause is 2 seconds. and supports mouse hover.
The order of the parameters mentioned above must be strictly adhered to, that is to say, in the order listed below. If you want to be lazy, use a comma to skip over:
Copy Code code as follows:
1, the layer ID, the necessary parameters, do not fill or spelling errors will be an error;
2, the width of the scrolling area, the default value is 200px, all the default values can be modified in Scrollingad;
3, the height of the scrolling area, the default value is 50px;
4, background color, the default value is "Transparent", that is, transparent;
5, the direction, optional value "Up/left";
6, each rolling 1px delay time, the default value of 20, unit is ms--this value larger scrolling slower;
7, each rolling limit of time after the stagnation, the unit is MS, the default value of 2000, that is 2 seconds-if you do not want to stagnate, it set to 0 on the line;
8, the distance between two times of stagnation, the default value is a screen. That is, if you set the direction of "up", the default value is equal to the height of the scrolling area, otherwise the direction is "left", then the default value is the width of the scrolling region;
9, whether hovering, the default is true, this you do not fill in the matter;
The second approach is this:
Copy Code code as follows:
var samplediv = new Scrollingad ("divID");
Samplediv.move ();
This is all the default values, but you should feel that you have to get rid of a parameter, so you can:
var samplediv = new Scrollingad ("divID");
Samplediv.width = 500;
Samplediv.height = 100;
Samplediv.bgcolor = "Red";
Samplediv.direction = "Left";
Samplediv.delay = 10;
Samplediv.pausetime = 1000;
Samplediv.size = 50;
Samplediv.ishover = false;
Samplediv.move ();
Of course you don't have to write it all up like this, you just have to change the necessary parameters. If you use the first method to create a scrolling area, but you have modified it later in this way, take the following.
Note that you should use this order to create this scrolling area:
<ptml> <pead> <title> Effect demo </title> </pead> <body> <p> build Layer </p> <div id= "Samplediv" > Of course you don't have to write it all up like this, you just need to change the necessary parameters. If you use the first method to create a scrolling area, but you have modified it later in this way, take the following. </div> <p> then invoke the script file </p> <script type= "Text/javascript" > Function Scrollingad (_id, _width, _ Height, _bgcolor, _direction, _delay, _pausetime, _size, _ishover) {this.id = _id; This.width = _width; This.height = _height; This.bgcolor = _bgcolor; This.direction = _direction; This.delay = _delay; This.pausetime = _pausetime; This.size = _size; This.object = null; This.ismove = true; if ((This.id = "") | | (this.id = null)) {Alert ("You must enter an ID for the object to create a scrolling area!") "); This.ismove = false; return false; } if (document.getElementById (this.id)) { This.object = document.getElementById (this.id); } else {Window.alert ("Scrolling region creation failed!") \ nplease confirm that "+ This.id +" is spelled incorrectly. "); This.ismove = false; return false; } ScrollingAD.prototype.checkNumber = function (_attribute, defaultvalue) {if (isNaN (_attribute)) { return defaultvalue; else {return (typeof (parseint (_attribute) = = "Number")? parseint (_attribute): defaultvalue); } ScrollingAD.prototype.move = function () {if (This.ismove = false) return false; var defaultwidth = 200; var defaultheight = 50; var defaultdelay = 20; var defaultpausetime = 2000; var defaultishover = true; var defaultbgcolor = "Transparent"; var defaultdirection = "Up"; This.width = This.checknumber (This.width, defaultwidth); This.height = This.checknumber (This.height, defaultheight); ThIs.delay = This.checknumber (This.delay, Defaultdelay); This.pausetime = This.checknumber (This.pausetime, defaultpausetime); This.ishover = (typeof (this.ishover) = = "Boolean")? This.isHover:defaultIsHover; if (this.direction = = "Left") {this.size = This.checknumber (this.size, this.width); else {this.size = This.checknumber (this.size, this.height); } if ((This.bgcolor = null) | | (typeof (This.bgcolor) = = undefined)) {this.bgcolor = Defaultbgcolor; else {this.bgcolor = This.bgcolor; } if ((this.direction = null) | | (typeof (this.direction) = = undefined)) {this.direction = defaultdirection; else {this.direction = (This.direction.search (^up$) | ( ^left$)/gi)!=-1)? This.direction.toLowerCase (): defaultdirection; }//create scrolling area; with (this.object) {style.display = ' block '; Style.wiDTH = This.width + "px"; Style.height = this.height + "px"; Style.overflow = "hidden"; Style.backgroundcolor = This.bgcolor; } if (this.direction = = "Up") {This.object.innerHTML = "<div id=\" "+ this.id +" _mirror\ ">" + this. object.innerhtml + "</div>" + "<div>" + This.object.innerHTML + "</div><input type=\" hidden\ "value =\ "1\" "id=\" "+ this.id +" _ishover\ "/>"; else {This.object.innerHTML = "<span id=\" "+ this.id +" _mirror\ ">" + This.object.innerHTML + "</sp An> "+" <span> "+ This.object.innerHTML +" </span><input type=\ "hidden\" value=\ "1\" "id=\" "+ This.id + "_ishover\"/> "; } if (document.getElementById (this.id)) {var evalstring; if (this.direction = = "Up") {evalstring = "scrolltoup (\" "+ this.id +" \ "," + This.ishover + "," + this.de Lay + "," + This.size + "," + This.pausetiMe + ", 0)"; else {evalstring = "scrolltoleft (\" "+ this.id +" \ "," + This.ishover + "," + This.delay + "," + this.) Size + "," + This.pausetime + ", 0)"; eval (evalstring); else {return false; The function Pixeltonum (_string) {//is used to remove the PX after the value and convert it to a number. if (_string.slice (_string.length-2) = = "px") {return parseint (_string.slice (0, (_string.length-2))); else {return _string; } function Scrolltoleft (_id, _ishover, _delay, _size, _pausetime, _s) {var obj = Document.getelem Entbyid (_id); var mirror = document.getElementById (_id + "_mirror"); if (_size* (1 + parseint (_s)) + pixeltonum (mirror.style.marginLeft) >= 0) {var evalstring =_id + "_timer = Window.settimeout (function () {Scrolltoleft (\ "" + _id + "\", "+ _ishover +", "+ _delay +", "+ _size +", "+ _pauseti Me + ", "+ _s +");}, "+ _delay +"); if (_ishover) {mirror.onmouseover = function () {document.getElementById (_id + "_ishover"). Value = 0;} Mirror.onmouseout = function () {document.getElementById (_id + "_ishover"). Value = 1;} var step = parseint (document.getElementById (_id + "_ishover"). Value); Mirror.style.marginLeft = (Pixeltonum (mirror.style.marginLeft)-Step) + "px"; Eval ("var" + evalstring); else {Mirror.style.marginLeft = (Pixeltonum (mirror.style.marginLeft)-1) + "px"; Eval ("var" + evalstring); } else {if (mirror.offsetwidth + pixeltonum (mirror.style.marginLeft) >= 0) { _s + 1; Window.settimeout (function () {Scrolltoleft (_id, _ishover, _delay, _size, _pausetime, _s)}, _pausetime); } else {Mirror.style.marginLeft = Mirror.offsetwidth + pixeltonum (mirror.style.marginLeft) + "px"; Window.settimeout (function () {Scrolltoleft (_id, _ishover, _delay, _size, _pausetime, 0)}, _pausetime); }} function Scrolltoup (_id, _ishover, _delay, _size, _pausetime, _s) {var obj = Docume Nt.getelementbyid (_id); var mirror = document.getElementById (_id + "_mirror"); if (_size* (1 + parseint (_s)) + pixeltonum (MIRROR.STYLE.MARGINTOP) >= 0) {var evalstring =_id + "_timer = Window.settimeout (function () {Scrolltoup (\ "" + _id + "\", "+ _ishover +", "+ _delay +", "+ _size +", "+ _pausetime + "," + _s + ");}," + _delay + "); if (_ishover) {mirror.onmouseover = function () {document.getElementById (_id + "_ishover"). Value = 0;} Mirror.onmouseout = function () {document.getElementById (_id + "_ishover"). Value = 1;} var step= parseint (document.getElementById (_id + "_ishover"). Value); Mirror.style.marginTop = (Pixeltonum (MIRROR.STYLE.MARGINTOP)-Step) + "px"; Eval ("var" + evalstring); else {Mirror.style.marginTop = (Pixeltonum (mirror.style.marginTop)-1) + "px"; Eval ("var" + evalstring); } else {if (mirror.offsetheight + pixeltonum (mirror.style.marginTop) >= 0) { _s + 1; Window.settimeout (function () {Scrolltoup (_id, _ishover, _delay, _size, _pausetime, _s)}, _pausetime); else {Mirror.style.marginTop = mirror.offsetheight + pixeltonum (mirror.style.marginTop) + "px";; Window.settimeout (function () {Scrolltoup (_id, _ishover, _delay, _size, _pausetime, 0)}, _pausetime); <p> last established rolling area </p> <sCript type= "Text/javascript" >//<! [cdata[var samplediv = new Scrollingad ("Samplediv"); Samplediv.width = 200; Samplediv.height = 20; Samplediv.bgcolor = "Yellow"; Samplediv.move (); ]]> </script> <p> If the foot of this newspaper is wrong, probably because my website speed connection too slow reason, just refresh the page on the line. </p> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Tip: You can modify some of the code before running
Update:
You can now use a percentage to define the size parameter, like this:
var samplediv = new Scrollingad ("Samplediv");
Samplediv.size = "50%"; note that you must enclose quotes, or you will get an error.
Samplediv.move ();
The effect is that a loop only scrolls two times, and the same time after a cycle, the size set to "100%" on the line. However, it is not recommended to set the percentage arbitrarily, try to set the number that matches the row count, otherwise there may be an unexpected blank.
Of course, the number is still supported:)
