>  기사  >  웹 프론트엔드  >  jquery 재생 효과를 전환하려면 썸네일을 클릭하세요.

jquery 재생 효과를 전환하려면 썸네일을 클릭하세요.

php中世界最好的语言
php中世界最好的语言원래의
2018-04-25 10:40:401765검색

이번에는 jquery가 썸네일을 클릭하여 재생을 전환하는 효과에 대해 알려드리겠습니다. jquery가 썸네일을 클릭하여 재생을 전환할 때의 주의사항은 무엇인가요?

jquery 동영상 재생 전환을 위한 썸네일 클릭은 Youku 동영상 재생을 위한 동영상 재생 탭 코드 전환을 위한 매우 실용적인 재생 코드입니다.

작업 렌더링:

팁: 브라우저가 정상적으로 실행되지 않으면 탐색 모드를 전환해 보세요.
귀하에게 공유된 jquery 클릭 썸네일 전환 비디오 재생 특수 효과 코드는 다음과 같습니다

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery点击缩略图切换视频播放</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* videobox */
.videobox{background:#ff6600;border:solid 5px #ff6600;width:408px;margin:30px auto 0 auto;}
.video-img{width:408px;height:266px;overflow:hidden;}
.video-list{height:78px;padding:15px 0 0 0;}
.video-list li{width:78px;height:59px;overflow:hidden;position:relative;float:left;border:solid 2px #fff;margin:0 10px;cursor:pointer;}
.video-list li .icon-video{position:absolute;left:22px;top:12px;width:33px;height:33px;z-index:99;}
.video-list li.now .icon-video{display:none;}
</style>
</head>
<body>
<p class="videobox">
 <p class="video-img">
 <embed id="js_videoCon_1" class="js_videoCon"  src="http://player.youku.com/player.php/sid/XNTMyNzE2ODk2/v.swf" allowFullScreen="true" quality="high" width="408" height="266" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
 <embed id="js_videoCon_2" class="js_videoCon" style="display:none" src="http://player.youku.com/player.php/sid/XNTMyNzM4MzA4/v.swf" allowFullScreen="true" quality="high" width="408" height="266" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
 <embed id="js_videoCon_3" class="js_videoCon" style="display:none" src="http://player.youku.com/player.php/sid/XNTMyNzQ1MjQw/v.swf" allowFullScreen="true" quality="high" width="408" height="266" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
 <embed id="js_videoCon_4" class="js_videoCon" style="display:none" src="http://player.youku.com/player.php/sid/XNTMyODE3NTU2/v.swf" allowFullScreen="true" quality="high" width="408" height="266" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
 </p>
 <p class="video-list">
 <ul>
  <li class="now" id="http://player.youku.com/player.php/sid/XNTMyNzE2ODk2/v.swf" video="1" vid="1">
  <img src="images/video_1.jpg" width="78" height="59">
  <img src="images/icon-video.png" class="icon-video">
  </li>
  <li id="http://player.youku.com/player.php/sid/XNTMyNzM4MzA4/v.swf" video="2" vid="2">
  <img src="images/video_2.jpg" width="78" height="59">
  <img src="images/icon-video.png" class="icon-video">
  </li>
  <li id="http://player.youku.com/player.php/sid/XNTMyNzQ1MjQw/v.swf" video="3" vid="3">
  <img src="images/video_3.jpg" width="78" height="59">
  <img src="images/icon-video.png" class="icon-video">
  </li>
  <li id="http://player.youku.com/player.php/sid/XNTMyODE3NTU2/v.swf" video="4" vid="4">
  <img src="images/video_4.jpg" width="78" height="59">
  <img src="images/icon-video.png" class="icon-video">
  </li>
 </ul>
 </p>
</p>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 // 切换视频
 $(".video-list li").click(function(){
 var obj = $(this);
 var video_id = obj.attr("video");
 var path = obj.attr("id");
 var vid = obj.attr("vid");
 $(".js_videoCon").hide();
 $("#js_videoCon_"+vid).show();
 obj.addClass("now").siblings().removeClass("now");
 });
});
</script> 
</p>
<p style="text-align:center;clear:both"><br>
</p>
</body>
</html>

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 내용을 보려면 PHP의 다른 관련 기사를 주목하십시오. 중국사이트!

추천 도서:

jQuery 포커스 차트의 가로 스크롤을 구현하는 방법

jquery+css3을 사용하여 마우스 및 양식 상호 작용 구현

위 내용은 jquery 재생 효과를 전환하려면 썸네일을 클릭하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.