JavaScript implementation Baidu translation collapsible share button list_javascript skills

Since I started learning front-end, I usually want to implement O(∩_∩)O myself when I see some outstanding controls on the browser. I wonder if you feel this way. Next, I will share one with you. The original control comes from the lower right corner of Baidu Translate. You should be able to find it if you search carefully, as shown in the picture:

It feels quite interesting and not complicated to implement, so it is more suitable for practicing. Okay, no more nonsense, let’s get straight to the code.

html code:

Copy code The code is as follows:

                                                                                                                                                                                                          ​ ​ ​


          

                                                                                                                                                                                                                                                    seenfer
                                                                                                                                                                                                                                                                                                                                            

                                       

                                        

& Lt; li tity = "ricker network" class = "li4" & gt; & lt;/li & gt;
                                                                                                                                                                                                                               

                                                                                                                                                                                                                                                       

& Lt; li title = "happy network" class = "li8" & gt; & lt;/li & gt;
                                                  
                                                                                                    





css code:

Copy code

The code is as follows:

*{
  margin:0px;
  padding:0px;
}
#zoom{
  position: absolute;
  top: 20px;
  right: 200px;
  border: 1px solid rgb(38,147,255);
  height: 40px;
  width: 40px;
}
#zoom > span{
  display: inline-block;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  width: 40px;
  background-image: url(sprite.png);
  background-repeat: no-repeat;
  background-position: -5px -7px;
  opacity: 0.8;
  filter:Alpha(opacity=50);/*IE78*/
}
#zoom ul{
  display: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 50px;
  list-style: none;
}
#zoom ul li{
  display: inline-block;
  *display: inline;/*IE7*/
  *zoom:1;/*IE7*/
  *margin-left: 5px;/*IE7*/
  width: 16px;
  height: 16px;
  margin-top: 12px;
  background-image: url(sprite.png);
  background-repeat: no-repeat;
}
#zoom .li1{
  background-position: -57px -20px;
}
#zoom .li2{
  background-position: -77px -20px;
}
#zoom .li3{
  background-position: -98px -20px;
}
#zoom .li4{
  background-position: -119px -20px;
}
#zoom .li5{
  background-position: -140px -20px;
}
#zoom .li6{
  background-position: -161px -20px;
}
#zoom .li7{
  background-position: -182px -20px;
}
#zoom .li8{
  background-position: -203px -20px;
}

#zoom li:hover{
  cursor: pointer;
  opacity: 0.8;
  filter:Alpha(opacity=50);/*IE78*/
}
#zoom span:hover{
  cursor: pointer;
  opacity: 1;
  filter:Alpha(opacity=100);/*IE78*/
}

js代码：

复制代码 代码如下:

var zoom = (function(){
var zoomDom = document.getElementById('zoom'),
        state = {opened: false, onaction: false, length: 0},
showSpan,
       ul;
if (zoomDom.firstElementChild) {
ShowSpan = zoomDom.firstElementChild;
ul = showSpan.nextElementSibling;
}else{ /*IE*/
ShowSpan = zoomDom.firstChild;
ul = showSpan.nextSibling;
}
/*Registration event method compatible with IE78*/
var addEvent = function(el, eventType, eventHandler){
If(el.addEventListener){
       el.addEventListener(eventType, eventHandler,false);
} else if(el.attachEvent){
​​ el.attachEvent('on' eventType, eventHandler);/*IE78*/
}
};
/* IE-compatible blocking default event method*/
var stopDefault = function(e){
If(e&&e.preventDefault){
e.preventDefault();
} else {
        window.event.returnValue = false;/*IE*/
}
};
/*Expand control*/
var onOpen = function(){
If(state.length>250){
​​ ul.style.display = 'inline-block';
       state.onaction = false; state.opened = true;
}else{
If(!state.onaction){ state.onaction = true;}
       state.length = 10;
zoomDom.style.width = state.length 'px';
setTimeout(onOpen, 0)
}
};
/*Close control*/
var onCollapse = function(){
If(state.length<41){
        state.onaction = false; state.opened = false;
}else{
If(!state.onaction){ state.onaction = true;}
       state.length -= 10;
zoomDom.style.width = state.length 'px';
​​​ setTimeout(onCollapse, 0);
}
};
/*Callback when clicking the trigger button*/
var onSpanClick = function(e){
StopDefault(e);
If(!state.onaction){
If(!state.opened){
onOpen();
}else{
         ul.style.display = 'none';
onCollapse();
}
}
};
return function(){
​ addEvent(showSpan, 'click', onSpanClick);
};
})();

The picture below is the picture used in css (picture taken directly from Baidu Translate^_^):

Download it, just change the name and put it in the root directory, or directly add two places in the css:

Copy code The code is as follows:

background-image: url(sprite.png);

changed to:

Copy code The code is as follows:

background-image: url(http://images.cnitblog.com/blog2015/680599/201503/110916459332808.png);

It is also possible to directly use the image resource I uploaded (thanks to the powerful Internet^_^).

The following is a demonstration of the effect I achieved:

Then let me talk about the main technical points in the writing process:

The control is compatible with IE7. I don’t have IE6 at hand, so I can’t test it. The main compatibility issues to be solved are marked in the code.
It uses css sprites technology, you should have discovered it by now^_^, good technology should be used.

Apply closures in JS to avoid global pollution.

In HTML, the script tag is placed at the bottom of the body. I will also notice this small detail (although they are all local resources ╮(╯▽╰)╭).
Okay, that’s it, but there is still room for further improvement in this small control. For example, you can use css3 attributes to achieve dynamic scaling of divs, you can componentize this control, and you can use the JQ framework to implement it more conveniently (JQ Practice) )etc.

The above is all the content shared with you in this article, I hope you will like it.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn