首頁(yè) 猿問(wèn) 加載/替換 data-src...

加載/替換 data-src 中指定的圖像或視頻

Html5

白衣染霜花 2023-09-11 16:24:44

我的目標(biāo)是顯示 div 中顯示的不同圖像或視頻，當(dāng)其他元素懸停在上面時(shí)，該圖像或視頻會(huì)發(fā)生變化。我想我可以通過(guò)檢查 a 中指定的圖像文件data-src并將其加載到img頁(yè)面上的標(biāo)簽中來(lái)僅處理圖像。但是，我需要將標(biāo)記更改為img指定video電影文件時(shí)的標(biāo)記 - 這就是我需要的幫助。您可以在此處查看“工作”圖像版本（第三個(gè)項(xiàng)目中沒(méi)有占位符視頻，因此data-src不會(huì)顯示）： https://codepen.io/moy/pen/BaNxzdL所以當(dāng)前頁(yè)面上我有這個(gè)空?qǐng)D像標(biāo)簽：<div class="carousel__bg"> <img src="" /></div>圖像文件在多個(gè)輪播項(xiàng)目上指定，如下data-src例所示：<div class="carousel__item" data-src="img/content/1-wide.jpg"> <div class="carousel__content"> <h4 class="carousel__title">Behind The Scenes</h4> <span class="carousel__flag">// Featured</span> <h2 class="carousel__subtitle">Denim Cox in Fuck Yes Dude!</h2> <a href="#" class="carousel__btn">Read the Article</a> </div> <img src="img/content/1.jpg" class="carousel__image" /></div>獲取圖像 URL 并將其添加到頁(yè)面的 javascript 是這樣的：$(function() { var overlay = $('.carousel__bg img'), cached = {}; $('.carousel__item').mouseenter(function() { var item = $(this), spot = $(this).index('.carousel__item'), value = item.attr('data-src'); overlay.fadeTo(0,0).attr('src', value); if (!overlay[0].complete && !cached[spot]) { cached[spot] = true; $('.carousel__bg').addClass('loading'); overlay.one('load', function() { $('.carousel__bg').removeClass('loading'); overlay.fadeTo(300,1); }); } else overlay.fadeTo(300,1); }) .mouseleave(function() { overlay.finish(); });});顯然，問(wèn)題是如果我指定data-src="video/safari.mp4"它就不起作用，因?yàn)樗?dāng)前正在嘗試將視頻添加到元素中img。那么我該如何在 img/video 標(biāo)簽之間切換呢？一個(gè)相關(guān)的問(wèn)題是能夠加載文件的 mp4 + webm/ogg 版本嗎？那么是否需要重新設(shè)計(jì)以根據(jù)擴(kuò)展名將imgorvideo元素“注入”到頁(yè)面上？我嘗試使用 if/else 語(yǔ)句來(lái)檢查是否data-src包含.mp4擴(kuò)展名，并且只是將video頁(yè)面上的元素硬編碼為文本，但無(wú)法使其工作。:/這些文件可能非常大，這就是為什么我在需要它們之前才加載它們。編輯順便說(shuō)一句，我決定將這些物品放入輪播中，看看這種效果是否有效 - 效果非常好！但是，我注意到當(dāng)您將鼠標(biāo)懸停在上一個(gè)/下一個(gè)按鈕上時(shí)，我在 CSS 中淡出圖像的方式（懸停時(shí)淡出所有圖像.carousel，然后定位單個(gè)項(xiàng)目并覆蓋）現(xiàn)在是一個(gè)問(wèn)題不要淡入。有人有更好的方法來(lái)處理這個(gè)問(wèn)題嗎？我嘗試了 100% CSS 方法，但也許添加一個(gè)類會(huì)更好？光滑的輪播示例：https ://codepen.io/moy/pen/JjdvRyG

查看完整描述

1 回答

紅糖糍粑

TA貢獻(xiàn)1815條經(jīng)驗(yàn) 獲得超6個(gè)贊

元素video部分并不難，重要的部分是獲取視頻的 mime 類型以添加到元素中source。它data-src采用視頻 url 數(shù)組（不同類型），并在找到類型后將不同的源添加到元素中。

我更新了你的代碼筆

至于按鈕，它們位于.carousel元素內(nèi)部，因此懸停將冒泡到基于該按鈕設(shè)計(jì)樣式的所有元素。我使一些元素更加具體，因此它們只會(huì)在項(xiàng)目列表懸停時(shí)改變樣式。

最后，為了讓監(jiān)聽(tīng)器適用于 slick 元素，我將它們更改為.on.

var VIDEO_TYPES = {

'mp4': 'video/mp4',

'webm': 'video/webm',

'ogv': 'video/ogg',

}

/**

* Slick

*/

