The beautiful Slider effect class is finally encapsulated successfully_javascript skills

Function description of the Slider class:
1. Can control the div existing on any page
2. The slider can also change the transparency while sliding, making the whole process smoother and more beautiful
3. It has strong controllability and can realize the sliding of divs of different sizes in different directions and speeds through multiple parameters
4. It is easy to call and can be initialized in one sentence. The looming control of the slider is even simpler. For details, see the code example
About Description of the implementation process of the Slider class:
I feel that today’s websites often use the so-called Web2.0 mode div looming effect. I wanted to implement one on the web page some time ago. After the attempt was successful, I wanted to encapsulate a class for future use. It can also be open to everyone to use. It just so happens that you can also learn JavaScript-like programming methods (my brother has been using Microsoft stuff before and is not familiar with JavaScript). I encountered some problems during the process, so I posted a post on 51js for help. Originally, I didn’t have high hopes, but I got the explanation and help from two friends, caudex and he1a2s0, and successfully solved the problem. I would like to express my heartfelt thanks to you two again. Of course, I also want to thank FlyKing for his disdain and ridicule. , because it also gave me great motivation.
Okay, let’s not talk nonsense. Although my implementation method is definitely not the best, and is even primitive and clumsy, it is implemented after all. I will present it to everyone. If you like it, use it. Or if you have a better method, please give me some advice. My email is douwenming@gmail.com. Welcome to contact me.

<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> <div id="wrap"> <div align="left" style="margin-bottom:3px"> <input type="button" id="showtop" onclick="topslider.show();this.style.display='none';document.getElementById('hidetop').style.display='';" value="灞"> </div> </div>