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 相关文章推荐
网页里控制图片大小的相关代码
Jun 13 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
Jan 27 Javascript
jQuery给元素添加样式的方法详解
Dec 30 Javascript
简单实现node.js图片上传
Dec 18 Javascript
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
Oct 12 Javascript
js操作二进制数据方法
Mar 03 Javascript
js使用Promise实现简单的Ajax缓存
Nov 14 Javascript
详解vue-cli3 中跨域解决方案
Apr 10 Javascript
详解Vue依赖收集引发的问题
Apr 22 Javascript
js实现简易ATM功能
Oct 27 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
攻克CakePHP系列一 连接MySQL数据库
2008/10/22 PHP
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
jquery miniui 教程 表格控件 合并单元格应用
2012/11/25 Javascript
Javascript算符的优先级介绍
2013/03/20 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
2014/08/30 Javascript
js中split和replace的用法实例
2015/02/28 Javascript
jQuery插件实现大图全屏图片相册
2015/03/14 Javascript
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
JavaScript实现算术平方根算法-代码超简单
2015/09/11 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
js转换对象为xml
2017/02/17 Javascript
JS实现点击拉拽轮播图pc端移动端适配
2018/09/05 Javascript
element-ui组件中input等的change事件中传递自定义参数
2019/05/22 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
python检测某个变量是否有定义的方法
2015/05/20 Python
浅谈python中的数字类型与处理工具
2017/08/02 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
tensorflow 实现打印pb模型的所有节点
2020/01/23 Python
Python如何实现在字符串里嵌入双引号或者单引号
2020/03/02 Python
Python 捕获代码中所有异常的方法
2020/08/03 Python
Python之字典对象的几种创建方法
2020/09/30 Python
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
土耳其风格手工珠宝:Ottoman Hands
2019/07/26 全球购物
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
毕业生见习报告总结
2014/11/08 职场文书
大学生毕业评语
2014/12/31 职场文书
2015年人民调解工作总结
2015/05/18 职场文书
停发工资证明范本
2015/06/12 职场文书
表彰大会新闻稿
2015/07/17 职场文书
Java基础之this关键字的使用
2021/06/30 Java/Android
MySql子查询IN的执行和优化的实现
2021/08/02 MySQL
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android
全网非常详细的pytest配置文件
2022/07/15 Python