JavaScript 구현 Baidu 번역 축소형 공유 버튼 list_javascript 기술

저는 프론트엔드를 배우기 시작한 이후로 브라우저에서 뛰어난 컨트롤을 보면 O(∩_∩)O를 직접 구현해보고 싶어집니다. 다음으로 하나를 공유하겠습니다. 원래 컨트롤은 Baidu Translate의 오른쪽 하단에 있으며 그림과 같이 주의 깊게 검색하면 찾을 수 있습니다.

꽤 흥미롭고 구현하기 복잡하지 않아서 연습하기에 더 적합합니다. 좋아요, 더 이상 말도 안 되는 소리는 그만하고 바로 코드로 들어가겠습니다.

html 코드:

코드 복사 코드는 다음과 같습니다.

> > ​ ​ ​
머리>

          

>
~ & Lt; li 제목 = "QQ 공간" 클래스 = "li1" & gt;/li & gt;                                      

                                      

& Lt; li tity = "리커 네트워크" 클래스 = "li4" & gt; ~ | 리>
~ ~     

& Lt; 제목 = "행복한 네트워크" 클래스 = "li8" & gt;/li & gt;                                               
>             
본문>




CSS 코드:

코드 복사

코드는 다음과 같습니다.

*{
  여백:0px;
  패딩:0px;
}
#확대/축소{
  위치: 절대;
  상단: 20px;
  오른쪽: 200px;
  테두리: 1px 단색 RGB(38,147,255);
  높이: 40px;
  너비: 40px;
}
#확대/축소 > 스팬{
  디스플레이: 인라인 블록;
  위치: 절대;
  상단: 0px;
  하단: 0px;
  왼쪽: 0px;
  너비: 40px;
  배경 이미지: url(sprite.png);
  background-repeat: 반복하지 않음;
  배경 위치: -5px -7px;
  불투명도: 0.8;
  필터:알파(불투명도=50);/*IE78*/
}
#zoom ul{
  표시: 없음;
  위치: 절대;
  상단: 0px;
  하단: 0px;
  왼쪽: 50px;
  목록 스타일: 없음;
}
#zoom ul li{
  디스플레이: 인라인 블록;
  *디스플레이: 인라인;/*IE7*/
  *줌:1;/*IE7*/
  *왼쪽 여백: 5px;/*IE7*/
  너비: 16px;
  높이: 16px;
  여백 상단: 12px;
  배경 이미지: url(sprite.png);
  background-repeat: 반복하지 않음;
}
#줌 .li1{
  배경 위치: -57px -20px;
}
#줌 .li2{
  배경 위치: -77px -20px;
}
#줌 .li3{
  배경 위치: -98px -20px;
}
#줌 .li4{
  배경 위치: -119px -20px;
}
#줌 .li5{
  배경 위치: -140px -20px;
}
#줌 .li6{
  배경 위치: -161px -20px;
}
#줌 .li7{
  배경 위치: -182px -20px;
}
#줌 .li8{
  배경 위치: -203px -20px;
}

#zoom li:hover{
  커서: 포인터;
  불투명도: 0.8;
  필터:알파(불투명도=50);/*IE78*/
}
#확대 범위:호버{
  커서: 포인터;
  불투명도: 1;
  필터:알파(불투명도=100);/*IE78*/
}

js代码：

复主代码 代码如下:

var 줌 = (함수(){
var ZoomDom = document.getElementById('zoom'),
        상태 = {열림: false, onaction: false, 길이: 0},
쇼스팬
       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 = 함수(e){
If(e&&e.preventDefault){
e.preventDefault();
} 그 밖의 {
        window.event.returnValue = false;/*IE*/
}
};
/*컨트롤 확장*/
var onOpen = 함수(){
If(state.length>250){
​​ ul.style.display = 'inline-block';
       state.onaction = false state.opened = true;
}그밖에{
If(!state.onaction){ state.onaction = true;}
       state.length = 10;
ZoomDom.style.width = state.length 'px';
setTimeout(onOpen, 0)
}
};
/*제어 닫기*/
var onCollapse = function(){
If(state.length         state.onaction = false state.opened = false;
}그밖에{
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();
}그밖에{
         ul.style.display = '없음';
onCollapse();
}
}
};
반환 함수(){
​ addEvent(showSpan, 'click', onSpanClick);
};
})();

아래 사진은 CSS에서 사용한 사진입니다(바이두 번역에서 직접 찍은 사진^_^):

다운로드하고 이름을 변경하여 루트 디렉터리에 넣거나 CSS에 두 위치를 직접 추가하세요.

코드 복사 코드는 다음과 같습니다.

배경 이미지: url(sprite.png);

다음으로 변경됨:

코드 복사 코드는 다음과 같습니다.

배경 이미지: url(http://images.cnitblog.com/blog2015/680599/201503/110916459332808.png);

내가 올린 이미지 리소스를 바로 활용하는 것도 가능합니다(강력한 인터넷 덕분에^_^).

다음은 내가 달성한 효과의 시연입니다.

그럼 집필 과정의 주요 기술 사항에 대해 말씀드리겠습니다.

컨트롤은 IE7과 호환됩니다. IE6이 없어서 테스트할 수 없습니다. 해결해야 할 주요 호환성 문제가 코드에 표시되어 있습니다.
CSS 스프라이트 기술을 사용하므로 지금쯤 발견했어야 합니다^_^ 좋은 기술을 사용해야 합니다.

글로벌 오염을 방지하려면 JS에 클로저를 적용하세요.

HTML에서는 스크립트 태그가 본문 하단에 배치됩니다(모두 로컬 리소스이지만 ╮(╯▽╰)╭).
좋아요, 그게 다입니다. 하지만 이 작은 컨트롤에는 여전히 추가 개선의 여지가 있습니다. 예를 들어 CSS3 속성을 사용하여 div의 동적 크기 조정을 달성할 수 있고, 이 컨트롤을 구성 요소화할 수 있으며, JQ 프레임워크를 사용하여 더 많이 구현할 수 있습니다. 편리하게 (JQ Practice) 등

위 내용은 이 글에서 공유한 모든 내용입니다. 마음에 드셨으면 좋겠습니다.