javascript实现 百度翻译 可折叠的分享按钮列表


Posted in Javascript onMarch 12, 2015

自从开始学习前端后,平时看到浏览器上的一些出彩的控件都想自己实现一下O(∩_∩)O,不知大家有没有这个感觉。接下来就和大家分享一个,原控件来自百度翻译右下方,大家仔细找找应该能找到,如图所示:

javascript实现 百度翻译 可折叠的分享按钮列表

感觉蛮有意思的,实现起来也不复杂,比较适合练手。好吧,废话不多说了,直接上代码吧。

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中用到的图片(直接从百度翻译上截的图^_^):

javascript实现 百度翻译 可折叠的分享按钮列表

大家下下来,改改名字放到根目录下就行了,或者直接将css中两处:

background-image: url(sprite.png);

改为:

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

直接使用我上传的这个图片资源也是可以的(感谢强大的互联网^_^)。

接下来是我实现的效果展示:

javascript实现 百度翻译 可折叠的分享按钮列表

接着说说,我在编写过程中的主要技术要点:

控件兼容到IE7,手头没有IE6,无法测试了,主要解决的兼容问题代码中都有标注。
采用了css sprites 技术,大家应该已经发现了吧^_^,好技术就要用。

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

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

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

Javascript 相关文章推荐
javascript中万恶的function实例分析
May 25 Javascript
JavaScript原生对象之Date对象的属性和方法详解
Mar 13 Javascript
微信小程序 闭包写法详细介绍
Dec 14 Javascript
原生js实现电商侧边导航效果
Jan 19 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
JavaScript适配器模式详解
Oct 19 Javascript
浅谈Vue下使用百度地图的简易方法
Mar 23 Javascript
vue 中动态绑定class 和 style的方法代码详解
Jun 01 Javascript
jQuery实现鼠标滑动切换图片
May 27 jQuery
vue 解决兄弟组件、跨组件深层次的通信操作
Jul 27 Javascript
Vue.js暴露方法给WebView的使用操作
Sep 07 Javascript
微信小程序实现列表左右滑动
Nov 19 Javascript
基于jquery实现的自动补全功能
Mar 12 #Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 #Javascript
window.open()实现post传递参数
Mar 12 #Javascript
js运动动画的八个知识点
Mar 12 #Javascript
js实现最短的XML格式化工具实例
Mar 12 #Javascript
微信中一些常用的js方法汇总
Mar 12 #Javascript
javascript实现checkBox的全选,反选与赋值
Mar 12 #Javascript
You might like
在JavaScript中调用php程序
2009/03/09 PHP
PHP指定截取字符串中的中英文或数字字符的实例分享
2016/03/18 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
Vue.js鼠标悬浮更换图片功能
2017/05/17 Javascript
Angular4开发解决跨域问题详解
2017/08/28 Javascript
详解vue中引入stylus及报错解决方法
2017/09/22 Javascript
vue使用一些外部插件及样式的配置代码
2019/11/18 Javascript
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
Python中的高级数据结构详解
2015/03/27 Python
对Python3+gdal 读取tiff格式数据的实例讲解
2018/12/04 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
Python tkinter 下拉日历控件代码
2020/03/04 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
Pandas中DataFrame交换列顺序的方法实现
2020/12/14 Python
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
CSS实现半透明边框与多重边框的场景分析
2019/11/13 HTML / CSS
阿波罗盒子:Apollo Box
2017/08/14 全球购物
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
美德好少年事迹材料
2014/01/19 职场文书
教师求职自荐信
2014/03/09 职场文书
安全教育月活动总结
2014/05/05 职场文书
中学清明节活动总结
2014/07/04 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
经营场所使用证明
2015/06/19 职场文书
大学生党课感想
2015/08/11 职场文书
2016年秋季运动会广播稿
2015/12/21 职场文书
日本动漫十大公认神作:第五现已全网禁播,《死亡笔记》在榜
2022/03/18 日漫
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android