我不是最擅长 javascript 的人,我被要求将它包含在我正在创建的页面中。我快到了,得到一个包含视频的盒子,从上方滑过屏幕并创建一个深色叠加层。我只能使用图像让它工作。我想通过 href 文本链接激活它。我到处都看过,但我看到的一切都使用相同的方法,使用图像。有人可以帮忙吗?
$(function() {
$('#activator').click(function() {
$('#overlay').fadeIn('fast', function() {
$('#box').animate({
'top': '120px'
}, 500);
});
});
$('#boxclose').click(function() {
$('#box').animate({
'top': '-500px'
}, 500, function() {
$('#overlay').fadeOut('fast');
});
});
});
a.activator {
background: url(Overlay/clickme.png) no-repeat top left;
z-index: 1;
cursor: hand;
}
.overlay {
background: transparent url(Overlay/images/overlay.png) repeat top left;
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 100;
}
.box {
position: fixed;
top: -500px;
left: 20%;
width: 610px;
background-color: #fff;
color: #7F7F7F;
padding: 20px;
border: 2px solid #F79510;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
-moz-box-shadow: 0 1px 5px #333;
-webkit-box-shadow: 0 1px 5px #333;
z-index: 101;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="activator"><img src="images/Film-2.png" class="film"></a>
<!-- I want to add the text here, separate to the image, but to do the same activation. -->
最佳答案
要么您需要在原始“激活器”中添加文本,要么创建另一个。
试试这个:
<a id="activator"><img src="images/Film-2.png" class="film"></a>
<div id="activator2"> Some text that activates the overlay </div>
然后在你的 JS 中改变
$('#activator').click(...
收件人:
$('#activator, #activator2').click(...
现在,两个激活器都会触发您的脚本,使叠加显示。
此外,在您的 CSS 中,您有 a.activator
而在您的 HTML 中是 id="activator"
,但这可能只是一个错字。
关于javascript - 文本不会激活 js 和 css 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44802710/