javascript实现 百度翻译 可折叠的分享按钮列表
自从开始学习前端后，平时看到浏览器上的一些出彩的控件都想自己实现一下O(∩_∩)O，不知大家有没有这个感觉。接下来就和大家分享一个，原控件来自百度翻译右下方，大家仔细找找应该能找到，如图所示：
感觉蛮有意思的，实现起来也不复杂，比较适合练手。好吧，废话不多说了，直接上代码吧。
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代码：
*{
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;
}
/*兼容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，无法测试了，主要解决的兼容问题代码中都有标注。
采用了css sprites 技术，大家应该已经发现了吧^_^，好技术就要用。
JS中应用闭包，避免全局污染。
在html中script标签放到body底部，这种小细节俺也会注意到的（虽然都是本地资源╮(╯▽╰)╭）。
好吧，就是这些，不过这个小控件，还是有进一步完善的余地的，比如，可以使用css3属性来实现div的动态伸缩，可以将这个控件组件化，可以用JQ框架更加方便的实现（JQ练手）等等。
以上就是本文分享给大家的全部内容了，希望大家能够喜欢。
-
本文向大家介绍jquery mobile实现可折叠的导航按钮，包括了jquery mobile实现可折叠的导航按钮的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了jquery实现可折叠的导航按钮的具体代码，供大家参考，具体内容如下 功能： 当功能较多时，创建可折叠分组导航按钮。只需指定 data-role=" collapsible "创建可折叠面板 代码分析：
-
本文向大家介绍自定义百度分享的分享按钮，包括了自定义百度分享的分享按钮的使用技巧和注意事项，需要的朋友参考一下 代码很简单，主要是修改了下百度分享的部分代码，小伙伴们自己对比下。 以上就是本文的全部内容了，希望大家能够喜欢
-
本文向大家介绍ThinkPHP调用百度翻译类实现在线翻译，包括了ThinkPHP调用百度翻译类实现在线翻译的使用技巧和注意事项，需要的朋友参考一下 要实现ThinkPHP在线翻译功能，需要先在百度开发者中心注册一个API key，具体实现代码如下： action代码部分： html代码部分：
-
我想请教一下，就是我这个用的andesign Table 组件 我想实现的功能是这个列表里面的表头里面的每一列加上表头都是可折叠的，有什么好的思路可以实现吗？又或者有没有其他方法可以解决这个业务问题。 业务解决问题：核心就是这个列表是动态列表表头是后端返回回来的，而且表头里面的每一项都很多，导致用户进来需要拉取滚动条比较麻烦。 自己的想法：我试过放大整个table，或者表头可收缩放大缩小，亦或者进
-
本文向大家介绍用python实现百度翻译的示例代码，包括了用python实现百度翻译的示例代码的使用技巧和注意事项，需要的朋友参考一下 用python实现百度翻译，分享给大家，具体如下： 首先，需要简单的了解一下爬虫，尽可能简单快速的上手，其次，需要了解的是百度的API的接口，搞定这个之后，最后，按照官方给出的demo，然后写自己的一个小程序 打开浏览器 F12 打开百度翻译网页源代码： 我们可以
-
本文向大家介绍iOS实现列表折叠效果，包括了iOS实现列表折叠效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了iOS实现列表折叠效果的具体代码，供大家参考，具体内容如下 实现列表折叠效果其实比较简单，点击列表头部的时候，把返回列表行数设为 0，就是收起列表；再次点击列表头部，显示列表的行数，就展开了列表。 效果图 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支