我有似乎在所有浏览器和平台上都可以使用的javascript代码,但在ios和Safari中不起作用,我试图在首选项中启用JS,但没有帮助。这是html代码的一部分:
var images = [];
(function() {
generateCards()
})();
var cards = document.querySelectorAll('.card');
Array.from(cards).forEach(function(card) {
card.addEventListener('click', function() {
Array.from(card.querySelectorAll('.back, .front')).forEach(function(el) {
['back', 'front'].forEach(function(s) {
el.classList.toggle(s)
});
});
});
});
//Displaying different images on click
function cardImg(index) {
var cardNewImg = randomIntFromInterval(2,10);
if (images[index] !== undefined)
{
images[index] = -1;
}
while (images.indexOf(cardNewImg)!= -1){
cardNewImg = randomIntFromInterval(2,11);
}
images[index] = cardNewImg;
}
function generateCards() {
for (var i = 0; i < 3; i++) {
cardImg(i);
}
}
function getCard(index) {
if(!images[index].valid) {
cardImg(index)
}
document["randimg"+(index + 1)].src = "https://lp.rustaro.ru/wp-content/uploads/transformation/cards/" + images[index]+".jpg";
}
function randomIntFromInterval(min,max)
{
return Math.floor(Math.random()*(max-min+1)+min);
}
body {
font-family: sans-serif;
}
.hidden {
display: none;
}
.wrap {
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
background: #A770EF; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #FDB99B, #CF8BF3, #A770EF); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #FDB99B, #CF8BF3, #A770EF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
display: flex;
justify-content: center;
align-items: center;
}
.card {
width: 200px;
height: 345px;
position: relative;
perspective: 1000px;
cursor: pointer;
margin: 0 50px;
}
.front, .back {
width: 100%;
height: 100%;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
transition: 1s;
backface-visibility: hidden;
border-radius: 10px;
}
.front {
transform: rotateY(360deg);
}
.back {
transform: rotateY(180deg);
}
.front:hover {
transform: scale(1.1);
-webkit-box-shadow: 0px 0px 20px 5px rgba(255,255,255,1);
-moz-box-shadow: 0px 0px 20px 5px rgba(255,255,255,1);
box-shadow: 0px 0px 20px 5px rgba(255,255,255,1);
}
.img1 {
width: 200px;
border-radius: 10px;
height: 345px;
}
<div class="wrap">
<div class="card">
<div class="front" onclick="getCard(0)"><img class="img1" src="https://lp.rustaro.ru/wp-content/uploads/transformation/cards/1.jpg" alt=""></div>
<div class="back"><img class="img1" src="" name="randimg1"></div>
</div>
<div class="card">
<div class="front" onclick="getCard(1)"><img class="img1" src="https://lp.rustaro.ru/wp-content/uploads/transformation/cards/1.jpg" alt=""></div>
<div class="back"><img class="img1" src="" name="randimg2"></div>
</div>
<div class="card">
<div class="front" onclick="getCard(2)"><img class="img1" src="https://lp.rustaro.ru/wp-content/uploads/transformation/cards/1.jpg" alt=""></div>
<div class="back"><img class="img1" src="" name="randimg3"></div>
</div>
</div>
当您点击卡片时,这里是工作pen上的链接,它会反转并显示随机图片,但是在Safari和ios中,单击卡片并反转后它会显示卡片退回。任何帮助和提示将不胜感激。
答案 0 :(得分:1)
我简单地为Web-kit转换添加注释,就像您已经对“ -webkit-backface-visibility:hidden”所做的一样。
Chrome是最优化的浏览器。 Safari和chrome共享Web-kit的实现,但是chrome看起来像是在读书。对于野生动物园,您无需为chrome使用web-kit前缀。
尝试一下:
...MvIiwiZSI6W119"
var images = [];
(function() {
generateCards()
})();
var cards = document.querySelectorAll('.card');
Array.from(cards).forEach(function(card) {
card.addEventListener('click', function() {
Array.from(card.querySelectorAll('.back, .front')).forEach(function(el) {
['back', 'front'].forEach(function(s) {
el.classList.toggle(s)
});
});
});
});
//Displaying different images on click
function cardImg(index) {
var cardNewImg = randomIntFromInterval(2,10);
if (images[index] !== undefined)
{
images[index] = -1;
}
while (images.indexOf(cardNewImg)!= -1){
cardNewImg = randomIntFromInterval(2,11);
}
images[index] = cardNewImg;
}
function generateCards() {
for (var i = 0; i < 3; i++) {
cardImg(i);
}
}
function getCard(index) {
if(!images[index].valid) {
cardImg(index)
}
document["randimg"+(index + 1)].src = "https://lp.rustaro.ru/wp-content/uploads/transformation/cards/" + images[index]+".jpg";
}
function randomIntFromInterval(min,max)
{
return Math.floor(Math.random()*(max-min+1)+min);
}
body {
font-family: sans-serif;
}
.hidden {
display: none;
}
.wrap {
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
background: #A770EF; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #FDB99B, #CF8BF3, #A770EF); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #FDB99B, #CF8BF3, #A770EF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
display: flex;
justify-content: center;
align-items: center;
}
.card {
width: 200px;
height: 345px;
position: relative;
perspective: 1000px;
cursor: pointer;
margin: 0 50px;
}
.front, .back {
width: 100%;
height: 100%;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
transition: 1s;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: 10px;
}
.front {
transform: rotateY(360deg);
-webkit-transform: rotateY(360deg);
}
.back {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
.front:hover {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-webkit-box-shadow: 0px 0px 20px 5px rgba(255,255,255,1);
-moz-box-shadow: 0px 0px 20px 5px rgba(255,255,255,1);
box-shadow: 0px 0px 20px 5px rgba(255,255,255,1);
}
.img1 {
width: 200px;
border-radius: 10px;
height: 345px;
}