javascript實(shí)現(xiàn) 百度翻譯 可折疊的分享按鈕列表
自從開始學(xué)習(xí)前端后，平時(shí)看到瀏覽器上的一些出彩的控件都想自己實(shí)現(xiàn)一下O(∩_∩)O，不知大家有沒有這個(gè)感覺。接下來就和大家分享一個(gè)，原控件來自百度翻譯右下方，大家仔細(xì)找找應(yīng)該能找到，如圖所示：
感覺蠻有意思的，實(shí)現(xiàn)起來也不復(fù)雜，比較適合練手。好吧，廢話不多說了，直接上代碼吧。
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="人人網(wǎng)" class="li4"></li>
<li title="百度" class="li5"></li>
<li title="豆瓣網(wǎng)" class="li6"></li>
<li title="搜狐" class="li7"></li>
<li title="開心網(wǎng)" 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的注冊(cè)事件方法*/
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的阻止默認(rèn)事件方法*/
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)
}
};
/*關(guān)閉控件*/
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);
}
};
/*點(diǎn)擊觸發(fā)按鈕的回調(diào)*/
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);
改為：
直接使用我上傳的這個(gè)圖片資源也是可以的（感謝強(qiáng)大的互聯(lián)網(wǎng)^_^）。
接下來是我實(shí)現(xiàn)的效果展示：
接著說說，我在編寫過程中的主要技術(shù)要點(diǎn)：
控件兼容到IE7，手頭沒有IE6，無法測(cè)試了，主要解決的兼容問題代碼中都有標(biāo)注。
采用了css sprites 技術(shù)，大家應(yīng)該已經(jīng)發(fā)現(xiàn)了吧^_^，好技術(shù)就要用。
JS中應(yīng)用閉包，避免全局污染。
在html中script標(biāo)簽放到body底部，這種小細(xì)節(jié)俺也會(huì)注意到的（雖然都是本地資源╮(╯▽╰)╭）。
好吧，就是這些，不過這個(gè)小控件，還是有進(jìn)一步完善的余地的，比如，可以使用css3屬性來實(shí)現(xiàn)div的動(dòng)態(tài)伸縮，可以將這個(gè)控件組件化，可以用JQ框架更加方便的實(shí)現(xiàn)（JQ練手）等等。
以上就是本文分享給大家的全部?jī)?nèi)容了，希望大家能夠喜歡。
相關(guān)文章
可以獲取網(wǎng)頁中相同class的節(jié)點(diǎn)的腳本，然后就可以統(tǒng)一做一些調(diào)整。2008-12-12
解析JavaScript中instanceof對(duì)于不同的構(gòu)造器或許都返回true
這篇文章主要是對(duì)JavaScript中instanceof對(duì)于不同的構(gòu)造器或許都返回true進(jìn)行了詳細(xì)的解析，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12
JS控制表格實(shí)現(xiàn)一條光線流動(dòng)分割行的方法
這篇文章主要介紹了JS控制表格實(shí)現(xiàn)一條光線流動(dòng)分割行的方法,實(shí)例分析了javascript操作table表格元素的技巧,需要的朋友可以參考下2015-03-03
JavaScript 原型鏈學(xué)習(xí)總結(jié)
在JavaScript中，一切都是對(duì)像，函數(shù)是第一型2010-10-10
JavaScript關(guān)閉當(dāng)前頁面(窗口)不帶任何提示
這篇文章主要介紹了JavaScript關(guān)閉當(dāng)前頁面(窗口)不帶任何提示的具體實(shí)現(xiàn),需要的朋友可以參考下2014-03-03
代碼整體結(jié)構(gòu)是執(zhí)行速度的決定因素之一，代碼量少不一定運(yùn)行速度快，代碼量多也不一定運(yùn)行速度慢。本篇文章將對(duì)js的算法和流程控制進(jìn)行介紹，下面跟著小編一起來看下吧2016-12-12
也許你有一個(gè)很酷的主頁，很希望與人分享。同時(shí)，你希望訪問你主頁的人能對(duì)你的主頁提供一些意見和建議，或者你對(duì)某個(gè)主題感興趣，而希望客人也許能給你一幫助，這就要用到留言簿。留言簿使得你能與每一個(gè)訪問你主頁的人交換信息。2008-09-09
這篇文章主要介紹了javascript表格的渲染組件的相關(guān)資料,需要的朋友可以參考下2015-07-07
微信小程序基于movable-view實(shí)現(xiàn)滑動(dòng)刪除效果
這篇文章主要介紹了微信小程序基于movable-view實(shí)現(xiàn)滑動(dòng)刪除效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-01
使用javascript實(shí)現(xiàn)雪花飄落的效果
本文主要介紹了使用javascript實(shí)現(xiàn)雪花飄落的特效，雖然網(wǎng)上有很多，不過都是比較陳舊了，兼容性不是太好，于是動(dòng)手寫一個(gè)，把思路和實(shí)現(xiàn)代碼都分享給大家。2015-01-01