Step 1 introduce the mootools framework
< Script Type = "Text/JavaScript" SRC = "Http://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js" > </ Script >
First, let's look at the Getting Started effect.
Demo 1 (image fading)<HTML> <br/> <body> <br/> <SCRIPT type = "text/JavaScript" src = "http://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"> </SCRIPT> <br/> <style type = "text/CSS"> <br/># slideshow-demo1 {<br/> width: 130px; <br/> Height: 90px; <br/> position: relative; <br/>}< br/> # slideshow-demo1 IMG {<br/> display: block; <br/> width: 130px; <br/> Height: 90px; <br/> position: absolute; <br/> top: 0; <br/> left: 0; <Br/> Z-index: 1; <br/>}< br/> </style> <br/> <Div id = "slideshow-demo1"> <br/> <br/> <br/> <br/> </div> <br/> <SCRIPT type =" text/JavaScript "> <br/>/* <! [CDATA [*/<br/> window. addevent ('domainready', function () {<br/> var Container = $ ('slideshow-demo1'); <br/> If (container) {<br/> var showduration = 3500; // interval <br/> var images = container. getelements ('img '); <br/> var currentindex = 0; <br/> var interval; <br/> // hide all images <br/> images. each (function (IMG, I) {<br/> if (I> 0) {<br/> IMG. set ('opacity ', 0); <br/>}< br/>}); <br/> var show = function () {<br/> images [curr Entindex]. Fade ('out'); // hide the current image <br/> images [currentindex = currentindex <images. Length-1? Currentindex + 1: 0]. fade ('in'); <br/> // switch to the next image and display it. The first image is returned when the current image is the last one <br/> }; <br/> window. addevent ('load', function () {<br/> interval = show. periodical (showduration); <br/> // periodical timer, which can regularly trigger a function <br/>}); <br/>}< br/> }) <br/>/*]> */<br/> </SCRIPT> <br/> </body> <br/> </ptml> <br/>
RunCode
Demo 2.1 (picture downward switch)<HTML> <br/> <body> <br/> <SCRIPT type = "text/JavaScript" src = "http://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"> </SCRIPT> <br/> <style type = "text/CSS"> <br/> # container1 {<br/> width: 130px; <br/> Height: 90px; <br/> position: relative; <br/> overflow: hidden; <br/>}< br/> # slideshow-demo2 {<br/> width: 130px; <br/> Height: 90px; <br/> position: absolute; <br/>}< br/># slideshow-demo2 img {<Br/> display: block; <br/> width: 130px; <br/> Height: 90px; <br/>}< br/> </style> <br/> <Div id = "container1"> <br/> <Div id = "slideshow-demo2"> <br/> <br/> <br/> <br/> </div> <br/> <script type = "text/JavaScript"> <br/>/* <! [CDATA [*/<br/> window. addevent ('domainready', function () {<br/> var Container = $ ('slideshow-demo2'); <br/> If (container) {<br/> var showduration = 3500; // interval <br/> var images = container. getelements ('img '); <br/> var currentindex = 0; <br/> var t_height = container. getelement ('img '). getcoordinates (). height; <br/> // getcoordinates () indicates the coordinates of the obtained elements: width, height, top, left, right, bottom <br/> var interval; <br/> var sho W = function () {<br/> currentindex = currentindex <images. Length-1? Currentindex + 1: 0 <br/> container. tween ('top',-(currentindex * t_height); <br/> // tween moves the top element slowly to the specified value <br/> }; <br/> window. addevent ('load', function () {<br/> interval = show. periodical (showduration); <br/> // periodical timer, which can regularly trigger a function <br/>}); <br/>}< br/> }) <br/>/*]> */<br/> </SCRIPT> <br/> </body> <br/> </ptml> <br/>
Run code
Code used
<HTML> <br/> <body> <br/> <SCRIPT type = "text/JavaScript" src = "http://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"> </SCRIPT> <br/> <style type = "text/CSS"> <br/> # container3 {<br/> width: 130px; <br/> Height: 90px; <br/> position: relative; <br/> overflow: hidden; <br/>}< br/> # slideshow-demo3 {<br/> width: 130px; <br/> Height: 90px; <br/> position: absolute; <br/>}< br/># slideshow-demo3 img {<Br/> display: block; <br/> width: 130px; <br/> Height: 90px; <br/>}< br/> </style> <br/> <Div id = "container3"> <br/> <Div id = "slideshow-demo3"> <br/> <br/> <br/> <br/> </div> <br/> <script type = "text/JavaScript"> <br/>/* <! [CDATA [*/<br/> window. addevent ('domainready', function () {<br/> var Container = $ ('slideshow-demo3'); <br/> If (container) {<br/> var showduration = 3500; // interval <br/> var images = container. getelements ('img '); <br/> var currentindex = 0; <br/> var interval; <br/> var t_height = container. getelement ('img '). getcoordinates (). height; <br/> // getcoordinates () indicates the coordinates of the obtained elements: width, height, top, left, right, bottom <br/> contain Er. set ('tween', {Duration: 'long', transition: <br/> 'bounce: out'}); <br/> // set the dynamic type of the element tween, out (jitter after completion), in (begin jitter), <br/> var show = function () {<br/> currentindex = currentindex <images. length-1? Currentindex + 1: 0 <br/> container. tween ('top',-(currentindex * t_height); <br/> // tween moves the top element slowly to the specified value <br/> }; <br/> window. addevent ('load', function () {<br/> interval = show. periodical (showduration); <br/> // periodical timer, which can regularly trigger a function <br/>}); <br/>}< br/> }) <br/>/*]> */<br/> </SCRIPT> <br/> </body> <br/> </ptml> <br/>
Run code
Supplemental code
Demo 2.3 (picture downward switch, dynamic effect, switch with numbers)<HTML> <br/> <body> <br/> <SCRIPT type = "text/JavaScript" src = "http://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"> </SCRIPT> <br/> <style type = "text/CSS"> <br/> # container4 {<br/> width: 130px; <br/> Height: 90px; <br/> position: relative; <br/> overflow: hidden; <br/>}< br/> # slideshow-demo4 {<br/> width: 130px; <br/> Height: 90px; <br/> position: absolute; <br/>}< br/># slideshow-demo4 img {<Br/> display: block; <br/> width: 130px; <br/> Height: 90px; <br/>}< br/> # list_number {<br/> position: absolute; <br/> bottom: 5px; <br/> right: 0; <br/> text-align: Right; <br/>}< br/> # list_number A {<br/> display: inline-block; <br/> text-align: center; <br/> width: 15px; <br/> Height: 15px; <br/> Font: normal 15px/15px Arial, Helvetica, sans-serif; <br/> color: # FFF; <br/> margin: 0 3px; <br/> background-color: #666; <B R/>}< br/> # list_number. current, <br/> # list_number A: hover {<br/> background-color: #900; <br/> text-Decoration: none; <br/>}< br/> </style> <br/> <Div id = "container4"> <br/> <Div id = "slideshow-demo4"> <br/> <br/> <br/> <br/> </div> <br/> <SCRIPT type = "text/JavaScript"> <br/>/* <! [CDATA [*/<br/> window. addevent ('domainready', function () {<br/> var Container = $ ('slideshow-demo4'); <br/> If (container) {<br/> var showduration = 3500; // interval <br/> var images = container. getelements ('img '); <br/> var currentindex = 0; <br/> var interval; <br/> var t_height = container. getelement ('img '). getcoordinates (). height; <br/> // getcoordinates () indicates the coordinates of the obtained elements: width, height, top, left, right, bottom <br/> contain Er. set ('tween', {Duration: 'long', transition: 'bounce: out'}); <br/> // you can specify the dynamic type of the element tween, out (shake later), in (start to shake), <br/> var list_number = new element ('div ', {"ID ": 'list _ number'}); <br/> images. each (function (IMG, I) {<br/> if (I> 0) {<br/> // generate Element A based on the number of images <br/> T_A = new element ('A', {<br/> href: 'javascript: void (0) ', <br/> HTML: I, <br/> events: {<br/> 'mouseover': function () {<br/> currentindex = I-1; <br/> select _ Hover (); <br/>}< br/>}); <br/> list_number.adopt (T_A); <br/> // adopt () add element a to list_number <br/>}< br/>}); <br/> var list_a = list_number.getelements ('A '); <br/> If (list_a.length> 0) {<br/> list_number.inject ($ ('ininer4'), 'bottom '); <br/> // inject () insert the list_number element to the end of the container4 element (container4 contains list_number) <br/> list_a [0]. addclass ('current'); <br/> // addclass () sets the style of the first a join to the selected style <br/>}< br/> Var select_hover = function () {<br/> currentindex = currentindex <images. Length-1? Currentindex: 0; <br/> list_a.removeclass ('current'); <br/> // remove the class of Element A in the list_a list <br/> list_a [currentindex]. addclass ('current'); <br/> container. tween ('top',-(currentindex * t_height); <br/>}< br/> var show = function () {<br/> currentindex = currentindex + 1; <br/> select_hover (); <br/>}; <br/> window. addevent ('load', function () {<br/> interval = show. periodical (showduration); <br/> // periodical timer, which can regularly trigger a function <br/>}); <br/>}< br/> }) <br/>/*]> */<br/> </SCRIPT> <br/> </body> <br/> </ptml> <br/>
Run code
Supplemental code
After a long time, I still failed to execute the mootools function on the current page. It conflicted with JQ of garden and tried several times, finally, I thought of a function used by the Big Brother situ to directly pop up the method for running Js in a new window. Here I directly reference it.
< Script Type = "Text/JavaScript" SRC = "Http://files.cnblogs.com/rubylouvre/myjs2.js" > </ Script >
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
