<![CDATA[
<p><b><span data-ke-size="size20"> <!DOCTYPE html></span></b><br><b><span data-ke-size="size20"><html></span></b><br><b><span data-ke-size="size20"><head></span></b><br><b><span data-ke-size="size20"><span><meta</span> <span>charset</span><span>=</span><span>"utf-8"</span><span>></span></span></b><br><b><span data-ke-size="size20"><style></span></b><br><b><span data-ke-size="size20"><span>#</span><span>popupImage</span> {</span></b><br><b><span data-ke-size="size20">position: <span>fixed</span>;</span></b><br><b><span data-ke-size="size20">bottom: <span>-200</span><span>px</span>;</span></b><br><b><span data-ke-size="size20">right: <span>20</span><span>px</span>;</span></b><br><b><span data-ke-size="size20">width: <span>150</span><span>px</span>;</span></b><br><b><span data-ke-size="size20">opacity: <span>0</span>;</span></b><br><b><span data-ke-size="size20">transition: <span>all</span> <span>1</span><span>s</span> <span>ease</span>;</span></b><br><b><span data-ke-size="size20">}</span></b><br><br><b><span data-ke-size="size20"><span>#</span><span>popupImage</span>.<span>show</span> {</span></b><br><b><span data-ke-size="size20">bottom: <span>20</span><span>px</span>;</span></b><br><b><span data-ke-size="size20">opacity: <span>1</span>;</span></b><br><b><span data-ke-size="size20">}</span></b><br><br><b><span data-ke-size="size20"><span>#</span><span>popupImage</span>.<span>hide</span> {</span></b><br><b><span data-ke-size="size20">bottom: <span>-200</span><span>px</span>;</span></b><br><b><span data-ke-size="size20">opacity: <span>0</span>;</span></b><br><b><span data-ke-size="size20">}</span></b><br><b><span data-ke-size="size20"></style></span></b><br><b><span data-ke-size="size20"></head></span></b><br><b><span data-ke-size="size20"><body></span></b><br><br><b><span data-ke-size="size20"><span><img</span> <span>id</span><span>=</span><span>"popupImage"</span></span></b><br><b><span data-ke-size="size20"><span>src</span><span>=</span><span>"<a href="https://via.placeholder.com/150" target="_top" class="ke-link">./111.jpg</a>"</span></span></b><br><b><span data-ke-size="size20"><span>alt</span><span>=</span><span>"광고"</span><span>></span></span></b><br><br><b><span data-ke-size="size20"><script></span></b><br><b><span data-ke-size="size20"><span>window</span><span>.</span>xxonload <span>=</span> <span>function</span>() {</span></b><br><br><b><span data-ke-size="size20"><span>const</span> <span>img</span> <span>=</span> <span>document</span><span>.</span>getElementById(<span>"popupImage"</span>);</span></b><br><br><b><span data-ke-size="size20">// 1초 후 올라오기</span></b><br><b><span data-ke-size="size20"><span>setTimeout</span>(<span>function</span>() {</span></b><br><b><span data-ke-size="size20"><span>img</span><span>.</span>classList<span>.</span>add(<span>"show"</span>);</span></b><br><b><span data-ke-size="size20">}, <span>1000</span>);</span></b><br><br><b><span data-ke-size="size20">// 5초 후 내려가기</span></b><br><b><span data-ke-size="size20"><span>setTimeout</span>(<span>function</span>() {</span></b><br><b><span data-ke-size="size20"><span>img</span><span>.</span>classList<span>.</span>remove(<span>"show"</span>);</span></b><br><b><span data-ke-size="size20"><span>img</span><span>.</span>classList<span>.</span>add(<span>"hide"</span>);</span></b><br><b><span data-ke-size="size20">}, <span>5000</span>);</span></b><br><br><b><span data-ke-size="size20">};</span></b><br><b><span data-ke-size="size20"></script></span></b><br><br><b><span data-ke-size="size20"></body></span></b><br><b><span data-ke-size="size20"></html> </span></b></p>
<!-- -->
]]>
카페 게시글
도사의컴퓨터강의
괜찮은 웹 소스....오른쪽하단에서 서서히 올라와 없어지는 그림....
김종록
추천 0
조회 29
26.06.03 11:28
댓글 0
다음검색
