주말은 이제 내일 요약 할 시간입니다. 나는 몇 가지를 배운 것 같은 느낌이 들지만 많이 배우지 않은 것 같습니다. 내일 분석합시다. 오늘 분석하고 싶은 문제를 살펴 보겠습니다.
누구나이 그림에 익숙합니다.
- - - - - - - - - - - - - - - - - -
오늘 우리는 그것을 분석하고 만들 것입니다. 먼저이 팝업 상자의 특성을 소개하겠습니다.
* 항상 페이지 테두리에 첨부됩니다
* 페이지가 상승하고 떨어지면 위치를 변경하지 마십시오.
* 마우스가 지나면 자세한 정보가 나타나고 떠날 때 원래 상태로 돌아갑니다.
이런 식으로, 우리는 몇 가지 가능한 기능을 대략적으로 생각할 수 있습니다 : 게시물의 절대 포지셔닝; 지나가는 마우스의 모니터링 및 방법; 이것들은 분명히 사용될 것이지만, 이것 외에 다른 용도는 무엇이며 어떻게 구현됩니까?
1. 표시된 모든 인터페이스 상태를 구현하십시오
먼저 HTML 코드를 작성하십시오
코드 사본은 다음과 같습니다.
<span style = "font-size : 12px;"> <div id = "Shareleft">
<div>
<p> <a href = "#"> tip </a> </p>
</div>
<p id = "mainmsg"onmouseover = "showtip ()">
공유하십시오
</p>
</div> </span>
그런 다음 CSS 스타일 인코딩
코드 사본은 다음과 같습니다.
<span style = "font-size : 12px;">*{마진 : 0; 패딩 : 0;}
#shareleft {위치 : 고정; 배경색 : 노란색; 상단 : 50px; 너비 : 300px; 높이 : 600px; 오른쪽 : 0px;}
#Mainmsg {색상 : #fff; 위치 : 절대; 커서 : 포인터; 텍스트-정렬 : 중심; 중심; 배경 색 : 빨간색; 상단 : 60px; 너비 : 100px; 높이 : 400px; 패딩 : 20px 0 10px; 마진 왼쪽 : -100px; 경계-라디우스 : 50px 0 50px; }
.list {float : 오른쪽; 배경색 : #fff; 너비 : 280px; 높이 : 580px; 마진 : 10px 10px 10px 10px;} </span>
핵심 사항을 여기에서 분석하겠습니다. a. 게시물 : 고정 된 위치는 매우 좋습니다. 비. 오른쪽 : 0px, 이것의 구체적인 적용은 나중에 자세히 설명 될 것이지만 여기에서도 매우 중요합니다. 3. #Mainmsg 마진 -왼쪽 : -100px,이 장소도 매우 중요하므로 효과를 살펴 보겠습니다.
하하, 이것은 올해 가장 큰 팝업 박스입니다. JS의 팝업 효과에 대해 계속 이야기합시다.
2. 상세한 부분을 숨기고 부품이 외부에서 새는 것을 유발합니다.
이것은 비교적 간단합니다. 이를 수정하려면 Shareleft의 올바른 값을 변경하십시오.
3. 팝업 효과를 달성하기위한 JS
이 타이머의 효과를 사용한 것은 이번이 처음이 아닙니다. JS가 타자기 효과를 구현하면 적용했습니다. 여기서 우리는 타이밍 객체를 변경했습니다.
코드 사본은 다음과 같습니다.
<span style = "font-size : 12px;"> <script type = "text/javaScript">
var timer = null;
var count = 0;
var tip = 함수 (위치, 대상, 속도) {
ClearInterval (타이머);
타이머 = setInterval (function () {
if (count> position.offsetWidth) {
ClearInterval (타이머);
}또 다른{
position.style.right+= window.count+"px";
Window.count ++;
};
}, 속도);
};
함수 showtip () {
var position = document.getElementById ( "Shareleft");
팁 (위치, document.body.clientWidth, 1000);
};
</script> </span>
이 코드에서주의를 기울여야 할 가장 중요한 요점은 다음과 같습니다. Offsetwidth, .style.right 등. 지금은 이것에 대해 이야기하지 않을 것입니다. 구체적으로 소개하겠습니다. 먼저 이렇게 사용해 봅시다. 그 의미를 아는 것입니다.
이것을 철저히 이해 한 후에는 이제 효과가 달성 될 것이므로 시도 할 수 있습니다.