Далее я использую условное выражение для проверки атрибута srcset, потому что IE11 не поддерживает его :
document.addEventListener("DOMContentLoaded", function(event) {
var rollOverCollectionB = document.getElementById("roll-over-collection-b").getElementsByClassName("rollover");
rollOverCollectionB = Array.prototype.slice.apply(rollOverCollectionB);
rollOverCollectionB.forEach(function(rollOverItem, i) {
console.log('rollOverItem', rollOverItem);
on("mouseover", "#" + rollOverItem.id, function(element) {
if (!element.srcset) {
var srcObj = element.src.splice(174, 0, '-hover');
srcObj.splice(362, 0, 'hover-')
rollOver(element.id, srcObj);
}
var srcObj = element.srcset.splice(174, 0, '-hover');
srcObj.splice(362, 0, 'hover-')
rollOver(element.id, srcObj);
}.bind(this, rollOverItem));
on("mouseout", "#" + rollOverItem.id, function(element) {
if (!element.srcset) {
rollOut(element.id, element.src.replace('-hover', '').replace('hover-', ''));
}
rollOut(element.id, element.srcset.replace('-hover', '').replace('hover-', ''));
}.bind(this, rollOverItem));
});
});
Это не работает, но нечетноЯ заметил, что консоль в IE регистрирует это:
rollOver src http://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dwd13910f1/images/home-page/desktop/eyes-on-you-desktop-3.-hoverjpg
Это показывает, что метод splice работает неправильно.
if (!element.srcset) {
var srcObj = element.src.splice(174, 0, '-hover');
srcObj.splice(362, 0, 'hover-')
rollOver(element.id, srcObj);
}
Можеткто-нибудь поведает мне, как я показываю, как быть с IE?
var on = function (event, elem, callback, capture) {
console.log('elem in onFunction', elem);
console.log('elem in onFunction', typeof elem);
if (typeof elem === "function") {
capture = callback; callback = elem; elem = window;
}
capture = !!capture; elem = typeof elem === "string" ? document.querySelector(elem) : elem;
if (!elem) return;
elem.addEventListener(event, callback, capture);
};
function rollOver(elem, src) {
console.log('rollOver src', src);
if (!elem.srcset) {document.getElementById(elem).src = src;}
document.getElementById(elem).srcset = src;
}
function rollOut(elem, src) {
console.log('rollOver src', src);
if (!elem.srcset) {document.getElementById(elem).src = src;}
document.getElementById(elem).srcset = src;
}
if (!String.prototype.splice) {
/** * {JSDoc} * * The splice() method changes the content of a string by removing a range of * characters and/or adding new characters. * * @this {String} * @param {number} start Index at which to start changing the string. * @param {number} delCount An integer indicating the number of old chars to remove. * @param {string} newSubStr The String that is spliced in. * @return {string} A new string with the spliced substring. */
String.prototype.splice = function (start, delCount, newSubStr) {
return this.slice(0, start) + newSubStr + this.slice(start + Math.abs(delCount)); };
}
document.addEventListener("DOMContentLoaded", function (event) {
var rollOverCollectionB = document.getElementById("roll-over-collection-b").getElementsByClassName("rollover");
rollOverCollectionB = Array.prototype.slice.apply(rollOverCollectionB);
console.log("rollOverCollectionB", rollOverCollectionB);
rollOverCollectionB.forEach(function(rollOverItem, i ) {
console.log('rollOverItem', rollOverItem);
on("mouseover", "#" + rollOverItem.id, function (element) {
if (!element.srcset) {
var srcObj = element.src.splice(174, 0, '-hover');
srcObj.splice(362, 0, 'hover-')
rollOver(element.id, srcObj);
}
var srcObj = element.srcset.splice(174, 0, '-hover');
srcObj.splice(362, 0, 'hover-')
rollOver(element.id, srcObj);
}.bind(this, rollOverItem));
on("mouseout", "#" + rollOverItem.id, function (element) {
if (!element.srcset) {
rollOut(element.id, element.src.replace('-hover', '').replace('hover-', ''));
}
rollOut(element.id, element.srcset.replace('-hover', '').replace('hover-', ''));
}.bind(this, rollOverItem));
});
});
.homepage-banner .offers-banner .button {
background-color: #000;
}
.homepage-banner .offers-banner .button a {
color: #fff;
}
.homepage-banner .offers-banner a {
margin: 0px auto;
}
.homepage-banner .offers-banner {
text-align: center;
padding: 20px 0 0;
margin: 50px auto 0;
bottom: inherit;
position: relative;
}
.homepage-banner .offers-banner h2 {
margin-bottom: 8px;
width: 90%;
font-size: 36px;
padding: 0;
line-height: 34px;
margin: 0 0 10px;
}
.homepage-banner .offers-banner p {
font-family: termina, sans-serif;
margin: 25px auto !important;
font-weight: 600;
/* font-size: 15px; */
}
.homepage-banner .offers-banner p:last-of-type {
margin-bottom: 0;
}
/* .homepage-banner .offers-banner a:hover {
color: #000;
} */
.homepage-banner .offers-banner .offer-banner-content-wrapper {
position: relative;
}
.homepage-banner .offers-banner .offers-listing-container {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
text-align: left;
margin: 0 auto;
flex-flow: nowrap;
align-self: flex-start;
justify-content: center;
}
.homepage-banner .offers-banner .offers-listing-container .item {
width: 33%;
text-align: center;
padding-bottom: 10px;
}
.homepage-banner .offers-banner .offers-listing-container .item .item-name {
margin: 20px auto 0;
}
.homepage-banner .offers-banner .offers-listing-container .item .item-name p {
text-align: center;
font-size: 16px;
line-height: 20px;
margin: 20px auto 0;
text-transform: uppercase;
}
.homepage-banner .offers-banner .offers-listing-container .item:nth-of-type(2n) {
margin: 0;
}
.homepage-banner .offers-banner .offers-listing-container .item .item-name .button.button-helper {
margin-bottom: 0;
padding: 3px 8px;
background-color: #e87ea6;
border-color: #e87ea6;
border-radius: 0;
border-style: solid;
border-width: 1px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 14px;
padding: .23em 2em;
text-align: center;
transition: all .3s ease;
outline: 0;
font-family: termina, sans-serif;
font-weight: 500;
font-style: normal;
-webkit-font-kerning: none;
-moz-font-kerning: none;
font-kerning: none;
text-transform: uppercase;
line-height: inherit;
height: inherit;
}
div#roll-over-collection-b {
position: absolute;
}
@media screen and (min-width: 1024px) and (max-width: 1199px) {
.homepage-banner .offers-banner .offers-listing-container .item {
width: 30%;
}
.homepage-banner .offers-banner .offers-listing-container .item:nth-of-type(2n) {
margin: 0 2em;
}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
.homepage-banner .offers-banner .offers-listing-container .item:nth-of-type(2n) {
margin: 0 3em;
}
.homepage-banner .offers-banner .offers-listing-container .item {
width: 26%;
}
}
@media screen and (max-width: 767px) {
.homepage-banner .offers-banner {
margin: 0;
}
.homepage-banner .offers-banner picture>img {
/* width: 100%; */
height: auto;
line-height: 0;
vertical-align: bottom;
}
.homepage-banner .offers-banner h2 {
font-size: 24px;
line-height: 26px;
width: 95%;
margin: 0 auto 10px;
}
.homepage-banner .offers-banner p {
width: 95%;
margin: 0px auto 10px;
font-size: 16px;
font-weight: 400;
}
.homepage-banner .offers-banner .button {
background-color: #fff;
}
/* .homepage-banner .offers-banner .button a {
color: #000;
} */
.homepage-banner .offers-banner .offers-listing-container {
-webkit-flex-direction: column;
flex-direction: column;
text-align: left;
margin: 0 auto;
flex-flow: wrap;
align-self: flex-start;
justify-content: center;
}
.homepage-banner .offers-banner .offers-listing-container .item {
width: 100%;
margin: 0px auto 3em;
}
.homepage-banner .offers-banner .offers-listing-container .item img {
width: 50%;
}
.homepage-banner .offers-banner .offers-listing-container .item:nth-of-type(2n) {
margin: 0px auto 3.5em;
}
.homepage-banner .offers-banner .offers-listing-container .item:last-of-type {
margin: 0px auto;
}
.homepage-banner .offers-banner .offers-listing-container .item p {
margin-bottom: 20px;
}
}
@media screen and (min-width: 480px) and (max-width: 767px) {
.homepage-banner .offers-banner .offers-listing-container .item img {
width: 56%;
}
}
@media screen and (max-width: 479px) {
.homepage-banner .offers-banner .offers-listing-container .item img {
width: 60%;
}
}
<div class="offers-banner">
<picture>
<source media=" (max-width: 767px)" srcset="images/home-page/mobile/eyes-on-you-statement-banner-mobile.jpg?$staticlink$, images/home-page/mobile/eyes-on-you-statement-banner-mobile_2x.jpg?$staticlink$ 2x" />
<source media="(min-width: 480px) and (max-width: 767px)" srcset="eyes-on-you-statement-banner-sp.jpg?$staticlink$?$staticlink$,images/home-page/smartphone/eyes-on-you-statement-banner-sp_2x.jpg?$staticlink$ 2x" />
<source media="(min-width: 768px) and (max-width: 1023px)" srcset="images/home-page/tablet/eyes-on-you-statement-banner-tablet.jpg?$staticlink$, images/home-page/tablet/eyes-on-you-statement-banner-tablet_2x.jpg?$staticlink$ 2x" />
<img class="new-makeup-banner" alt="Eyes On You!" src="images/home-page/desktop/eyes-on-you-statement-banner-desktop.jpg?$staticlink$" srcset="images/home-page/desktop/eyes-on-you-statement-banner-desktop.jpg?$staticlink$, images/home-page/desktop/eyes-on-you-statement-banner-desktop_2x.jpg?$staticlink$ 2x"
/>
</picture>
<p>Twinkle, twinkle, you star! Transform your <br> holiday look with Juicy Couture Beauty. </p>
<div class="offer-banner-content-wrapper">
<div id="roll-over-collection-b" class="offers-listing-container">
<div class="item">
<a href="$url('Product-Show','pid','1502A0116919')$">
<picture>
<source media=" (max-width: 767px)" srcset="https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dwd13910f1/images/home-page/mobile/mobile_eye_linner.jpg?$staticlink$, https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dwd13910f1/images/home-page/mobile/mobile_eye_linner_2x.jpg?$staticlink$ 2x"
/>
<source media="(min-width: 480px) and (max-width: 767px)" srcset="https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dwd13910f1/images/home-page/smartphone/smartphone_eye_linner.jpg?$staticlink$, https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dwd13910f1/images/home-page/smartphone/smartphone_eye_linner_2x.jpg?$staticlink$ 2x"
/>
<source media="(min-width: 768px) and (max-width: 1023px)" srcset="https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dwd13910f1/images/home-page/tablet/eyes-on-you-1-hover-tablet.jpg?$staticlink$, https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dwd13910f1/images/home-page/tablet/eyes-on-you-1-hover-tablet_2x.jpg?$staticlink$ 2x"
/>
<img id="hover-1" alt="Juicy Couture Oui Slay EyeLiner" class="rollover" src="https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dwd13910f1/images/home-page/desktop/eyes-on-you-desktop-1.jpg?$staticlink$ 1x"
srcset="https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dwd13910f1/images/home-page/desktop/eyes-on-you-desktop-1.jpg?$staticlink$, https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dwd13910f1/images/home-page/desktop/eyes-on-you-desktop-2x-1.jpg?$staticlink$ 2x"
/>
</picture>
<div class="item-name">
<div class="button button-helper">SHOP NOW</div>
</div>
</a>
</div>
<div class="item">
<a href="$url('Product-Show','pid','1502A0116950')$">
<picture>
<source media=" (max-width: 767px)" srcset="https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dwd13910f1/https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dwd13910f1/images/home-page/mobile/mobile_EYE_TOPPER.jpg?$staticlink$, https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dwd13910f1/images/home-page/mobile/mobile_EYE_TOPPER_2x.jpg?$staticlink$ 2x"
/>
<source media="(min-width: 480px) and (max-width: 767px)" srcset="https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dwd13910f1/images/home-page/smartphone/SMARTPHONE_EYE_TOPPER.jpg?$staticlink$, https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dwd13910f1/images/home-page/smartphone/SMARTPHONE_EYE_TOPPER_2X-.jpg?$staticlink$ 2x"
/>
<source media="(min-width: 768px) and (max-width: 1023px)" srcset="https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dwd13910f1/images/home-page/tablet/eyes-on-you-2-hover-tablet.jpg?$staticlink$, https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dwd13910f1/images/home-page/tablet/eyes-on-you-2-hover-tablet_2x.jpg?$staticlink$ 2x"
/>
<img id="hover-2" alt="Juicy Couture Lip + Eye Topper" class="rollover" src="https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dwd13910f1/images/home-page/desktop/eyes-on-you-desktop-2.jpg?$staticlink$ 1x"
srcset="https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dwd13910f1/images/home-page/desktop/eyes-on-you-desktop-2.jpg?$staticlink$, https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dwd13910f1/images/home-page/desktop/eyes-on-you-desktop-2x-2.jpg?$staticlink$ 2x"
/>
</a>
</picture>
<div class="item-name">
<div class="button button-helper">SHOP NOW </div>
</div>
</a>
</div>
<div class="item">
<a href="$url('Product-Show','pid','1502A0116930')$">
<picture>
<source media=" (max-width: 767px)" srcset="https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dwd13910f1/images/home-page/mobile/mobile_color_palette.jpg?$staticlink$, https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dwd13910f1/images/home-page/mobile/mobile_color_palette_2x.jpg?$staticlink$ 2x"
/>
<source media="(min-width: 480px) and (max-width: 767px)" srcset="https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dwd13910f1/images/home-page/smartphone/eyes-on-you-eye-liner-sp.jpg?$staticlink$, https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dwd13910f1/images/home-page/smartphone/smartphone_color_palette_2x.jpg?$staticlink$ 2x"
/>
<source media="(min-width: 768px) and (max-width: 1023px)" srcset="https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dwd13910f1/images/home-page/tablet/eyes-on-you-3-hover-tablet.jpg?$staticlink$, https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dwd13910f1/images/home-page/tablet/eyes-on-you-3-hover-tablet_2x.jpg?$staticlink$ 2x"
/>
<img id="hover-3" alt="Juicy Couture The Shady Color Palette" class="rollover" src="https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dwd13910f1/images/home-page/desktop/eyes-on-you-desktop-3.jpg?$staticlink$"
srcset="https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dwd13910f1/images/home-page/desktop/eyes-on-you-desktop-3.jpg?$staticlink$, https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dwd13910f1/images/home-page/desktop/eyes-on-you-desktop-2x-3.jpg?$staticlink$ 2x"
/>
</picture>
<div class="item-name">
<div class="button button-helper">SHOP NOW </div>
</div>
</a>
</div>
</div>
<div class="bkgrd-img">
<picture>
<source media=" (max-width: 479px)" srcset="https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dwd13910f1/images/home-page/mobile/updated_mobile_eyes_on_you_background.jpg?$staticlink$, https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dwd13910f1/images/home-page/mobile/updated_mobile_eyes_on_you_background_2x.jpg?$staticlink$ 2x "
/>
<source media="(min-width: 480px) and (max-width: 767px)" srcset="https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dwd13910f1/images/home-page/smartphone/updated_smartphone_eyes_on_you_background.jpg?$staticlink$, https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dwd13910f1/images/home-page/smartphone/smartphone_eyes_on_you_background_2x-up.jpg?$staticlink$ 2x"
/>
<source media="(min-width: 768px) and (max-width: 1023px)" srcset="https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dwd13910f1/images/home-page/tablet/eyes-on-you-background-tablet.jpg?$staticlink$, https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dwd13910f1/images/home-page/tablet/eyes-on-you-background-tablet_2x.jpg?$staticlink$ 2x "
/>
<img alt="" src="https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dwd13910f1/images/home-page/desktop/EYES_ON_YOU_desktop_HP_background.jpg?$staticlink$" srcset="https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dwd13910f1/images/home-page/desktop/EYES_ON_YOU_desktop_HP_background.jpg?$staticlink$, https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dwd13910f1/images/home-page/desktop/EYES_ON_YOU_desktop_HP_background_@2x.jpg?$staticlink$ 2x"
/>
</picture>
</div>
</div>
</div>