Since I started learning the front-end, I usually see some outstanding controls on the browser that I want to implement O(∩_∩)O by myself. I wonder if you have this feeling. Next, I will share with you one. The original control comes from the bottom right of Baidu Translation. You can find it carefully, as shown in the figure:
It feels quite interesting, not complicated to implement, and is more suitable for practicing. OK, let’s not talk much, just upload the code.
html code:
The code copy is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset = 'utf-8'/>
<title>zoom</title>
<link rel="stylesheet" type="text/css" href="zoom.css"/>
</head>
<body onload = "zoom()">
<div id = 'zoom'>
<span title = "Share..."></span>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript" src = "zoom.js"></script>
</body>
</html>
css code:
The code copy 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 code:
The code copy is as follows:
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;
}
/*IE78-compatible registration event method*/
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 default event blocking 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 the 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);
}
};
/*Click the callback of 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 following picture is the picture used in css (image ^_^ directly from Baidu Translation):
Everyone, just change the name and put it in the root directory, or directly put two places in the css:
The code copy is as follows:
background-image: url(sprite.png);
Change to:
The code copy is as follows:
background-image: url(http://images.cnitblog.com/blog2015/680599/201503/110916459332808.png);
It is also OK to use the image resource I uploaded directly (thanks to the powerful Internet^_^).
Next is the effect I achieved:
Let’s talk about my main technical points during the writing process:
The control is compatible with IE7, and there is no IE6 on hand, so it cannot be tested. The main compatibility problems solved are marked in the code.
With the use of css sprites technology, you should have discovered it ^_^, good technology needs to be used.
Apply closures in JS to avoid global pollution.
In the html script tag, I will also notice this small detail (although they are all local resources()).
Well, that's it, but this little control still has room for further improvement. For example, you can use the css3 attribute to achieve dynamic scaling of div, you can componentize this control, and use the JQ framework to implement it more conveniently (JQ practice), etc.
The above is all the content shared by this article, I hope you like it.