Since beginning to learn the front end, usually see some of the browser's brilliant control to realize the O (∩_∩) o, I do not know if we have this feeling. Next to share with you, the original control from Baidu translation right below, we carefully look for should be able to find, as shown in the picture:
The feeling is very interesting, realize also not complex, more suitable for practicing. OK, no more nonsense, directly on the code.
HTML code:
Copy Code code as follows:
<! DOCTYPE html>
<meta charset = ' Utf-8 '/>
<title>zoom</title>
<link rel= "stylesheet" type= "Text/css" href= "Zoom.css"/>
<body onload = "zoom ()" >
<div id = ' Zoom ' >
<span title = "Share ..." ></span>
<ul>
<li title= "QQ space" class= "Li1" ></li>
<li title= "Tencent Weibo" class= "Li2" ></li>
<li title= "Sina Weibo" class= "Li3" ></li>
<li title= "Renren" class= "Li4" ></li>
<li title= "Baidu" class= "Li5" ></li>
<li title= "Douban" class= "Li6" ></li>
<li title= "Sohu" class= "Li7" ></li>
<li title= "Kaixin" class= "Li8" ></li>
</ul>
</div>
<script type= "text/javascript" src = "zoom.js" ></script>
</body>
CSS code:
Copy Code code 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:
Copy Code code 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;
}
/* Compatible with IE78 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*/
}
};
/* Compatible with IE's block 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);
}
};
/* Click on the trigger button callback * *
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 image is used in the CSS image (directly from the Baidu translation of the cut Figure ^_^):
Everyone down, change the name to the root directory on the line, or directly to the two places in the CSS:
Copy Code code as follows:
Background-image:url (sprite.png);
To
Copy Code code as follows:
Background-image:url (http://images.cnitblog.com/blog2015/680599/201503/110916459332808.png);
It is also possible to use this image resource that I uploaded directly (thanks to the powerful internet ^_^).
The next thing I've achieved is a display of results:
Next, I am writing the main technical points in the process:
Control is compatible to IE7, there is no IE6 on hand, unable to test, the main solution of the compatibility problem code are labeled.
The use of CSS sprites technology, we should have found the bar ^_^, good technology will be used.
JS in the application of closures to avoid global pollution.
In HTML, the script tag is placed at the bottom of the body, and I will notice the small details (although all local resource ╮(╯▽╰)╭).
Well, that's all, but this little control, there is still a further refinement of the scope, for example, you can use the CSS3 property to implement a div dynamic expansion, you can make this control component, you can use the JQ framework more convenient implementation (JQ practicing) and so on.
The above is the whole content that this article shares to everybody, hope everybody can like.
