自从开始学习前端后，平时看到浏览器上的一些出彩的控件都想自己实现一下O(∩_∩)O，不知大家有没有这个感觉。接下来就和大家分享一个，原控件来自百度翻译右下方，大家仔细找找应该能找到，如图所示：
感觉蛮有意思的，实现起来也不复杂，比较适合练手。好吧，废话不多说了，直接上代码吧。
html代码：
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset = 'utf-8'/>
<title>zoom</title>
<link type="text/css" href="https://www.jb51.net/zoom.css"/>
</head>
<body onload = "zoom()">
<div id = 'zoom'>
<span title = "分享....."></span>
<ul>
<li title="QQ空间"></li>
<li title="腾讯微博"></li>
<li title="新浪微博"></li>
<li title="人人网"></li>
<li title="百度"></li>
<li title="豆瓣网"></li>
<li title="搜狐"></li>
<li title="开心网"></li>
</ul>
</div>
<script type="text/javascript" src = "zoom.js"></script>
</body>
</html>
css代码：
复制代码 代码如下:
*{
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代码：
复制代码 代码如下: