네 이 티 브 JS 투명 도 를 바 꾸 어 윤 방 효 과 를 실현 하 다.
나 는 HTML+css 와 JS 로 관련 된 지식 포 인 트 를 두 가지 로 나 누 었 다.
첫 번 째 부분(html+css)
포 함 된 지식 은 positon 포 지 셔 닝 입 니 다.
가장 바깥쪽 은 div 입 니 다.모든 요 소 를 포함 하고 있 습 니 다.이 라운드 방송 은 모두 세 장의 그림 이 있 는데,이 세 장의 그림 은 무질서 한 목록 에 포함 되 어 있다.가장 바깥쪽 div 에는 이전 그림 과 다음 그림 을 전환 하 는 하위 요소 가 두 개 있 습 니 다.이 두 키 요소 도 div 입 니 다.이전 그림 의 div 속성 을 pre 로 전환 하고 다음 그림 의 div 속성 을 next 로 전환 합 니 다.가장 바깥쪽 div 의 position 값 은 relative 입 니 다.그림 을 포함 하 는 무질서 목록 의 position 는 relative 입 니 다.무질서 목록 에 있 는 li 요소 의 positon 속성 값 은 absolute 입 니 다.이것 은 li 요 소 를 문서 흐름 밖 에 두 기 때문에 표시 되 지 않 는 설정 l 의 높이,ul 높이 는 0 입 니 다.그러나 우 리 는 css 로 ul 의 높이 를 표시 할 수 없습니다.이 라운드 방송의 높이 가 그림 의 높이 와 같 고 해상도 가 다른 컴퓨터 에서 그림 의 높이 와 너비 가 변 하지 않도록 해 야 하기 때문이다.해상도 가 다른 컴퓨터 에서 그림 이 보 여 주 는 높이 와 너 비 는 다르다.그래서 저 는 js 를 통 해 얼 의 높이 를 설정 합 니 다.l 의 position 속성 값 은 relative 이기 때문에 l 의 높이 는 외층 div 의 높이 를 벌 린 다.이 사례 는 그림 의 투명 도 를 바 꾸 어 윤 방 을 실현 하 는 것 이기 때문에 모든 그림 은 같은 위치 에 있 습 니 다.기본 적 인 상황 에서 마지막 그림 은 맨 위 에 있 고 첫 번 째 그림 은 맨 아래 에 있 습 니 다.윤 방 첫 번 째 그림 은 첫 번 째 그림 이 고 그 다음 에 두 번 째 그림 이 며 마지막 이 세 번 째 그림 입 니 다.그래서 표시 할 모든 li 에 z-index 속성 을 설정 합 니 다.또한 z-index 속성 치 는 순서대로 감소 합 니 다.나 는 js 로 모든 li 의 z-index 속성 값 을 설정 하지만,사실은 이렇게 할 필요 가 없다.직접 css 속성 을 사용 하면 된다.단지 세 개의 선택 기 를 써 야 한다.
html 는 다음 과 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<link rel="stylesheet" type="text/css" href="index.css" rel="external nofollow" >
</head>
<body>
<div class='warp' id='warp'>
<ul class='list' id='list'>
<li><img src='img/4274ad202b27b671e622388989399d54.jpg' style='opacity: 1'></li>
<li><img src='img/299733ddbe89d6b317cc0e84c43999d4.jpg' style='opacity: 1'></li>
<li><img src='img/9b7ec36280e638929aa10ce0955df3d3.jpg' style='opacity: 1'></li>
</ul>
<div class='pre' id='pre'>《</div>
<div class='next' id='next'>》</div>
</div>
<script type="text/javascript" src='index.js'></script>
</body>
</html>
*{
padding: 0;
margin: 0;
}
.warp{
position: relative;
width: 100%;
}
.list{
position: relative;
width: 100%;
}
.list li{
position: absolute;
top:0;
left: 0;
width: 100%;
list-style: none;
opacity: 1;
}
li img{
width: 100%;
}
.pre,.next{
position: absolute;
top: 50%;
bottom: 0;
width: 64px;
height: 64px;
z-index: 10;
margin-top: -32px;
text-align: center;
line-height: 64px;
color: #fff;
font-weight: bold;
font-size: 30px;
cursor: pointer;
background-color: transparent;
}
.pre{
left: 20px;
right: auto;
}
.next{
right:20px;
left: auto;
}
.pre:hover,.next:hover{
background-color: rgba(0,0,0,0.7);
}
이 벤트 는 원생 js 로 기능 을 실현 하기 때문에 브 라 우 저 호환성 문 제 를 고려 해 야 합 니 다.
이벤트 흐름
두 가지 유형의 시간 흐름 이 있 는데 그것 이 바로 사건 의 거품 흐름 과 사건 의 포획 흐름 이다.이 차 이 는 완전히 상 반 된 사건 흐름 개념 이 고 사건 의 거품 흐름 을 사건 의 거품 이 라 고 하 는데 이것 은 IE 가 제기 한 것 이다.하나의 click 사건 을 예 로 들 면 이벤트 거품 에서 사건 은 가장 구체 적 인 요소,즉 우리 가 클릭 한 요소 에서 발생 한 다음 에 dom 트 리 를 따라 위로 전파 된다.전파 하 는 과정 에서 모든 단계 노드 에서 click 사건 이 발생 하고 전 파 된 document 대상 까지 발생 한다.이벤트 캡 처 흐름 을 이벤트 캡 처 라 고 하 는데 이것 은 Netscape Communicator 가 제기 한 것 입 니 다.마찬가지 로 하나의 click 이 벤트 를 예 로 들 면 이벤트 캡 처 에서 이 벤트 는 가장 구체 적 이지 않 은 그 노드(document 대상 이 먼저 이 벤트 를 받 음)에서 먼저 발생 한 다음 에 dom 트 리 를 따라 아래로 전파 되 고 가장 구체 적 인 노드 는 마지막 에 이 벤트 를 받 습 니 다.즉,실제로 점 격 된 그 요 소 는 마지막 에 click 이 벤트 를 받 습 니 다."DOM 2 급 사건'은 사건 흐름 이 사건 포획 단계 로 목표 단계 와 사건 거품 단계 에 있 는 세 단 계 를 포함한다 고 규정 하고 있다.주류 브 라 우 저 에 서 는 IE 를 제외 하고 DOM 이벤트 흐름 을 지원 하지 않 으 며,다른 브 라 우 저 에 서 는 DOM 이벤트 흐름 을 지원 합 니 다.그래서 IE 의 지원 사건 에 거품 이 생 겼 습 니 다.하지만 앞으로 IE 는 DOM 이벤트 흐름 을 지원 할 것 으로 보인다.그 때 는 이벤트 바 인 딩 을 할 때 브 라 우 저 호 환 문 제 를 고려 하지 않 아 도 됩 니 다.현재 각종 브 라 우 저 를 최대한 호 환 하기 위해 이벤트 처리 프로그램 을 이벤트 흐름 의 거품 단계 에 추가 합 니 다.
이벤트 처리 프로그램
>DOM 0 급 이벤트 처리 프로그램
DOM 0 레벨 은 요소 의 속성 할당 방식 으로 이 벤트 를 연결 하고 이벤트 처리 프로그램 속성의 값 을 함수 로 설정 하면 됩 니 다.프로그램의 this 는 현재 요 소 를 가리킨다.DOM 0 급 방법 으로 연 결 된 이 벤트 를 삭제 하 는 방법 은 이벤트 처리 프로그램의 속성 을 null 로 설정 하 는 것 입 니 다.만약 원소 가 이 벤트 를 귀속 시 켰 다 면,이 원 소 를 문 서 를 제거 하기 전에,이 원소 가 연 결 된 이 벤트 를 수 동 으로 해제 하 는 것 이 좋 습 니 다.이렇게 하면 요소 가 제거 되 는 것 을 방지 할 수 있 지만 이 요소 의 이벤트 처리 프로그램의 인용 은 메모리 에 남아 있 습 니 다.그래서 현대 브 라 우 저 는 DOM 0 급 이벤트 처리 프로그램 을 지원 합 니 다.그러나 DOM 0 급 으로 이 벤트 를 연결 할 때 모든 요소 가 같은 이벤트 에 하나의 이벤트 처리 프로그램 만 추가 할 수 있 습 니 다.
>DOM 2 급 이벤트 처리 프로그램
"DOM 2 급 이벤트"에서 이벤트 처리 프로그램 을 지정 하 는 방법 은 addEventListener()입 니 다.첫 번 째 매개 변 수 는 하나의 이벤트 이름 이 고 두 번 째 매개 변 수 는 하나의 이벤트 처리 프로그램(즉 하나의 함수,익명 함수 일 수 있 습 니 다)입 니 다.세 번 째 매개 변 수 는 불 값 입 니 다.이 불 값 은 어느 단계 에서 사건 을 처리 하 는 지,false 일 때 거품 단계 에서 처리 하 는 지,true 일 때 포획 단계 에서 처리 하 는 지 를 나타 낸다.호환성 을 위해 서 이 값 을 false 로 설정 합 니 다.'DOM 2 급 이벤트'로 연 결 된 시간 처리 프로그램 을 해제 하려 면 removeEventListener()를 사용 해 야 하 며 익명 의 이벤트 처리 프로그램 은 해제 할 수 없습니다."DOM 2 급 이벤트"바 인 딩 이 벤트 를 사용 할 때 모든 요소 가 같은 이벤트 에 여러 개의 이벤트 처리 프로그램 을 추가 할 수 있 습 니 다.'DOM 2 급 사건'으로 납치 한 사건 처리 프로그램 으로,this 는 현재 요 소 를 말한다.
IE 이벤트 처리 프로그램
IE 에서 이벤트 처리 프로그램 을 지정 하 는 방법 은 attachEvent()이 고 첫 번 째 매개 변 수 는 이벤트 처리 프로그램 이름(즉"on"+이벤트 이름)이 며 두 번 째 매개 변 수 는 시간 처리 프로그램(하나의 함수,익명 함수 일 수 있 음)입 니 다.IE 는 이벤트 거품 만 지원 하기 때문에 사건 은 거품 단계 에서 처 리 됩 니 다.detachEvent()를 사용 하면 attachEvent()로 추 가 된 시간 처리 프로그램 을 제거 할 수 있 지만 익명 함 수 는 제거 할 수 없습니다.attachEvent()바 인 딩 이벤트 this 는 window 를 말 합 니 다.attachEvent 바 인 딩 이 벤트 를 사용 할 때 모든 요소 가 같은 이벤트 에 여러 개의 이벤트 처리 프로그램 을 추가 할 수 있 습 니 다.
주:익명 함수 가 제거 되 지 않 는 이 유 는 js 에서 함수 가 하나의 대상 이 고 이 대상 은 더미 에 저장 되 어 있 으 며 함수 명 은 포인터 로 더미 속 의 대상 을 가리 키 고 있 기 때 문 입 니 다.익명 함수 에 대해 서 는 포인터 가 가리 키 지 않 아 접근 할 수 없습니다.
이벤트 개체
DOM 을 호 환 하 는 브 라 우 저 에서 이벤트 대상 은 하나의 매개 변수 로 이벤트 처리 프로그램 에 전 달 됩 니 다.(즉 DOM 을 호 환 하 는 브 라 우 저 에 서 는 DOM 0 급 이나 DOM 2 급 바 인 딩 이 벤트 를 통 해 이벤트 대상 을 매개 변수 로 이벤트 처리 프로그램 에 전달 하 는 것),당시 IE 브 라 우 저 에 서 는 DOM 0 급 으로 시간 처리 프로그램 을 지정 하면 이벤트 대상 은 window 의 이벤트 속성 에 저장 되 며,attachEvent()로 시간 처리 프로그램 을 지정 하면이벤트 대상 은 이벤트 처리 프로그램 에 매개 변수 로 전 달 됩 니 다.DOM 을 호 환 하 는 브 라 우 저의 이벤트 대상 의 값 과 IE 의 이벤트 대상 의 값 에 차이 가 있 습 니 다.그러나 이들 은 모두 공 통 된 값 인 type(즉,촉발 되 는 시간의 유형)을 가지 고 있다.DOM 을 호 환 하 는 브 라 우 저 에서 이벤트 대상 의 target 속성 은 이벤트 의 목 표를 표시 합 니 다.하나의 click 사건 을 예 로 들 면 target 속성 은 가장 구체 적 인 요 소 를 말 합 니 다.IE 브 라 우 저 에서 이벤트 대상 의 srcElement 속성 은 이벤트 목 표를 표시 합 니 다.
이 사례 에서 나 는 가장 바깥쪽 div(id 는 warp)에 click 의 이벤트 처리 프로그램 을 추가 했다.이벤트 목표 의 id 값 을 판단 하여 트리거 이벤트 의 가장 구체 적 인 노드 를 확인 합 니 다.이벤트 대상 의 id 값 이 pre 이면 이전 그림 으로 전환 하고 이벤트 대상 의 id 값 이 next 이면 다음 그림 으로 전환 합 니 다.이벤트 에이 전 트 를 사용 합 니 다.이벤트 에이 전 트 는 사용 하 는 메모 리 를 줄 일 수 있 습 니 다.
함수 절 류 는 이 사례 에서 함수 절 류 를 사용 하 는 것 은 resize 사건 을 연속 으로 촉발 할 때 브 라 우 저의 계 산 량 을 줄 이기 위해 서 입 니 다.브 라 우 저의 계 산 량 이 너무 많 으 면 브 라 우 저가 느 려 지고 심지어 무 너 지기 때 문 입 니 다.함수 절 류 는 이벤트 가 실 행 될 때 이벤트 처리 프로그램 에서 즉시 계산 하 는 것 이 아니 라 setTimeout 이나 setInterval 을 사용 하여 지 정 된 시간 후에 계산 하 는 것 입 니 다.
타이머 설정 과 타이머 제거주로 나 도 아직 완전히 이해 하지 못 했다.브 라 우 저 는 다 중 스 레 드 입 니 다.타 이 머 를 여 는 것 은 브 라 우 저의 타 이 머 스 레 드 입 니 다.js 실행 프로그램 은 브 라 우 저의 또 다른 스 레 드 입 니 다.브 라 우 저 는 이 두 스 레 드 를 제외 하고 다른 스 레 드 가 없습니다.나 도 브 라 우 저 스 레 드 간 의 관 계 를 알 게 된 후에 나 는 다시 한 편의 글 을 쓸 것 이다.
이 인 스 턴 스 에서 그림 의 투명 도 를 바 꾸 는 것 은 타이머 설정 을 통 해 점점 커지 거나 작 아 지 는 것 입 니 다.다음 그림 의 불투명 도 를 높이 기 전에 현재 그림 의 불투명 도 를 0 으로 줄 여야 합 니 다.
페이지 를 열 어 자동 으로 재생 하 는 것 도 타이머 로 이 루어 집 니 다.재생 을 중단 하려 면 타이머 를 제거 합 니 다.
js 코드 는 다음 과 같 습 니 다.
// window load 。 dom0 ， window load ， ： window.onload ， ， ， ， 。 attachEvent（） addEventListener（） ， 。
function addLoadEvent(func){
var oldLoad = window.onload;
if(typeof oldLoad != 'function'){
window.onload = func();
}else{
window.onload = function(){
oldLoad();
func();
}
}
}
// class list , position absolute .list
// 0， margin: auto 0;
function setListHeight(){
var list = document.getElementById('list');
var imgItem = list.getElementsByTagName('img')[0];
var height = imgItem.offsetHeight;
var list = document.getElementById('list');
list.style.height = height + 'px';
}
// li ， css
function setLiIndex(){
var list = document.getElementById('list');
var li = list.getElementsByTagName('li');
var liLen = li.length;
for(var i = 0;i<liLen;i++){
li[i].style.zIndex = liLen-i;
}
}
var index = 1;//index ,index
var timer;// ，
//
var untilEvent = {
addEvent:function(element,type,hander){
if(element.addEventListener){
element.addEventListener(type,hander,false);
}else if(element.attachEvent){
element.attachEvent('on'+type,hander);
}else{
element['on'+type] = hander;
}
},
getEvent:function(event){
return event?event:window.event;
},
getTarget:function(event){
return event.target||event.srcElement;
}
};
function btnClick(){
var warp = document.getElementById('warp');
untilEvent.addEvent(warp,'click',function(event){
var event = untilEvent.getEvent(event);
var target = untilEvent.getTarget(event);
switch(target.id){
case 'pre': if(index == 1){// ， " " ，
index =3;
}else{
--index;
}
anmitate();
break;
case 'next':if(index == 3){// ， " " ，
index = 1;
}else{
++index;
}
anmitate();
break;
}
});
}
//
function decline(cur,inverTime,inverOpacity){
var opacityed = parseFloat(cur.style.opacity);
if(opacityed > 0){
cur.style.opacity = opacityed-inverOpacity;
setTimeout(function(){
decline(cur,inverTime,inverOpacity);
},inverTime);
}
}
//
function anmitate(){
var list = document.getElementById('list');
var imgs = list.getElementsByTagName('img');
var imgsLen = imgs.length;
var whole = 300;//
var inverTime = 5;//
var inverOpacity = 1/(whole/inverTime);
for(var i = 0;i<imgsLen;i++){
decline(imgs[i],inverTime,inverOpacity);
}
var go = function(){
var opacityed = parseFloat(imgs[index - 1].style.opacity);
if(opacityed < 1){
imgs[index-1].style.opacity = opacityed + inverOpacity;
setTimeout(go,inverTime);
}
};
go();
}
//
function play() {
timer = setTimeout(function () {
if(index == 3){
index = 1;
}else{
++index;
}
anmitate();
play();
//
}, 3000);
}
// , ， ，
function stop() {
clearTimeout(timer);
}
// div
function getWarp(){
var warp = document.getElementById('warp');
untilEvent.addEvent(warp,"mouseout",play);
untilEvent.addEvent(warp,"mouseover",stop);
}
// ， ， ， ，li
function scrollEvent(){
untilEvent.addEvent(window,"resize",function(){
throttle(setListHeight);
});
}
function throttle(method,context){
clearTimeout(method.Tid);
method.Tid = setTimeout(method,70);
}
addLoadEvent(scrollEvent);
addLoadEvent(setListHeight);
addLoadEvent(setLiIndex);
addLoadEvent(btnClick);
addLoadEvent(play);
addLoadEvent(getWarp);
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JS 판단 수조 네 가지 실현 방법 상세그러면 본고는 주로 몇 가지 판단 방식과 방식 판단의 원리를 바탕으로 문제가 있는지 토론하고자 한다. 예를 들어 html에 여러 개의 iframe 대상이 있으면 instanceof의 검증 결과가 기대에 부합되지 않을...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