$(document).ready(function() {

$('.slick-carousel').slick({

//centerMode: true,

centerPadding: '0',

slidesToShow: 3,

arrows: true,

dots: false,

prevArrow: '<a class="slick-arrow slick-arrow--prev"><span>←</span></a>',

nextArrow: '<a class="slick-arrow slick-arrow--next"><span>→</span></a>',

responsive: [{

breakpoint: 960,

settings: {

centerMode: true,

slidesToShow: 1

}

},

{

breakpoint: 600,

settings: {

centerMode: true,

slidesToShow: 1

}

},

{

breakpoint: 480,

settings: {

centerMode: true,

slidesToShow: 1

}

]

})

.on('setPosition', function(event, slick) {

slick.$slider.find(".slick-slide .tile:not(.position-set)").addClass('position-set').css('height', slick.$slideTrack.height() - 30 + 'px');

});

/**

* Image Swap

*/

var cached = {};

var overlay_video = $(".carousel__bg video");

var overlay_img = $(".carousel__bg img");

var overlay = $(".carousel__bg");

$(".carousel__item")

.on('mouseenter', function() {

var item = $(this),

spot = $(this).index(".carousel__item"),

value = item.data("src");

overlay_video.empty();

var overlay_item;

overlay.fadeTo(0, 0);

//videos will have an array ur urls

var is_video = value instanceof Array;

if(is_video) {

overlay_item = overlay_video;

overlay_img.attr("src", '');

overlay_video.append(value.map((url) => {

var extension = url.split('.').pop();

var type = VIDEO_TYPES[extension];

return `<source src="${url}" type="${type}">`

}));

} else {

overlay_item = overlay_img;

overlay_img.attr("src", value);

}

//force the video element to reload

overlay_video.get(0).load();

if (!overlay_item.complete && !cached[spot]) {

cached[spot] = true;

overlay.addClass("loading");

overlay_item.one(is_video ? "loadeddata" : "load", function() {

overlay.removeClass("loading");

overlay.fadeTo(300, 1);

});

} else overlay.fadeTo(300, 1);

})

.on('mouseleave', function() {

overlay.finish();

});

/**

* Base styling.

*/

html {

background: rgb(255,255,255);

font-size: 62.5%;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

-webkit-overflow-scrolling: touch;

-webkit-text-size-adjust: 100%;

}

body {

background-color: transparent;

color: rgb(0,0,0);

font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;

font-family: 'Roboto', sans-serif;

font-size: 1.6rem;

font-weight: 400;

line-height: 1.6rem;

margin: 0;

padding: 30px 0 0;

text-rendering: optimizeLegibility;

}

/**

* Carousel

*/

.carousel {

background: rgb(0,0,0);

color: rgb(255,255,255);

height: 640px;

margin: 0 auto;

overflow: hidden;

position: relative;

width: 100%;

max-width: 1200px;

}

.carousel:before,

.carousel:after {

background: rgba(255,255,255,.25);

content: "";

height: 100%;

position: absolute;

top: 0;

left: 33.33333%;

width: 1px;

z-index: 30;

}

.carousel:after {

left: 66.66666%;

}

/**

* Background (fullwidth) image

*/

.carousel__bg {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

height: 100%;

width: 100%;

}

.carousel__bg.loading {

background: url(../img/interface/loading.gif) no-repeat center center;

}

.carousel__bg img, .carousel__bg video {

display: block;

height: 640px;

object-fit: cover;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

width: 100%;

}

/**

* Individual carousel item

*/

.carousel__item {

box-sizing: border-box;

float: left;

height: 640px;

position: relative;

width: 33.33333%;

}

.carousel__item:hover {

cursor: pointer;

}

/* Text Content */

.carousel__content {

background: rgba(0,0,0,.45);

box-sizing: border-box;

color: rgb(255,255,255);

height: 100%;

min-height: 100%;

padding: 30px;

position: absolute;

top: 0;

left: 0;

width: 100%;

z-index: 15;

}

.carousel__title,

.carousel__subtitle,

.carousel__flag {

color: rgb(255,255,255);

letter-spacing: 1px;

font-family: 'Anton', sans-serif;

font-weight: 400;

line-height: 1;

margin: 0 0 5px;

padding: 0;

text-transform: uppercase;

}

.carousel__title {

font-size: 20px;

transition: all .25s;

}

.carousel__subtitle {

display: none;

font-size: 48px;

}

.carousel__flag {

color: rgb(45,190,193);

font-size: 14px;

}

/* Button */

.carousel__btn {

background: transparent;

border: 1px solid rgb(255,255,255);

box-sizing: border-box;

color: rgb(255,255,255);

display: block;

font-family: 'Anton', sans-serif;

font-size: 12px;

font-weight: 400;

height: 45px;

line-height: 45px;

letter-spacing: 1px;

opacity: 0;

position: absolute;

padding: 0 30px;

bottom: 30px;

left: 30px;

right: 30px;

text-align: center;

text-decoration: none;

text-transform: uppercase;

transition: all .15s;

-webkit-backface-visibility: hidden;

}

.carousel__btn:visited {

background: transparent;

}

.carousel__btn:focus,

.carousel__btn:hover {

background: rgb(45,190,193);

border-color: rgb(45,190,193);

}

/* Image */

.carousel__image {

display: block;

height: 100%;

opacity: 1;

object-fit: cover;

transition: all .30s;

position: relative;

width: 100%;

max-width: 100%;

-webkit-backface-visibility: hidden;

}

/* When hovering over the carousel, fade all the titles out */

.carousel>.slick-carousel>.slick-list:hover .carousel__title {

opacity: .30;

}

/* But not the one contained without the 'item' you're hovering over */

.carousel:hover .carousel__item:hover .carousel__title {

opacity: 1;

}

/* Fade all images out so the fullwidth background image is visble */

.carousel>.slick-carousel>.slick-list:hover .carousel__image {

opacity: 0;

}

/* Hide the flag element */

.carousel>.slick-carousel>.slick-list:hover .carousel__flag {

display: none;

}

/* Show the subtitle */

.carousel:hover .carousel__item:hover .carousel__subtitle {

display: block;

}

/* Display the CTA of the active item */

.carousel:hover .carousel__item:hover .carousel__btn {

opacity: 1;

}

/* Slick Prev/Next */

.slick-carousel,

.slick-list,

.slick-track {

height: 100%;

min-height: 100%;

}

.slick-arrow {

background: transparent;

border: 1px solid rgb(255,255,255);

color: rgb(255,255,255);

display: block;

font-family: 'Anton', sans-serif;

font-size: 24px;

height: 45px;

line-height: 45px;

margin-top: -30px;

overflow: hidden;

position: absolute;

top: 50%;

left: 30px;

text-align: center;

transform: rotate(45deg);

transition: all .15s;

width: 45px;

z-index: 60;

}

.slick-arrow:hover {

background: rgb(255,255,255);

color: rgb(0,0,0);

}

.slick-arrow span {

display: block;

transform: rotate(-45deg);

}

.slick-arrow--next {

left: auto;

right: 30px;

}

/* Slick Core */

.slick-slider

{

position: relative;

display: block;

box-sizing: border-box;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

-webkit-touch-callout: none;

-khtml-user-select: none;

-ms-touch-action: pan-y;

touch-action: pan-y;

-webkit-tap-highlight-color: transparent;

}

.slick-list

{

position: relative;

display: block;

overflow: hidden;

margin: 0;

padding: 0;

}

.slick-list:focus

{

outline: none;

}

.slick-list.dragging

{

cursor: pointer;

cursor: hand;

}

.slick-slider .slick-track,

.slick-slider .slick-list

{

-webkit-transform: translate3d(0, 0, 0);

-moz-transform: translate3d(0, 0, 0);

-ms-transform: translate3d(0, 0, 0);

-o-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

.slick-track

{

position: relative;

top: 0;

left: 0;

display: block;

margin-left: auto;

margin-right: auto;

}

.slick-track:before,

.slick-track:after

{

display: table;

content: '';

}

.slick-track:after

{

clear: both;

}

.slick-loading .slick-track

{

visibility: hidden;

}

.slick-slide

{

display: none;

float: left;

height: 100%;

min-height: 1px;

}

[dir='rtl'] .slick-slide

{

float: right;

}

.slick-slide img

{

display: block;

}

.slick-slide.slick-loading img

{

display: none;

}

.slick-slide.dragging img

{

pointer-events: none;

}

.slick-initialized .slick-slide

{

display: block;

}

.slick-loading .slick-slide

{

visibility: hidden;

}

.slick-vertical .slick-slide

{

display: block;

height: auto;

border: 1px solid transparent;

}

.slick-arrow.slick-hidden {

display: none;

}

</div>

<h4 class="carousel__title">Behind The Scenes</h4>

<span class="carousel__flag">// Featured</span>

<h2 class="carousel__subtitle">Lorem ipsum dolor</h2>

<a href="#" class="carousel__btn">Read the Article</a>

</div>

</div>

<h4 class="carousel__title">Reed Stark</h4>

<span class="carousel__flag">// Featured</span>

<h2 class="carousel__subtitle">Lorem ipsum dolor</h2>

<a href="#" class="carousel__btn">Watch the Video</a>

</div>

</div>

<h4 class="carousel__title">Fresh Drops</h4>

<span class="carousel__flag">// Featured</span>

<h2 class="carousel__subtitle">Lorem ipsum dolor</h2>

<a href="#" class="carousel__btn">See The Collection</a>

</div>

</div>

<h4 class="carousel__title">Fresh Drops</h4>

<span class="carousel__flag">// Featured</span>

<h2 class="carousel__subtitle">Lorem ipsum dolor</h2>

<a href="#" class="carousel__btn">See The Collection</a>

</div>

</div>

反對(duì) 回復(fù) 2023-09-11

1 回答
0 關(guān)注
211 瀏覽

關(guān)注

添加回答

舉報(bào)

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書(shū)簽

微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

加載/替換 data-src 中指定的圖像或視頻

加載/替換 data-src 中指定的圖像或視頻

1 回答

添加回答