与图像的重叠跨度
Posted
技术标签:
【中文标题】与图像的重叠跨度【英文标题】：Overlap span with image 【发布时间】：2015-11-22 05:27:03 【问题描述】：我无法将倒计时和按钮与Skull and crossbones 重叠。 z-index: 似乎不起作用。 （我没有发布图片的声誉。）
我希望图片在倒计时为负数时可见，并且每隔一秒闪烁一次。
我怎样才能让骷髅和交叉骨重叠在一起？
jsfiddle.net/2Lufxs2t
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Countdown</title>
<script type="text/javascript">
var seconds = 10;
function stopTimer()
clearTimeout(countdownTimer)
function floor(x)
return x | 0;
function pad(n)
if (n < 0)
n = -n;
if (n < 10)
return '0' + n.toString();
return n.toString();
function secondPassed()
var minutes = pad(floor(seconds/60));
if (seconds < 0)
minutes = '-' + minutes;
var remainingSeconds = pad(seconds % 60);
document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
if (seconds > 0)
seconds--;
if (seconds > 8) document.body.style.backgroundColor = "green";
else if (seconds == 5) document.body.style.backgroundColor = "yellow";
else if (minutes == 0 & seconds == 0) document.body.style.backgroundColor = "red";
else
seconds--;
//if (seconds == 0 || seconds == 2 || seconds == 4 || seconds == 6 || seconds == 8 ) document.getElementById("Image1").style.visibility= "visible";
//else document.getElementById("Image1").style.visibility= "hidden";
</script>
</head>
<body onload = "getSeconds()">
<div ="wrapper">
<span id="countdown" style="color:black; font-size: 500px; font-weight: bold"></span>
<button onclick="countdownTimer = setInterval('secondPassed()', 1000)">Start</button>
<button onclick="stopTimer()">Stop</button>
<asp:Image ID="Image1" runat="server" ImageUrl="\\scnas1\dev\vbdev\Time\skull.gif"
/>
</div>
</body>
</html>
#Image1
z-index:0;
position: absolute;
top:0;
left:0;
#countdown
z-index:-1;
【问题讨论】：
会更好。如果您为您的问题创建 jsfiddle 演示，以便我们可以有效地帮助您 @SachinKadam 您如何在 JSFiddle 中使用图像？我是新手。 您不能直接将图片上传到 jsfiddle，但您可以使用第三方上传器，例如postimage.org。然后使用他们在 jsfiddle 中给出的 URL @SachinKadam 按钮在我的机器上工作，但不是 jsfiddle，对不起。我不确定为什么会这样。 jsfiddle.net/3e2egof6/1 jsFiddle 只理解普通的 HTML，而不是像 ASP 这样的服务器端语言，所以你必须把渲染的代码放在那里，比如<img id="Image1" src="http://s15.postimg.org/es5w3xpob/skull.gif" />。另外，getSeconds 的代码在哪里？
【参考方案1】：
不是 100% 确定您的目标是什么。
但是我已经提供了一个我认为你可能会追求的例子
var startBtn = document.getElementById('start'),
stopBtn = document.getElementById('stop'),
timerEl = document.getElementById('timer'),
secondsPassed = 0,
secondsTimer = null,
updateLabel = setInterval(function()
timerEl.innerHTML = secondsPassed + ' seconds'; //update the view every 1 second with the seconds passed.
var color = 'green';
if( secondsPassed >= 10 )
color = 'yellow';
if( secondsPassed >= 20 )
color = 'red';
document.body.style.backgroundColor = color;
, 1000);
startBtn.addEventListener('click', function()
clearInterval(secondsTimer); //incase its double clicked
secondsPassed = 0; //remove this line if you dont want it to reset
secondsTimer = setInterval(function()
secondsPassed++; //every 1 second we increase the second count
, 1000);
);
stopBtn.addEventListener('click', function()
clearInterval(secondsTimer); //when its clicked we just stop the timer
);.wrapper
position: relative;
margin-bottom: 20px;
.wrapper img
display: block;
max-height: 200px;
.wrapper span
display: inline-block;
position: absolute;
top: 45%;
left: 25%;
color: red;
background: white;
<div class="wrapper">
<img id="Image1" src="http://s15.postimg.org/es5w3xpob/skull.gif" />
<span id="timer"></span>
</div>
<button id="start">start</button>
<button id="stop">stop</button>【讨论】：
感谢您的帮助，是的，我应该更清楚。对于开始格式，它不应该是骷髅头，而开始和停止是按钮。在倒计时期间，它应该是倒计时的按钮，一旦它是负数......我希望头骨每秒闪烁一次。你会看到我对 else 语句的尝试。很抱歉造成混乱。【参考方案2】：如果你想要按钮上的图像，未来的解决方案是使用 CSS 属性pointer-events: none，但它仍然是经验性的，看起来是 CSS 4 的一部分。只有在你最喜欢的浏览器中工作并且足够好时才使用它。另请参阅MDN 和 SO Pass mouse events through absolutely-positioned element
另一种解决方案是在包装容器上捕获事件，然后在代码中确定是否在开始或停止按钮上发生了单击事件，如果发生，则调用适当的处理程序函数。难以让浏览器以正常方式响应针对按钮的 mouseover/out 事件，但该方法已被使用。
下面示例中显示的另一个解决方案是在堆叠上下文中使用三层。将按钮和倒计时元素放在底层。将 scull 和 cross bone 放在中间层，将位于底层的按钮标签放在顶层。这些***label 元素将鼠标事件分派（副本）到实际按钮，而无需为此操作附加脚本。标签是隐藏的，需要仔细确定尺寸和放置。
在当前版本的 Firefox 和 IE 中工作：
<!DOCTYPE html><html><head><title>skull blink</title><meta charset="utf-8">
<style type="text/css">
.centerText
text-align: center;
#countdown
display: inline-block;
height: 60px;
width: 350px;
color:black;
font-size: 50px;
font-weight: bold;
transition: opacity 0.9s;
#countFill /* same size as #countdown */
display: inline-block;
height: 60px;
width: 350px;
div#z0 /* parent node of #z10 and #z20 */
display: inline-block;
div#z10
display: inline-block;
position: absolute;
width: 350px;
z-index: 10;
visibility: hidden;
transition: visibility 0.3s;
div#z20
display: inline-block;
position: absolute;
width: 350px;
text-align: center;
z-index: 20;
button.dimension /* same size as active start/stop buttons */
visibility: hidden;
#skullImg
height: 80px;
display: inline-block;
</style>
<script>
var seconds = 10;
var countdownTimer = 0;
function startTimer()
if(!countdownTimer)
countdownTimer = setInterval(secondPassed, 1000);
secondPassed(); // start now
function stopTimer()
clearTimeout(countdownTimer);
countdownTimer = 0;
showSkull(false);
function showSkull( on)
document.getElementById("z10").style.visibility = on ? "visible" : "hidden";
document.getElementById("countdown").style.opacity = on ? 0 : 1;
function floor(x)
return x | 0;
function pad(n)
if (n < 0)
n = -n;
if (n < 10)
return '0' + n.toString();
return n.toString();
function secondPassed()
var minutes = pad(floor(seconds / 60));
if (seconds < 0)
minutes = '-' + minutes;
var remainingSeconds = pad(seconds % 60);
document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
if (seconds > 8)
document.body.style.backgroundColor = "green";
else if (seconds == 5)
document.body.style.backgroundColor = "yellow";
else if (seconds ==0)
document.body.style.backgroundColor = "red";
else if (seconds < 0)
showSkull(seconds & 1) // odd seconds
seconds--;
</script>
</head>
<body>
<div class="centerText">
<div id="z0">
<div id="z10"><img src="http://s15.postimg.org/es5w3xpob/skull.gif" id="skullImg"></div>
<div id="z20">
<span id="countFill"> </span><br>
<label for="start"><button class="dimension">Start</button></label>
<label for="stop"><button class="dimension">Stop</button></label>
</div>
<span id="countdown"> </span><br>
<button id="start" onclick="startTimer()">Start</button>
<button id="stop" onclick="stopTimer()">Stop</button><br>
</div>
</div>
</body>
</html>
【讨论】：
以上是关于与图像的重叠跨度的主要内容，如果未能解决你的问题，请参考以下文章