javascript_javascript 기술로 제작된 웹 페이지 측면 팝업 상자에 대한 아이디어 및 구현 코드
- WBOY원래의
- 2016-05-16 16:47:291751검색
내일은 요약할 시간인데, 뭔가 배운 것 같지만, 오늘 분석할 문제를 먼저 살펴보겠습니다.
이런 사진은 다들 익숙하시죠. 
————————————
오늘은 이 팝업박스의 특징을 먼저 분석해서 만들어 보겠습니다.
* 페이지 테두리에 항상 붙어있습니다.
* 페이지가 올라감에 따라 위치가 바뀌지 않고, 넘어짐
* 마우스가 넘어가면 상세정보가 뜨는데, 나가면 원래 상태로 돌아갑니다
이렇게 하면 사용할 수 있는 여러 기능을 대략적으로 생각해 볼 수 있습니다. : 위치의 절대 위치 지정, 마우스가 모니터링 및 메소드를 통과한 후 떠나는 경우가 있지만, 이 외에도 무엇이 사용되며 어떻게 구현됩니까?
1. 모든 디스플레이의 인터페이스 상태를 파악하려면
먼저 HTML 코드를 작성
코드 복사 코드는 다음과 같습니다.
🎜>
ㅋㅋㅋ 올해 가장 큰거네요. 계속해서 js를 이용한 팝업 효과에 대해 이야기해보겠습니다
2. 세부 부분을 숨기고 프롬프트 부분을 유출합니다
수정하려면 간단히 추가하면 됩니다. div의 너비인 right=-300px인 shareLeft 값만 변경하면 됩니다.
3. js를 사용하여 팝업 효과 구현
이 타이머 효과를 사용한 것은 이번이 처음이 아니며, js에서 타자기 효과를 구현할 때 사용한 적이 있습니다. 방금 타이밍 개체를 변경했습니다.
코드를 복사하세요 코드는 다음과 같습니다. *{margin: 0;padding: 0;}
#shareLeft{위치: 고정;배경색: 노란색; 상단: 50px;너비: 300px; 높이: 600px;오른쪽: 0px;} #mainMsg{color: #fff;위치: 절대;커서: 포인터;텍스트 정렬: 센터;배경 색상: 빨간색;상단: 60px;너비: 100px;높이: 400px;패딩: 20px 0 0 10px;여백-왼쪽: -100px;border-radius:50px 0 0 50px }
.list{float: 오른쪽;배경 색상: #fff ;width: 280px;height: 580px ;margin: 10px 10px 10px 10px;}
여기서 핵심 사항을 분석해 보겠습니다. a. 위치: 고정, 이 고정 위치는 매우 좋습니다. ; b. right: 0px, 이는 구체적입니다. 애플리케이션에 대해서는 나중에 자세히 설명하겠지만 이것도 중요합니다. 3. #mainMsg의 왼쪽 여백: -100px도 매우 중요하므로 살펴보겠습니다. 효과에
.list{float: 오른쪽;배경 색상: #fff ;width: 280px;height: 580px ;margin: 10px 10px 10px 10px;}
여기서 핵심 사항을 분석해 보겠습니다. a. 위치: 고정, 이 고정 위치는 매우 좋습니다. ; b. right: 0px, 이는 구체적입니다. 애플리케이션에 대해서는 나중에 자세히 설명하겠지만 이것도 중요합니다. 3. #mainMsg의 왼쪽 여백: -100px도 매우 중요하므로 살펴보겠습니다. 효과에
ㅋㅋㅋ 올해 가장 큰거네요. 계속해서 js를 이용한 팝업 효과에 대해 이야기해보겠습니다
2. 세부 부분을 숨기고 프롬프트 부분을 유출합니다 수정하려면 간단히 추가하면 됩니다. div의 너비인 right=-300px인 shareLeft 값만 변경하면 됩니다.
3. js를 사용하여 팝업 효과 구현
이 타이머 효과를 사용한 것은 이번이 처음이 아니며, js에서 타자기 효과를 구현할 때 사용한 적이 있습니다. 방금 타이밍 개체를 변경했습니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.