萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> javascript實現 百度翻譯 可折疊的分享按鈕列表

javascript實現 百度翻譯 可折疊的分享按鈕列表

 這篇文章主要介紹了javascript實現 百度翻譯 可折疊的分享按鈕列表的方法,需要的朋友可以參考下

   

自從開始學習前端後,平時看到浏覽器上的一些出彩的控件都想自己實現一下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中用到的圖片(直接從百度翻譯上截的圖^_^):

大家下下來,改改名字放到根目錄下就行了,或者直接將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練手)等等。

以上就是本文分享給大家的全部內容了,希望大家能夠喜歡。

copyright © 萬盛學電腦網 all rights reserved