<! Doctype HTML public "-// W3C // dtd html 4.01 // en" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<Head>
<Title> JS Code for 10 dynamic images-effect Preview (7) </title>
<Meta http-equiv = "imagetoolbar" content = "no">
<Style type = "text/CSS">
HTML {
Overflow: hidden;
}
Body {
Position: absolute;
Margin: 0px;
Padding: 0px;
Background: #111;
Width: 100%;
Height: 100%;
}
# Center {
Position: absolute;
Left: 50%;
Top: 50%;
}
# Slider {
Position: absolute;
Width: 820px;
Height: 333px;
Left:-pixel PX;
Top:-186px;
Overflow: hidden;
Background: #000;
Border: 20px solid #000;
}
# Slider. Slide {
Position: absolute;
Top: 0px;
Height: 333px;
Width: 500px;
Background: #000;
Overflow: hidden;
Border-left: #000 solid 1px;
Cursor: default;
}
# Slider. Title {
Color: # f80;
Font-weight: bold;
Font-size: 1.2em;
Margin-Right: 1.5em;
Text-Decoration: none;
}
# Slider. backgroundtext {
Position: absolute;
Width: 100%;
Height: 100%;
Top: 100%;
Background: #000;
Filter: alpha (opacity = 40 );
Opacity: 0.4;
}
# Slider. Text {
Position: absolute;
Top: 1%;
Top: 100%;
Color: # FFF;
Font-family: verdana, Arial, Helvetica, sans-serif;
Font-size: 0.9em;
Text-align: justify;
Width: 470px;
Left: 10px;
}
# Slider. diapo {
Position: absolute;
Filter: alpha (opacity = 100 );
Opacity: 1;
Visibility: hidden;
}
</Style>
<SCRIPT type = "text/JavaScript">
/* === Slider namespace === */
VaR slider = function (){
/* = Private methods = */
Function getelementsbyclass (object, Tag, classname ){
VaR o = object. getelementsbytagname (TAG );
For (VAR I = 0, n = O. length, ret = []; I <n; I ++ ){
If (O [I]. classname = classname) ret. Push (O [I]);
}
If (Ret. Length = 1) ret = RET [0];
Return ret;
}
Function setopacity (OBJ, O ){
If (obj. filters) obj. Filters. Alpha. Opacity = math. Round (O );
Else obj. style. Opacity = o/0/100;
}
/* === Slider constructor === */
Function slider (ocont, speed, IW, IH, OP ){
This. Slides = [];
This. Over = false;
This. S = This. S0 = speed;
This. IW = IW;
This. iH = ih;
This. Op = op;
This. OC = Document. getelementbyid (ocont );
This. FRM = getelementsbyclass (this. oC, 'div ', 'slide ');
This. NF = This. frm. length;
This. Resize ();
For (VAR I = 0; I <this. NF; I ++ ){
This. slides [I] = new slide (this, I );
}
This. OC. Parent = this;
This. view = This. slides [0];
This. z = This. mx;
/* = On mouse out event = */
This. OC. onmouseout = function (){
This. Parent. mouseout ();
Return false;
}
}
Slider. Prototype = {
/* = Animation loop = */
Run: function (){
This. Z + = This. Over? (This. Mn-This. Z) *. 5: (this. mx-This. Z) *. 5;
This. View. Calc ();
VaR I = This. NF;
While (I --) This. slides [I]. Move ();
},
/* = Resize = */
Resize: function (){
This. Wh = This. OC. clientwidth;
This. ht = This. OC. clientheight;
This. wR = This. Wh * This. IW;
This. r = This. HT/This. wr;
This. MX = This. Wh/This. NF;
This. Mn = (this. Wh * (1-This. IW)/(this. NF-1 );
},
/* = Rest = */
Mouseout: function (){
This. Over = false;
Setopacity (this. View. IMG, this. OP );
}
}
/* === Slide constructor === */
Slide = function (parent, n ){
This. Parent = parent;
This. n = N;
This. X0 = This. X1 = N * parent. mx;
This. V = 0;
This. Loaded = false;
This. CPT = 0;
This. Start = new date ();
This. OBJ = parent. frm [N];
This.txt = getelementsbyclass (this. OBJ, 'div ', 'text ');
This. IMG = getelementsbyclass (this. OBJ, 'img ', 'diapo ');
This. BKG = Document. createelement ('div ');
This. BKG. classname = 'backgroundtext ';
This. obj. insertbefore (this. BKG, this.txt );
If (n = 0) This. obj. style. borderleft = 'none ';
This. obj. style. Left = math. Floor (this. X0) + 'px ';
Setopacity (this. IMG, parent. OP );
/* = Mouse events = */
This. obj. Parent = this;
This. obj. onmouseover = function (){
This. Parent. Over ();
Return false;
}
}
Slide. Prototype = {
/* = Target positions = */
Calc: function (){
VaR that = This. parent;
// Left slides
For (VAR I = 0; I <= This. N; I ++ ){
That. slides [I]. X1 = I * That. Z;
}
// Right slides
For (VAR I = This. n + 1; I <that. NF; I ++ ){
That. slides [I]. X1 = That. Wh-(that. NF-I) * That. Z;
}
},
/* = Html Animation: Move slides = */
Move: function (){
VaR that = This. parent;
VaR S = (this. x1-This. X0)/that. s;
/* === Lateral slide === */
If (this. N & math. Abs (s)>. 5 ){
This. obj. style. Left = math. Floor (this. x0 + = s) + 'px ';
}
/* = Vertical text = */
VaR v = (this. n <that. NF-1 )? That. slides [This. n + 1]. x0-This. x0: That. Wh-This. x0;
If (math. Abs (V-This. v)>. 5 ){
This. BKG. style. top = this.txt. style. top = math. floor (2 + that. ht-(V-that. z) * That. ih * That. r) + 'px ';
This. V = V;
This. CPT ++;
} Else {
If (! This. Pro ){
/* = Adjust speed = */
This. Pro = true;
VaR TPS = new date ()-This. Start;
If (this. CPT> 1 ){
That. S = math. Max (2, (28/(TPS/This. CPT) * That. S0 );
}
}
}
If (! This. Loaded ){
If (this. IMG. Complete ){
This. IMG. style. Visibility = 'visible ';
This. Loaded = true;
}
}
},
/* = Light = */
Over: function (){
This. Parent. Resize ();
This. Parent. Over = true;
Setopacity (this. Parent. View. IMG, this. Parent. OP );
This. Parent. view = this;
This. Start = new date ();
This. CPT = 0;
This. Pro = false;
This. Calc ();
Setopacity (this. IMG, 100 );
}
}
/* = Public method-script initialization = */
Return {
Init: function (){
// Create instances of scyclers here
// Parameters: htmlcontainer name, speed (2 fast-20 slow), horizontal ratio, vertical text ratio, opacity
This. S1 = new slider ("Slider", 12, 1.84/3, 1/3. 2, 70 );
Setinterval ("Slider. s1.run ();", 16 );
}
}
}();
</SCRIPT>
</Head>
<Body>
<Div id = "center">
<Div id = "Slider">
<Div class = "slide">
<Div class = "text"> <SPAN class = "title"> the best </span> the offspring
A customized orbiter, o your ostem arose as the best balanced home for our
Plans. So we submitted to its conditions. </div>
</Div>
<Div class = "slide">
<Div class = "text"> <SPAN class = "title"> prototype </span> o your ostem's deep impulse
Flow is selectively regulated by a molecule originated in the prototype
Model, that creates its own Variational Principles, as oriented by
First local generation of terminable androids. </div>
</Div>
<Div class = "slide">
<Div class = "text"> <SPAN class = "title"> has been reduced </span> uses red hosts
Come out nicely after only two cycles now. Their size has been CED
To a half the original as planned, and indeed they show an evolutionary
Advantage in the process of fixing self-generated instructions. Plus,
They are beautiful. </div>
</Div>
<Div class = "slide">
<Div class = "text"> <SPAN class = "title"> by close-alikes </span> now I have
Regained hopes in someday finding myself surrounded by close-alikes
Us. However, they will not be audible, at least not in my life span. We
Resolved the low freq vibration a superior solution for our communicational
Goals... </div>
</Div>
<Div class = "slide">
<Div class = "text"> <SPAN class = "title"> to bear </span> we did not distinct CT
Their surface to produce such a carbon powder coat, though this is
Best model so far. I shall have to bear with the inconveniences. They
Seem to establish a parallel communication through that carbon coat and
I find myself unable to decodify the signal into anything meaningful.
</Div>
</Div>
<Div class = "slide">
<Div class = "text"> <SPAN class = "title"> the zero level </span> today a set
Of vibration came up from the zero level; we recommend CT to launch the transitional
Program in no longer than five basetime units. psykesoma? Galore and we'll
Betray our very nature into infinite, unending 2D surfaces. We do need
That vibration, and we will conquer its source. </div>
</Div>
<Div class = "slide">
<Div class = "text"> <SPAN class = "title"> beautifully </span> to keep my sanity
I wear the tactile sensors all the time. They translate beautifully; I
Can even see distances while still on psykesoma. This was quite a discovery.
We have grown more adaptable than expected. </div>
</Div>
<Div class = "slide">
<Div class = "text"> <SPAN class = "title"> uneasy to match </span> yewoona had
To travel farther and longer than I did. Her base orbiter was set to keep
A complex combinational path that made it uneasy to match our circuits.
But her nature showed stronger than programmed. </div>
</Div>
<Div class = "slide">
<Div class = "text"> <SPAN class = "title"> adapted to serve </span> keep feeding
Them. We will never be this lucky again; An autogenerated species adapted
To serve all our needs! </Div>
</Div>
<Div class = "slide">
<Div class = "text"> <a class = "title" href = "http://www.dhteumeuleu.com">
Soonest </a> "Blood is dark red, iron dark blue, This tale is blissful
And so are you ". I shoshould get to the hotel at soonest. The agency guy
Must be there already, with some luck we'll have some nice dinner on him.
How's that? </Div>
</Div>
</Div>
</Div>
<SCRIPT type = "text/JavaScript">
/* = Start script = */
Slider. INIT ();
</SCRIPT>
<SPAN class = spanclass style = "display: none">
<SCRIPT> document. Write ("
<SCRIPT type = "text/JavaScript" src = "http://acount.pconline.com.cn/wzcount/artbrowse.php? Id = 1421645 & response = 1 "> </SCRIPT>
</Span>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
