Javascript 过渡叠加和不透明度
Javascript transitions overlay & opacity
我正在使用此叠加层作为搜索功能,正如我从 javascript:
中看出的那样,叠加层出现在左侧
HTML:
<span style="cursor:pointer" onclick="openNav()"><img class="logo" src="_themes/englishclass/img/searchsmall.png" onerror="this.onerror=null; this.src='img/global/logo.png'" alt="searchsite" /></span>
<!-- The overlay -->
<div id="myNav" class="overlay">
<!-- Button to close the overlay navigation -->
<span class="closebtn" style="cursor:pointer" onclick="closeNav()">×</span>
<!-- Overlay content -->
<div class="overlay-content">
<form id="searchbox" id="searchbox_015532613638252232237:nvc8fxndlgb" action="http://englishclass.dk/pages/results.html" autocomplete="off">
<input value="015532613638252232237:nvc8fxndlgb" name="cx" type="hidden"/>
<input id="q" name="q" size="70" type="text" id="search" placeholder="Search the English Class Website..."/>
<input value="Search" name="sa" autofocus type="submit" id="submit" style="background-image: url('../_themes/englishclass/img/searchsmall.png')";/></form><span class="sexy_line"></span>
</div></div>
CSS:
/* The Overlay (background) */
.overlay {
/* Height & width depends on how you want to reveal the overlay (see JS below) */
height: 100%;
width: 0%;
position: fixed; /* Stay in place */
z-index: 999; /* Sit on top */
left: 0;
top: 0;
background-color: rgb(0,0,0); /* Black fallback color */
background-color: rgba(0,0,0, 0.85); /* Black w/opacity */
overflow-x: hidden; /* Disable horizontal scroll */
transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
JS:
/*/ SEARCH OVERLAY /*/
/* Open when someone clicks on the span element */
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
我想改为创建淡入效果。我尝试将其更改为 style.opacity ="1" 和 "0"。但它不起作用。我将如何着手创建淡入淡出(过渡 0.5 秒左右)而不是像现在这样从左侧滑入?
通过 css 的方法试试。
在css
myNav {
opacity: 0;
transition: all 0.5s;
}
myNav.active {
opacity: 1;
}
这在 JavaScript
function openNav() {
document.getElementById("myNav").classList.add("active");
}
/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
document.getElementById("myNav").classList.remove("active");
}
试试这个
css
/* The Overlay (background) */
.overlay {
/* Height & width depends on how you want to reveal the overlay (see JS below) */
height: 100%;
width: 100%;
display: none;
position: fixed; /* Stay in place */
z-index: 999; /* Sit on top */
left: 0;
top: 0;
background-color: rgb(0,0,0); /* Black fallback color */
background-color: rgba(0,0,0, 0.85); /* Black w/opacity */
overflow-x: hidden; /* Disable horizontal scroll */
transition: all 0.5s; /* 0.5 second transition effect to slide in or slide down the
overlay (height or width, depending on reveal) */
}
JS
/* Open when someone clicks on the span element */
function openNav() {
document.getElementById("myNav").style.display = "block";
}
/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
document.getElementById("myNav").style.display = "none";
}
在您的 css 中将 width
属性 更改为 100%
并添加 display
属性 和 none
值并删除transition
属性.
那么如果你想使用 javascript 试试这个代码:
function fadeIn(fadeTarget) {
var op = 0.01;
fadeTarget.style.opacity = op;
fadeTarget.style.display = 'block';
var fadeEffect = setInterval(function () {
fadeTarget.style.opacity = op;
if (op < 1) {
op += 0.01;
fadeTarget.style.opacity = op;
} else {
clearInterval(fadeEffect);
}
}, 10);
}
function fadeOut(fadeTarget) {
var op = 1;
fadeTarget.style.opacity = op;
var fadeEffect = setInterval(function () {
if (fadeTarget.style.opacity > 0) {
fadeTarget.style.opacity -= 0.01;
} else {
clearInterval(fadeEffect);
fadeTarget.style.display = 'none';
}
}, 10);
}
function openNav() {
fadeIn(document.getElementById("myNav"));
}
/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
fadeOut(document.getElementById("myNav"));
}
如果您想使用 jquery ,请删除 onload
属性并将 closeButton
和 searchButton
id 添加到标签中。
$(document).ready(function(){
$("#closeButton").click(function(){
$("#myNav").fadeOut();
});
$("#searchButton").click(function(){
$("#myNav").fadeIn();
});
});
/* The Overlay (background) */
.overlay {
/* Height & width depends on how you want to reveal the overlay (see JS below) */
height: 100%;
width: 100%;
display:none;
position: fixed; /* Stay in place */
z-index: 999; /* Sit on top */
left: 0;
top: 0;
background-color: rgb(0,0,0); /* Black fallback color */
background-color: rgba(0,0,0, 0.85); /* Black w/opacity */
overflow-x: hidden; /* Disable horizontal scroll */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<span id="searchButton" style="cursor:pointer">
<img class="logo" src="https://cdn2.iconfinder.com/data/icons/font-awesome/1792/search-64.png" onerror="this.onerror=null; this.src='img/global/logo.png'" alt="searchsite" />
</span>
<!-- The overlay -->
<div id="myNav" class="overlay">
<!-- Button to close the overlay navigation -->
<span class="closebtn" style="cursor:pointer" id="closeButton">×</span>
<!-- Overlay content -->
<div class="overlay-content">
<form id="searchbox" action="http://englishclass.dk/pages/results.html" autocomplete="off">
<input value="015532613638252232237:nvc8fxndlgb" name="cx" type="hidden" />
<input id="q" name="q" size="70" type="text" placeholder="Search the English Class Website..." />
<input value="Search" name="sa" autofocus type="submit" id="submit" style="background-image: url('../_themes/englishclass/img/searchsmall.png')" ;/>
</form><span class="sexy_line"></span>
</div>
</div>
希望我的回复对您有所帮助
我正在使用此叠加层作为搜索功能,正如我从 javascript:
中看出的那样,叠加层出现在左侧HTML:
<span style="cursor:pointer" onclick="openNav()"><img class="logo" src="_themes/englishclass/img/searchsmall.png" onerror="this.onerror=null; this.src='img/global/logo.png'" alt="searchsite" /></span>
<!-- The overlay -->
<div id="myNav" class="overlay">
<!-- Button to close the overlay navigation -->
<span class="closebtn" style="cursor:pointer" onclick="closeNav()">×</span>
<!-- Overlay content -->
<div class="overlay-content">
<form id="searchbox" id="searchbox_015532613638252232237:nvc8fxndlgb" action="http://englishclass.dk/pages/results.html" autocomplete="off">
<input value="015532613638252232237:nvc8fxndlgb" name="cx" type="hidden"/>
<input id="q" name="q" size="70" type="text" id="search" placeholder="Search the English Class Website..."/>
<input value="Search" name="sa" autofocus type="submit" id="submit" style="background-image: url('../_themes/englishclass/img/searchsmall.png')";/></form><span class="sexy_line"></span>
</div></div>
CSS:
/* The Overlay (background) */
.overlay {
/* Height & width depends on how you want to reveal the overlay (see JS below) */
height: 100%;
width: 0%;
position: fixed; /* Stay in place */
z-index: 999; /* Sit on top */
left: 0;
top: 0;
background-color: rgb(0,0,0); /* Black fallback color */
background-color: rgba(0,0,0, 0.85); /* Black w/opacity */
overflow-x: hidden; /* Disable horizontal scroll */
transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
JS:
/*/ SEARCH OVERLAY /*/
/* Open when someone clicks on the span element */
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
我想改为创建淡入效果。我尝试将其更改为 style.opacity ="1" 和 "0"。但它不起作用。我将如何着手创建淡入淡出(过渡 0.5 秒左右)而不是像现在这样从左侧滑入?
通过 css 的方法试试。
在css
myNav {
opacity: 0;
transition: all 0.5s;
}
myNav.active {
opacity: 1;
}
这在 JavaScript
function openNav() {
document.getElementById("myNav").classList.add("active");
}
/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
document.getElementById("myNav").classList.remove("active");
}
试试这个
css
/* The Overlay (background) */
.overlay {
/* Height & width depends on how you want to reveal the overlay (see JS below) */
height: 100%;
width: 100%;
display: none;
position: fixed; /* Stay in place */
z-index: 999; /* Sit on top */
left: 0;
top: 0;
background-color: rgb(0,0,0); /* Black fallback color */
background-color: rgba(0,0,0, 0.85); /* Black w/opacity */
overflow-x: hidden; /* Disable horizontal scroll */
transition: all 0.5s; /* 0.5 second transition effect to slide in or slide down the
overlay (height or width, depending on reveal) */
}
JS
/* Open when someone clicks on the span element */
function openNav() {
document.getElementById("myNav").style.display = "block";
}
/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
document.getElementById("myNav").style.display = "none";
}
在您的 css 中将 width
属性 更改为 100%
并添加 display
属性 和 none
值并删除transition
属性.
那么如果你想使用 javascript 试试这个代码:
function fadeIn(fadeTarget) {
var op = 0.01;
fadeTarget.style.opacity = op;
fadeTarget.style.display = 'block';
var fadeEffect = setInterval(function () {
fadeTarget.style.opacity = op;
if (op < 1) {
op += 0.01;
fadeTarget.style.opacity = op;
} else {
clearInterval(fadeEffect);
}
}, 10);
}
function fadeOut(fadeTarget) {
var op = 1;
fadeTarget.style.opacity = op;
var fadeEffect = setInterval(function () {
if (fadeTarget.style.opacity > 0) {
fadeTarget.style.opacity -= 0.01;
} else {
clearInterval(fadeEffect);
fadeTarget.style.display = 'none';
}
}, 10);
}
function openNav() {
fadeIn(document.getElementById("myNav"));
}
/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
fadeOut(document.getElementById("myNav"));
}
如果您想使用 jquery ,请删除 onload
属性并将 closeButton
和 searchButton
id 添加到标签中。
$(document).ready(function(){
$("#closeButton").click(function(){
$("#myNav").fadeOut();
});
$("#searchButton").click(function(){
$("#myNav").fadeIn();
});
});
/* The Overlay (background) */
.overlay {
/* Height & width depends on how you want to reveal the overlay (see JS below) */
height: 100%;
width: 100%;
display:none;
position: fixed; /* Stay in place */
z-index: 999; /* Sit on top */
left: 0;
top: 0;
background-color: rgb(0,0,0); /* Black fallback color */
background-color: rgba(0,0,0, 0.85); /* Black w/opacity */
overflow-x: hidden; /* Disable horizontal scroll */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<span id="searchButton" style="cursor:pointer">
<img class="logo" src="https://cdn2.iconfinder.com/data/icons/font-awesome/1792/search-64.png" onerror="this.onerror=null; this.src='img/global/logo.png'" alt="searchsite" />
</span>
<!-- The overlay -->
<div id="myNav" class="overlay">
<!-- Button to close the overlay navigation -->
<span class="closebtn" style="cursor:pointer" id="closeButton">×</span>
<!-- Overlay content -->
<div class="overlay-content">
<form id="searchbox" action="http://englishclass.dk/pages/results.html" autocomplete="off">
<input value="015532613638252232237:nvc8fxndlgb" name="cx" type="hidden" />
<input id="q" name="q" size="70" type="text" placeholder="Search the English Class Website..." />
<input value="Search" name="sa" autofocus type="submit" id="submit" style="background-image: url('../_themes/englishclass/img/searchsmall.png')" ;/>
</form><span class="sexy_line"></span>
</div>
</div>
希望我的回复对您有所帮助