javascript - Javascript 在 Chrome/Firefox 中不起作用,但在 Safari 中正常
问题描述
我正在我的网站上处理图像叠加部分。通过使用滚动条位置水平调整元素的大小,三个图像位于元素中,这些图像一次堆叠并显示一个。它在 Safari 中完美运行,但在 Chrome/Firefox 中却不行。
我已经通过 w3c 验证器运行了代码并修复了所有问题,但我仍然遇到同样的问题……在 safari 中有效,但在 Chrome/Firefox 中无效。
如果有人可以为我查看下面的代码,我将不胜感激。
提前致谢,
克里斯
var xyz;
var slide1Width = $("#slide1").width();
var slide2Width = $("#slide2").width();
var slide3Width = $("#slide3").width();
var counter = 0;
$(document).ready(function(e) {
/////////Slide scroll-resize activation/////////
$(window).scroll(function(e) {
var slide1Height = $("#slide1").height();
xyz = $("body").scrollTop();
$("#inputs").text(xyz);
//When slide1 scroll-resize is enabled
if (xyz <= slide1Width && xyz >= 50) {
$("#slide2").css({
"width": xyz
});
};
//When slide2 scroll-resize is enabled
if (xyz >= slide1Width * 2 + 25 && xyz <= slide1Width * 3) {
$("#slide3").css({
"width": xyz - slide1Width * 2
});
};
var video = document.getElementById("video");
video.currentTime = (xyz - slide1Width) / 55;
if (xyz >= slide1Width && xyz < slide1Width * 2) {
$("#video").css({
"visibility": "visible"
});
} else {
$("#video").css({
"visibility": "hidden"
});
};
$("#video").height($("#slide1").height());
/*$("#video").width($("#slide1").width());*/
});
});
window.onload = function(e) {
var x = $("#slide1").width();
var y = $("#slide1").innerHeight();
$("#slide2").resizable({
containment: "parent",
minWidth: 50,
stop: function(event, ui) {
$("body").scrollTop($(this).width());
}
});
$("#slide2").css({
"height": y,
"width": 50
});
$("#slide3").resizable({
containment: "parent",
minWidth: 25,
stop: function(event, ui) {
$("body").scrollTop($(this).width() + x);
}
});
$("#slide3").css({
"height": y,
"width": 25
});
///////////Slide 3 click behaviour////////////
//Single click//
$("#slide3").click(function(e) {
$("body").scrollTop($("#slide1").width() * 2 + $(this).width());
});
//Double click//
$("#slide3").dblclick(function(e) {
$("body").scrollTop($("#slide2").width());
});
///////////Slide 2 click behaviour////////////
//Single click//
$("#slide2").click(function(e) {
$("body").scrollTop($(this).width());
});
};
$(window).resize(function() {
var x = $("#slide1").width();
var y = $("#slide1").innerHeight();
var z = $("#slide2").width();
var slide3width = $("#slide3").width();
var result = z / x;
var b = result * 100;
var c = b.toString() + "%";
var result3 = slide3width / x;
var slide3percentInt = result3 * 100;
var slide3percentString = slide3percentInt.toString() + "%";
$("#slide2").css({
"height": y,
"width": c
});
$("#slide2").resizable({
minWidth: 50,
containment: "parent"
});
$("#slide3").css({
"height": y,
"width": slide3percentString
});
$("#slide3").resizable({
minWidth: 25,
containment: "parent"
});
});
body {
background-color: black;
height: 5000px;
}
#box1 {
width: 100%;
height: 100px;
background-color: black;
}
#wrapper {
position: fixed;
width: 80%;
height: auto;
margin: auto;
left: 10%;
}
img {
width: 100%;
height: auto;
z-index: 1;
}
#slide1 {
position: absolute;
float: left;
width: 100%;
height: auto;
padding: 0;
margin: 0;
border: none;
z-index: 1;
}
#slide2 {
position: absolute;
float: left;
padding: 0;
margin: 0;
border: none;
background-image: url("WESetBW.svg");
background-repeat: no-repeat;
background-size: cover;
z-index: 2;
}
#slide3 {
position: absolute;
padding: 0;
margin: 0;
border: none;
background-image: url("WESetViz.svg");
background-repeat: no-repeat;
background-size: cover;
z-index: 4;
}
#video {
position: relative;
float: left;
margin: 0;
border: none;
z-index: 3;
visibility: hidden;
width: 100%;
object-fit: cover;
}
#inputs {
height: 20px;
width: 100px;
background-color: white;
color: red;
position: fixed;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<title>Untitled Document</title>
</head>
<body>
<div id="wrapper">
<div id="box1">
</div>
<div id="slide1">
<img src="WESet-photo.svg" alt="World's End set" />
</div>
<div id="slide2">
</div>
<div id="slide3">
</div>
<video id="video">
<source src="WEsetOriginalVideo.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div id="inputs">
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>
解决方案
推荐阅读
- python - 在 python 中为许多字典中的每一个打开文件
- android - 如何在 gradle 中运行其他 gradle 命令
- go - 每个前端的 Traefik 转发身份验证
- php - Laravel 调度程序延迟运行(不准时)
- django - * 之后的 _reverse_with_prefix() 参数必须是可迭代的,而不是 int
- php - Web 开发中的预定事件
- raspberry-pi - 树莓派 3 上的 Tizen 3.0
- php - Laravel - 视图中的多个控制器
- html - 移动网站 URL 的 Swift HTML 内容
- ruby-on-rails - 如何找到客户和用户参与 Ruby on Rails 的所有项目