개체의 종료 시간이나 반복되는 개체에서 한 과정이 끝나는 시간의 값을 반환하거나 설정한다.
인수
: (속성 문자열) 속성값은 개체의 종료 시간이나 반복되는 개체에서 한 과정이 끝나는 시간의 값을 나타내는 문자열이다.
clock-value
시간 양식 h:min:s.f 와 같은 시간값이다.
id .begin[ +/-clock-value] 다른 개체의 시작시간에 상대적인 종료시간을 정의한다.clock-value 은 선택적 요소이다.
id .end[ +/-clock-value] 다른 개체의 종료시간에 상대적인 종료시간을 정의한다.clock-value 은 선택적 요소이다.
indefinite
엘레멘트 개체가 무한정 계속된다.
이 속성은 읽기/쓰기이며 디폴트값은 없다.
특기
end 애트리뷰트는 모체 엘레멘트의 타임라인이 시작되는 시간(0 )에 따른 절대 시간값이다.dur begin dur 와 end 애트리뷰트를 한개체에서 동시에 사용하지 말아야 한다.
end 애트리뷰트는 여러개의 end 시간값들을 가질 수 있다.end="A.onfocus+10s" 로 지정한다.end="A.end-10s" 로 지정한다.end="4; oObject.click+1" 으로 지정한다.
time2 time t: time 비헤이버는 clock-value 형식과 값 indefinite 만을 지원한다.
이속성은 IE6 부터 Transition
적용
참고
begin dur end
endElement endElementAt HTML+time
이 속성은 (영문 ) W3C SMIL 2.0 S ynchronized M ultimedia I ntegration L anguage)에서 정의되었다.
즉시 나타나 총 10초 후에 감춰진다.
3초후에 나타나 총 10초 후에 감춰진다.
6초후에 나타나 총 10초 후에 감춰진다.
다시 시작
시작시간이 다르고 종료시간은 같다.
<HTML xmlns:t="urn:schemas-microsoft-com:time">
<HEAD>
<STYLE> .time{ behavior: url(#default#time2);}</STYLE>
<IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY>
<DIV id="div1Obj" class="time divBlock" begin="0" end="10" timeaction="visibility" style="color:red;border:solid 1 red">
<IMG src=../../gif/rfexample.gif> 즉시 나타나 총 10초 후에 감춰진다.
</DIV>
<DIV id="div2Obj" class="time divBlock" begin="3" end="10" timeaction="visibility" style="color:green;border:solid 1 green">
<IMG src=../../gif/rfexample.gif> 3초후에 나타나 총 10초 후에 감춰진다.
</DIV>
<DIV id="div3Obj" class="time divBlock" begin="6" end="10" timeaction="visibility" style="color:blue;border:solid 1 blue">
<IMG src=../../gif/rfproperty.gif> 6초후에 나타나 총 10초 후에 감춰진다.
</DIV>
<BUTTON id="butObj" onclick="div1Obj.beginElement();div2Obj.beginElement();div3Obj.beginElement();">다시 시작</BUTTON><BR>
<SCRIPT>
document.write('div1Obj.begin='+div1Obj.begin+', div1Obj.end='+div1Obj.end+'<BR>');
document.write('div2Obj.begin='+div2Obj.begin+', div2Obj.end='+div2Obj.end+'<BR>');
document.write('div3Obj.begin='+div3Obj.begin+', div3Obj.end='+div3Obj.end+'<BR>');
</SCRIPT>
</BODY>
</HTML>
즉시 나타나서 단추를 클릭하면 감춰진다.
문단 감추기
다시 시작
end 애트리뷰트를 단추 클릭 이벤트와 연결하였다.
<HTML xmlns:t="urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>.time{behavior: url(#default#time2);}</STYLE>
</HEAD>
<BODY>
<DIV id="divAObj" class="time" begin="0" end="but1Obj.click" timeAction="display" style="color:red;border:solid 1 red">
<IMG src=../../gif/rfexample.gif> 즉시 나타나서 단추를 클릭하면 감춰진다.
</DIV>
<BUTTON id="but1Obj">문단 감추기</BUTTON>
<BUTTON id="but2Obj" onclick="divAObj.beginElement()">다시 시작</BUTTON><BR>
<SCRIPT>
document.write('divAObj.end='+divAObj.end);
</SCRIPT>
</BODY>
</HTML>
<HTML xmlns:t="urn:schemas-microsoft-com:time">
<HEAD>
<STYLE> .time{behavior: url(#default#time2);}</STYLE>
<IMPORT namespace=t urn="urn:schemas-microsoft-com:time" implementation="#default#time2" />
</HEAD>
<BODY>
<T:TRANSITIONFILTER id="tfObj" type="fade" dur="8" end="4" targetElement="divBObj"/>
<DIV class="time" id="divBObj" dur="indefinite"
style="position:relative;left:0;width:400;height:100;background-image:url(../../gif/flower1.jpg);"></DIV>
<BUTTON onclick="divBObj.beginElement()">다시 시작</BUTTON><BR>
<SCRIPT>
document.write('divBObj.end='+tfObj.end+'<BR>');
document.write('divBObj.targetElement='+tfObj.targetElement);
</SCRIPT>
</BODY>
</HTML>
DIV 내용
다시 시작
end 애트리뷰트가 여러 방식으로 종료된다.divCobj 개체는 8초 후, 단추를 클릭하고 1초 후, 혹은 마우스 커서를 밖으로 이동하고 1초 후에 종료된다.
<HTML xmlns:t="urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>
.time{behavior: url(#default#time2);}
#divCobj{ border:solid 2 blue;padding:10;font:14pt;color:yellow;font-weight:bold;background-color:green;width:300;}
</STYLE>
<IMPORT namespace=t urn="urn:schemas-microsoft-com:time" implementation="#default#time2" />
</HEAD>
<BODY>
<T:PAR id="parObj" begin="1;butCobj.click">
<DIV id="divCobj" begin="1" class="time" end="8;butCobj.click+1;parObj.mouseleave+1">
<T:TRANSITIONFILTER begin="divCobj.begin" dur="3" mode="in" type="fade"/>
<T:TRANSITIONFILTER begin="divCobj.End-1;" dur="1" mode="out" type="pushWipe"/>
<IMG src="../../gif/flower1.jpg" width=300><BR>
DIV 내용</DIV>
</T:PAR>
<BUTTON id="butCobj" onclick="parObj.beginElement()">다시 시작</BUTTON><BR>
<SCRIPT>
document.write('parObj.begin=<FONT color=blue>'+parObj.begin+'</FONT><BR>');
document.write('divCobj.end=<FONT color=blue>'+divCobj.end+'</FONT><BR>');
document.write('divCobj.targetElement=<FONT color=blue>'+tfObj.targetElement+'</FONT>');
</SCRIPT>
</BODY>
</HTML>
즉시 나타나 총 10초 후에 감춰진다.
6초후에 나타나 총 10초 후에 감춰진다.
