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实现 在光标处插入指定内容
May 25 Javascript
用javascript实现读取txt文档的脚本
Jul 20 Javascript
JQuery与Ajax常用代码实现对比
Oct 03 Javascript
可以用来调试JavaScript错误的解决方案
Aug 07 Javascript
jQuery contains过滤器实现精确匹配使用方法
Apr 12 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
Jun 14 Javascript
js常用数组操作方法简明总结
Jun 20 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 Javascript
Jquery跨域获得Json的简单实例
May 18 Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 28 Javascript
vue ssr 实现方式(学习笔记)
Jan 18 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
php表单转换textarea换行符的方法
2010/09/10 PHP
php中关于普通表单多文件上传的处理方法
2011/03/25 PHP
php实现12306余票查询、价格查询示例
2014/04/17 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
js onkeypress与onkeydown 事件区别详细说明
2012/12/13 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
2014/05/14 Javascript
jQuery点缩略图弹出层显示大图片
2015/02/13 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
2015/04/12 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
2015/06/04 Javascript
javascript模块化简单解析
2016/04/07 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
Vue 组件参数校验与非props特性的方法
2019/02/12 Javascript
javascript实现摄像头拍照预览
2019/09/30 Javascript
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
Python之eval()函数危险性浅析
2014/07/03 Python
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
Python实现简单的语音识别系统
2017/12/13 Python
Python3最长回文子串算法示例
2019/03/04 Python
python实现扫雷游戏
2020/03/03 Python
Python进行特征提取的示例代码
2020/10/15 Python
html+css3实现的登录界面
2020/12/09 HTML / CSS
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
文件中有一组整数,要求排序后输出到另一个文件中
2012/01/04 面试题
快餐店的创业计划书范文
2014/01/29 职场文书
舞蹈毕业生的自我评价
2014/03/05 职场文书
班班通校本培训方案
2014/03/12 职场文书
飘柔洗发水广告词
2014/03/14 职场文书
《雨点儿》教学反思
2014/04/14 职场文书
稽核岗位职责
2015/02/10 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
原告代理词范文
2015/05/25 职场文书
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python
win10电脑双屏显示一个黑屏怎么办?win10电脑双屏显示一个黑屏解决方法
2022/07/15 数码科技