Home > Developer > JavaScript
Slider class function description:
1. You can control the div on any page.
2. slider can also achieve transparency changes while sliding, making the entire process smoother and more beautiful.
3. Strong controllability. sliding at different directions and speeds of div with different sizes is achieved through multiple parameters
4. Easy to call. initialization can be completed in one sentence. The invisibility control of the slider is simpler. For details, see the code example.
Description of the implementation process of the Slider class:
I feel that today's websites often use divs in the so-called Web2.0 mode to hide the effect. The previous section has to implement one on the webpage. After successful attempts, I want to encapsulate a class for future use, it can also be opened for use by everyone. You can also learn javascript-like programming methods (I have been using Microsoft's stuff before and I am not familiar with javascript). I encountered some problems in the process, I posted a post on 51js for help, but I didn't report much hope. The results were explained and helped by two friends, caudex and he1a2s0. The problem was solved successfully, I would like to express my heartfelt thanks to both of you again. Of course, I would also like to express my gratitude for the disdain and ridicule of the FlyKing hero, because it also gave me great motivation.
Well, I don't want to talk about it. Although my implementation method is definitely not the best, it is even primitive and clumsy, it is actually implemented and presented to everyone, if you have a view, use it. Or there is a better way to give advice, my mailbox douwenming@gmail.com, welcome to contact.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = gb2312 "/> <title> untitled document </title> <STYLE> body {background-color: # EEEEEE; margin: 0px; text-align: center ;} # wrap {width: 736px; background-color: # FFFFFF; overflow: hidden; margin: 12px; padding: 12px ;}# topcontainer {height: 80px; width: 732px; background-color: #99FF66; border: 1px solid #79F200;} # bodycontainer {height: 400px; width: 100%; margin-top: 12px;} # bottomcontainer {height: 60px; width: 100%; margin-top: 12px ;}# topwrap {width: 100% ;}# leftcontainer {background-color: #99FF66; height: 400px; width: 120px; float: left; border: 1px solid #79F200;} input {background-color: #99FF66; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #79F200; border-right-color: #79F200; border-bottom-color: #79F200; border-left-color: #79F200; line-height: 28px; background-position: center; height: 30px ;} </STYLE> </pead> <body> <input type = "button" id = "showtop" onclick = "topslider. show (); this. style. display = 'none'; document. getElementById ('etetop '). style. display = '';" value = "Expand top"/> <input type = "button" id = "hidetop" value = "Close Top" onclick = "topslider. hide (); this. style. display = 'none'; document. getElementById ('showtop '). style. display = '';" style = "display: none"/> <input type = "button" id = "showleft" value = "show left" onclick = "leftslider. show (); this. style. display = 'none'; document. getElementById ('eleeleft '). style. display = '';"/> <input type = "button" id = "hideleft" value = "Close the left side" onclick = "leftslider. hide (); this. style. display = 'none'; document. getElementById ('showleft '). style. display = '';" style = "display: none"/> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Slider class call description:
// Instructions on how to use this code:
// The code above can be encapsulated into a separate js file and then included in the page
// Use the following code for slider initialization. Multiple slider can be used for a single page. The following code must be before the bottom of the page </body>; otherwise, an error may be reported.
Var topslider = new slider ('topiner iner ', 1,398,120,); var leftslider = new slider ('leftcontainer', 20 );
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
// The meanings of parameters are displayed at the top of the Code.
// You can use either of the following methods to control the slider action:
// One is to use the name declared during initialization, such as topslider. show (), topslider. hide ()
// You can use slider. names [0]. show (), slider. names [0]. hide (). The subscript depends on the order in which the slider is initialized.
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
