jQuery是一款非常強大的JavaScript框架,它能夠輕松地實現(xiàn)各種特效和動畫效果。其中,視頻展示效果也是jQuery所擅長的一個方向。下面,我們就來介紹一個簡單的jQuery視頻展示效果案例。
$(document).ready(function(){ // 點擊展示視頻 $('.show-video').on('click', function(){ // 隱藏封面圖和按鈕 $(this).parent().find('.video-cover, .video-btn').hide(); // 生成視頻iframe var videoUrl = $(this).data('video'); var iframeHtml = '<iframe src="' + videoUrl + '" frameborder="0" allowfullscreen></iframe>'; // 顯示視頻 $(this).parent().find('.video-wrapper').html(iframeHtml).show(); }); });
上面的代碼使用了jQuery的事件綁定功能,當用戶點擊展示視頻按鈕時,會觸發(fā)對應的事件處理函數(shù)。在函數(shù)中,首先隱藏封面圖和按鈕,然后根據(jù)data-video屬性中存儲的視頻地址生成一個對應的iframe標簽,并將其插入到指定的容器中顯示。
整個效果非常簡單易懂,如果您也需要實現(xiàn)這樣的視頻展示效果,不妨借鑒一下以上代碼。希望本篇文章能夠?qū)δ兴鶐椭?/p>
上一篇div css題庫
下一篇jquery視口大小刷新