찾다

집 >웹 프론트엔드 >JS 튜토리얼 >Jquery는 비디오 재생에서 조명을 끄는 효과를 실현합니다.

Jquery는 비디오 재생에서 조명을 끄는 효과를 실현합니다.

WBOY
WBOY원래의
2016-05-16 17:33:081876검색

이 예에서는 Jquery를 사용하여 비디오 재생 페이지의 조명을 끄는 효과를 얻습니다. 영상 표시는 HTML5 요소인 embed 요소를 사용하므로 HTML5를 지원하는 브라우저를 사용하시는 것이 좋습니다.
효과 미리보기 URL: http://www.keleyi.com/keleyi/phtml/guandeng/

전체 코드:

코드 복사 코드는 다음과 같습니다.



<제목> , 글꼴 크기:13px; 여백:0px;}
#container { 너비:960px; 정렬:왼쪽; 위치:상대적; z-index:102;}
#description { float:left; 너비:320px;border:solid 1px #dcdcdc; 패딩: 10px 20px;}
#command { 위치: 높이: 25px; 블록; 여백: 25px 0 0 0;}
.lightSwitcher {position:absolute; z-index:101; background-image:url(http://www.keleyi.com/keleyi/phtml/guandeng/light_bulb_off. png);
배경 -반복:no-repeat; 배경 위치:왼쪽; 개요:없음; 텍스트 장식:없음;}
.lightSwitcher: 밑줄;}
# 그림자 {배경-이미지:url(http://www.keleyi.com/keleyi/phtml/guandeng/shade1x1.png) 위치:절대:0; 100%; z-색인: 100;}
.turnedOff {color:#ffff00; background-image:url(http://www.keleyi.com/keleyi/phtml/guandeng/light_bulb.png);}
#clickHere {위치: 절대; 상단: -25px; 왼쪽:130px;}