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练手）等等。
以上就是本文分享给大家的全部内容了，希望大家能够喜欢。
相关推荐
-
javascript实现类似百度分享功能的方法
本文实例讲述了javascript实现类似百度分享功能的方法.分享给大家供大家参考.具体如下: 像腾讯,开心社区都提供这种分享接口的,做百度分享功能很简单的 一般网站要接入分享功能,大部分都用百度分享和addthis的代码,可是自己定制性太差,该分享功能样式都可以自己修改,简洁没过多js代码,大大提高网页加载速度. 运行效果如下图所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt
-
js 调用百度分享功能
效果图: 图(1)未展开 图(2)展开效果 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="bdsharebuttonbox"> <a href="#" rel="ext
-
利用JS延迟加载百度分享代码,提高网页速度
发现很多网站在放置百度分享代码的时候,简单的将分享代码放置到固定的网页位置就完事了,这是非常致命的方式.因为,我经常打开一个网页的时候,发现在网页加载到分享代码的时候,有时候花上几秒的时候来请求百度的服务器,最后展示分享按钮. 其实,像这样对网页来说不是非常重要的功能,我们大可以用JS来延迟加载,从而提高网页主要内容的快速加载显示.这里分享下我的放置方式.一.copy百度分享代码,如下: 复制代码 代码如下: <!-- Baidu Button BEGIN --><div id=&quo
-
javascript实现 百度翻译 可折叠的分享按钮列表
自从开始学习前端后,平时看到浏览器上的一些出彩的控件都想自己实现一下O(∩_∩)O,不知大家有没有这个感觉.接下来就和大家分享一个,原控件来自百度翻译右下方,大家仔细找找应该能找到,如图所示: 感觉蛮有意思的,实现起来也不复杂,比较适合练手.好吧,废话不多说了,直接上代码吧. html代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset = 'utf-8'/>
-
php使用百度翻译api示例分享
百度翻译API的PHP代码,测试可以实现,不过英译中可能需要转换编码. 复制代码 代码如下: <?phpfunction language($value,$from="auto",$to="auto"){ $value_code=urlencode($value); #首先对要翻译的文字进行 urlencode 处理 $appid="YourApiKey"; #您注册的API Key $languageurl = "ht
-
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
百度分享插件 <style> .userStyle{ width:100%; height:30px; display:block; } .userStyle span.bds_more{ background:url("/wap/images/rfhui1.jpg") no-repeat scroll 0 5px rgba(0, 0, 0, 0) !important; } </style> <div class="userStyle"
-
一个分享按钮的插件使用介绍（可扩展，内附开发制作流程）
前几天由于工作需要制作一个分享按钮,考虑到后续其他项目可能也会用到,于是就打算写成插件化,正好也给我自己的插件jquery.hooray增加一个新的功能,为了不浪费大家时间,我先把demo放出来,如果觉得能用到,或者想学是怎么制作的,那就继续往下看.(demo演示) 既然要做成插件,那可制定性肯定要强,不能定死,比如不能把显示个数定死,不能把分享按钮排序定死等等(不过有些东西还是要定死的,太灵活了也就成不了插件了).这里我的操作办法是--先看代码吧 复制代码 代码如下: <div class=&qu
-
Asp.NET调用百度翻译的方法
本文实例讲述了Asp.NET调用百度翻译的方法.分享给大家供大家参考.具体分析如下: Asp.NET调用百度翻译,如下图所示: HTML代码如下: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="baidu.aspx.cs" Inherits="FanYi_baidu" %> <!DOCTYPE html PUBLIC &
-
JavaScript+CSS实现的可折叠二级菜单实例
本文实例讲述了JavaScript+CSS实现的可折叠二级菜单.分享给大家供大家参考,具体如下: .aspx文件: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="NavigateMenu.aspx.cs" Inherits="NavigateMenu" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHT
-
jquery mobile实现可折叠的导航按钮
本文实例为大家分享了jquery实现可折叠的导航按钮的具体代码,供大家参考,具体内容如下 功能: 当功能较多时,创建可折叠分组导航按钮.只需指定 data-role=" collapsible "创建可折叠面板 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>可折叠的导航面板</title> <!--使用名为viewp
-
基于Arcgis for javascript实现百度地图ABCD marker的效果
先给大家展示实现后效果: 为直观期间,先贴出来我做的效果 列表展示和地图展示以及联动 显示信息 实现思路: 1.列表与地图的互动 鼠标经过列表时,修改列表图标,并根据列表返回的值在地图上绘蓝色的marker:鼠标移出,修改列表图标为红色,清空地图marker图层. 关键代码: title.on("mouseover",function(){ var attr = $(this).data("attr"); $("#icon"+attr.id).c
-
javascript设置连续两次点击按钮时间间隔的方法
本文实例讲述了javascript设置连续两次点击按钮时间间隔的方法,分享给大家供大家参考.具体实现方法如下: 很多时候我们在实际应用中,可能并不希望按钮联系被不间断的点击,所以要限定一定的时间间隔才能够再次点击按钮,下面就通过代码实例介绍一下如何实现此功能,代码如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="a
-
用python实现百度翻译的示例代码
用python实现百度翻译,分享给大家,具体如下: 首先,需要简单的了解一下爬虫,尽可能简单快速的上手,其次,需要了解的是百度的API的接口,搞定这个之后,最后,按照官方给出的demo,然后写自己的一个小程序 打开浏览器 F12 打开百度翻译网页源代码: 我们可以轻松的找到百度翻译的请求接口为:http://fanyi.baidu.com/sug 然后我们可以从方法为POST的请求中找到参数为:kw:job(job是输入翻译的内容) 下面是代码部分: from urllib import req