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检测浏览器flash版本的实现代码
Dec 06 Javascript
iScroll.js 使用方法参考
May 16 Javascript
15款最好的Bootstrap在线编辑器
Aug 03 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
详解js中==与===的区别
Jan 08 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
微信小程序 实现动态显示和隐藏某个控件
Apr 27 Javascript
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
Mar 09 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
Mar 11 Javascript
vue学习笔记之slot插槽基本用法实例分析
Feb 01 Javascript
微信小程序文章详情功能完整实例
Jun 03 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
BBS(php &amp; mysql)完整版(八)
2006/10/09 PHP
用PHP将数据导入到Foxmail的实现代码
2010/09/05 PHP
php switch语句多个值匹配同一代码块的实现
2014/03/03 PHP
PHP文件锁函数flock()详细介绍
2014/11/18 PHP
php进行支付宝开发中return_url和notify_url的区别分析
2014/12/22 PHP
PHP基于新浪IP库获取IP详细地址的方法
2017/05/04 PHP
JS获取scrollHeight问题想到的标准问题
2007/05/27 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
2012/03/04 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
2014/02/04 Javascript
利用JavaScript检测CPU使用率自己写的
2014/03/22 Javascript
Javascript 构造函数详解
2014/10/22 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
js实现模拟计算器退格键删除文字效果的方法
2015/05/07 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
深入理解js promise chain
2016/05/05 Javascript
JS类的定义与使用方法深入探索
2016/11/26 Javascript
vue自动化表单实例分析
2018/05/06 Javascript
解决vue keep-alive 数据更新的问题
2018/09/21 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
Python3读取文件常用方法实例分析
2015/05/22 Python
python opencv实现图片旋转矩形分割
2018/07/26 Python
Python嵌入C/C++进行开发详解
2020/06/09 Python
CSS3实现千变万化的文字阴影text-shadow效果设计
2016/04/26 HTML / CSS
新加坡最受追捧的体验平台:Hapz
2018/01/01 全球购物
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
Shell如何接收变量输入
2012/09/24 面试题
应届大学生的推荐信
2013/11/20 职场文书
饲料采购员岗位职责
2013/12/19 职场文书
2014年公司植树节活动方案
2014/03/04 职场文书
镇人大副主席民主生活会对照检查材料思想汇报
2014/10/01 职场文书
信访工作汇报材料
2014/10/27 职场文书
综合素质评价自我评价
2015/03/06 职场文书
小学安全工作总结2015
2015/05/18 职场文书
死亡诗社观后感
2015/06/05 职场文书
mongodb数据库迁移变更的解决方案
2021/09/04 MongoDB