프론트 엔드를 배우기 시작했기 때문에 보통 브라우저에서 O (∩_∩) O를 혼자서 구현하려는 뛰어난 컨트롤을 볼 수 있습니다. 당신 이이 느낌이 있는지 궁금합니다. 다음으로, 나는 당신과 공유하겠습니다. 원래 컨트롤은 바이두 번역의 오른쪽 하단에서 나옵니다. 그림과 같이 신중하게 찾을 수 있습니다.
그것은 매우 흥미롭고 구현하기가 복잡하지 않으며 연습에 더 적합합니다. 좋아, 많이 말하지 말고 코드를 업로드하자.
HTML 코드 :
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<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 = "share ..."> </span>
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<script type = "text/javaScript"src = "Zoom.js"> </script>
</body>
</html>
CSS 코드 :
코드 사본은 다음과 같습니다.
*{
여백 : 0px;
패딩 : 0px;
}
#줌{
위치 : 절대;
상단 : 20px;
오른쪽 : 200px;
국경 : 1px 고체 RGB (38,147,255);
높이 : 40px;
너비 : 40px;
}
#zoom> span {
디스플레이 : 인라인 블록;
위치 : 절대;
상단 : 0px;
하단 : 0px;
왼쪽 : 0px;
너비 : 40px;
배경 이미지 : URL (Sprite.png);
배경 반복 : 비 반복;
배경 위치 : -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);
배경 반복 : 비 반복;
}
#zoom .li1 {
배경 위치 : -57px -20px;
}
#zoom .li2 {
배경 위치 : -77px -20px;
}
#zoom .li3 {
배경 위치 : -98px -20px;
}
#zoom .li4 {
배경 위치 : -119px -20px;
}
#zoom .li5 {
배경 위치 : -140px -20px;
}
#zoom .li6 {
배경 위치 : -161px -20px;
}
#zoom .li7 {
배경 위치 : -182px -20px;
}
#zoom .li8 {
배경 위치 : -203px -20px;
}
#Zoom Li : 호버 {
커서 : 포인터;
불투명도 : 0.8;
필터 : 알파 (불투명도 = 50);/*IE78*/
}
#zoom Span : 호버 {
커서 : 포인터;
불투명도 : 1;
필터 : 알파 (불투명 = 100);/*ie78*/
}
JS 코드 :
코드 사본은 다음과 같습니다.
var Zoom = (function () {
var Zoomdom = document.getElementById ( 'Zoom'),
state = {열기 : 거짓, onaction : false, length : 0},
쇼 스팬,
ul;
if (Zoomdom.firstelementchild) {
showspan = Zoomdom.FirstElementChild;
ul = showspan.nextElementsibling;
} else { /*ie* /
showspan = Zoomdom.FirstChild;
ul = showspan.nextibling;
}
/*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 ();
} 또 다른 {
window.event.returnValue = false;/*IE*/
}
};
/*제어 확장*/
var onopen = function () {
if (state.length> 250) {
ul.style.display = '인라인-블록';
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 <41) {
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 = 'none';
oncollapse ();
}
}
};
return function () {
addevent (showspan, 'click', onspanclick);
};
}) ();
다음 그림은 CSS에 사용 된 그림입니다 (이미지 ^ _ ^ Baidu Translation에서 직접) :
모두가 이름을 변경하여 루트 디렉토리에 넣거나 CSS에 직접 두 곳을 넣습니다.
코드 사본은 다음과 같습니다.
배경 이미지 : URL (Sprite.png);
변경 :
코드 사본은 다음과 같습니다.
배경-이미지 : URL (http://images.cnitblog.com/blog2015/680599/201503/110916459332808.png);
직접 업로드 한 이미지 자원을 사용해도 괜찮습니다 (강력한 인터넷^_^덕분).
다음은 내가 달성 한 효과입니다.
글쓰기 과정에서 내 주요 기술 포인트에 대해 이야기 해 봅시다.
컨트롤은 IE7과 호환되며 IE6이 없으므로 테스트 할 수 없습니다. 해결 된 주요 호환성 문제는 코드에 표시됩니다.
CSS Sprites 기술을 사용하면 ^_ ^를 발견했을 것입니다. 좋은 기술을 사용해야합니다.
전 세계 오염을 피하기 위해 JS에 폐쇄를 적용하십시오.
HTML 스크립트 태그 에서도이 작은 세부 사항을 알 수 있습니다 (모두 로컬 리소스이지만).
글쎄, 그게 다야, 그러나이 작은 통제는 여전히 더욱 개선 할 여지가있다. 예를 들어, CSS3 속성을 사용하여 DIV의 동적 스케일링을 달성 하고이 컨트롤을 구성하고 JQ 프레임 워크를 사용하여보다 편리하게 구현할 수 있습니다 (JQ Practice) 등.
위는이 기사에서 공유하는 모든 내용입니다. 나는 당신이 그것을 좋아하기를 바랍니다.