JavaScript实现可折叠分享按钮列表：兼容IE7的纯原生方案

可折叠分享按钮控件实现

开始学习前端开发后，每当在浏览器中看到设计出色的交互控件，我都倾向于尝试复现，不知各位是否有同感？接下来分享一个源自百度翻译右下角的控件示例，具体样式可参考下图。

该控件设计有趣且实现难度适中，非常适合作为练习项目。下面直接展示具体实现代码。

HTML结构代码如下：

<!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 = "分享....."></span>
<ul>
<li title="QQ空间" class="li1"></li>
<li title="腾讯微博" class="li2"></li>
<li title="新浪微博" class="li3"></li>
<li title="人人网" class="li4"></li>
<li title="百度" class="li5"></li>
<li title="豆瓣网" class="li6"></li>
<li title="搜狐" class="li7"></li>
<li title="开心网" class="li8"></li>
</ul>
</div>
<script type="text/javascript" src = "zoom.js"></script>
</body>
</html>

CSS样式定义

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{\n\n cursor: pointer;\n\n opacity: 0.8;\n\n filter:Alpha(opacity=50);/*IE78*/\n\n}\n\n#zoom span:hover{\n\n cursor: pointer;\n\n opacity: 1;\n\n filter:Alpha(opacity=100);/*IE78*/\n\n}

JavaScript交互逻辑

JavaScript逻辑代码如下：

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的注册事件方法*/
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的阻止默认事件方法*/
var stopDefault = function(e){
if(e&&e.preventDefault){
e.preventDefault();
} else {
window.event.returnValue = false;/*IE*/
    }
  };
/*展开控件*/
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)
    }
  };
/*关闭控件*/
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);
    } 
  };
/*点击触发按钮的回调*/
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);
  };
})();

下图展示了CSS中引用的图片资源（直接截取自百度翻译界面）：

下载该图片并重命名放置于项目根目录即可，或者直接将CSS中两处引用：

background-image: url(sprite.png);

修改为：

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

也可直接使用作者上传的在线图片资源（感谢互联网提供的便利）。

以下是实现后的效果演示：

接下来总结编写过程中的关键技术点：

控件已兼容至IE7版本（因无IE6环境未做测试），代码中已标注主要兼容处理逻辑。\n\n采用了css sprites 技术，大家应该已经发现了吧^_^，好技术就要用。

JS中应用闭包，避免全局污染。

在html中script标签放到body底部，这种小细节俺也会注意到的（虽然都是本地资源╮(╯▽╰)╭）。\n\n好吧，就是这些，不过这个小控件，还是有进一步完善的余地的，比如，可以使用css3属性来实现div的动态伸缩，可以将这个控件组件化，可以用JQ框架更加方便的实现（JQ练手）等等。

以上就是本文分享给大家的全部内容了，希望大家能够喜欢。