0
我在這裏使用瀏覽器上的菜單腳本中的幻燈片Slide in menu。我已按照給出的所有說明進行操作。最後它已經開始工作，但只在Chrome瀏覽器和Safari瀏覽器上工作，但我的主要目標是讓它在Firefox上啓動，我嘗試了幾種方法更改一些CSS並修改JavaScript， 在JavaScript中，我給出了alert（）來準確測試它是否在腳本內部移動，並且我發現所有警報都以完美的順序執行。 我沒有得到任何暗示爲什麼這件事發生。 下面是一個HTML頁面，JavaScript和CSSJavaScript和CSS轉換屬性將無法在Firefox上工作
html頁面
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/new.css">
<script type="text/javascript" src="js/slideinmenu.js"></script>
<script type="text/javascript">
var menu;
function loaded() {
document.addEventListener('touchmove', function(e){ e.preventDefault();
e.stopPropagation(); });
menu = new slideInMenu('slidedownmenu', true);
}
document.addEventListener('DOMContentLoaded', loaded);
</script>
</head>
<body>
<div id="slidedownmenu">
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
<div class="handle"></div>
</div>
<div id="content">
<p>Click to <a href="#" onclick="menu.open();return false">Open</a>, <a
href="#" onclick="menu.close();return false">Close</a> and <a href="#"
onclick="menu.toggle();return false">Toggle</a> the menu programmatically.</p>
</div>
</body>
</html>
JavaScript的
function slideInMenu (el, opened) {
this.container = document.getElementById(el);
this.handle = this.container.querySelector('.handle');
this.openedPosition = this.container.clientHeight;
this.container.style.opacity = '1';
this.container.style.top = '-' + this.openedPosition + 'px';
this.container.style.webkitTransitionProperty = '-webkit-transform';
this.container.style.webkitTransitionDuration = '400ms';
if (opened===true) {
this.open();
}
this.handle.addEventListener('touchstart', this);
}
slideInMenu.prototype = {
pos: 0,
opened: false,
handleEvent: function(e) {
switch (e.type) {
case 'touchstart': this.touchStart(e); break;
case 'touchmove': this.touchMove(e); break;
case 'touchend': this.touchEnd(e); break;
}
},
setPosition: function(pos) {
this.pos = pos;
this.container.style.webkitTransform = 'translate(0,' + pos + 'px)';
if (this.pos == this.openedPosition) {
this.opened = true;
} else if (this.pos == 0) {
this.opened = false;
}
},
open: function() {
this.setPosition(this.openedPosition);
},
close: function() {
this.setPosition("0");
},
toggle: function() {
if (this.opened) {
this.close();
} else {
this.open();
}
}
}
CSS
a{
color:#ffc;
}
ul, li, div {
margin:0;
padding:0;
list-style:none;
}
#content {
padding:40px 10px 10px 10px;
text-align:center;
text-shadow:0 1px 1px #000;
font-size:1.2em;
}
#slidedownmenu {
position:absolute;
width:100%;
height:115px;
left:0;
background:black url(drawer-bg.jpg);
}
#slidedownmenu .handle {
position:absolute;
bottom:-28px;
left:0;
width:100%;
height:28px;
border-top:1px solid #532500;
border-bottom:1px solid #111;
background-color:maroon;
background:url(handle.png) no-repeat 50% 50%, -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #e07b29), color-stop(0.1, #b85300), color-stop(0.8, #793600));
/* -webkit-box-shadow:0 0 5px rgba(0,0,0,0.7);*/
}
#slidedownmenu ul {
display:block;
width:auto;
}
#slidedownmenu li {
display:block;
float:left;
margin:20px 10px;
text-align:center;
font-weight:bold;
color:#fff;
text-shadow:0 1px 1px #000;
}
任何類型的建議，將不勝感激的代碼。
看到所有以'webkit'或'-webkit-'開頭的東西 - 他們只能在Chrome/Safari上工作 - 您需要使用這些樣式的非前綴版本才能在星球上的其他瀏覽器中工作 –
Can你嘗試在這裏使用-moz-transform：this.container.style.webkitTransitionProperty ='-webkit-transform'; – Rakib
-moz-transform在那裏不工作..但是，即使-moz轉換，chromes仍然可以正常工作。 –