javascript - Javascript 代码在 ios 和 Safari 中不起作用
问题描述
我的 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>
这是工作笔上的链接,当您单击卡片时,它会反转并显示随机图片,但在 safari 和 ios 中,它会在单击卡片并反转后显示卡片。任何帮助和提示将不胜感激。
解决方案
我简单地为 web-kit 转换添加注释,就像您已经使用“-webkit-backface-visibility: hidden”一样。
Chrome 是最优化的浏览器。Safari 和 chrome 共享 web-kit 实现,但 chrome 看起来像是读心术。对于 safari,您必须使用 web-kit 前缀而不需要 chrome。
尝试这个 :
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;
}
<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>
推荐阅读
- sql - 添加外键约束时出错?
- vue.js - Vuejs:无法解析文件'particles.js'
- angular - 名称为“recaptchaReactive”的表单控件没有值访问器
- javascript - CSS Grid - 向上移动一行的最佳方式?
- r - 正则表达式,根据标点符号 R 分隔?
- c++ - 如何使用 std::array 构造函数参数 C++ 对 const std::array 成员进行列表初始化
- ios - 指纹身份验证如何与 iOS/Android 配合使用?
- r - 模块化 R Shiny 代码:模块中的 ObserveEvent 函数
- sql - 如何在 vb.net asp.net 中执行搜索功能?
- jquery - 选择jquery确认按钮后删除按钮