我使用从教程中找到的JavaScript构建了一个从屏幕右侧滑入/滑出的表单。一切都有效,但评论它的人觉得动画看起来太过'#34;机器人" (或线性)。有人建议我尝试为幻灯片添加类似CSS3的缓动效果并滑出JavaScript动画。我想这样做,但与此同时,我不想a)重做我已经设置的所有代码,因为它确实有效,所以我不想废弃它所有并重新开始,并且b)使现有的功能太复杂或混乱,只是为了创建一个缓和效果。
这是我现在拥有的JavaScript:
var slidingDiv = document.getElementById("slider");
/*
------------------------------------------------------------
Function to activate form button to open the slider.
------------------------------------------------------------
*/
function open_panel() {
slideIt();
var a = document.getElementById("sidebar");
a.setAttribute("id", "sidebar1");
a.setAttribute("onclick", "close_panel()");
}
/*
------------------------------------------------------------
Function to slide the sidebar form (open form)
------------------------------------------------------------
*/
function slideIt() {
var stopPosition = -20;
if (parseInt(slidingDiv.style.right) < stopPosition) {
slidingDiv.style.right = parseInt(slidingDiv.style.right) + 3 + "px";
setTimeout(slideIt, 0);
}
}
/*
------------------------------------------------------------
Function to activate form button to close the slider.
------------------------------------------------------------
*/
function close_panel() {
slideIn();
a = document.getElementById("sidebar1");
a.setAttribute("id", "sidebar");
a.setAttribute("onclick", "open_panel()");
}
/*
------------------------------------------------------------
Function to slide the sidebar form (slide in form)
------------------------------------------------------------
*/
function slideIn() {
var slidingDiv = document.getElementById("slider");
var stopPosition = -320;
if (parseInt(slidingDiv.style.right) > stopPosition) {
slidingDiv.style.right = parseInt(slidingDiv.style.right) - 2 + "px";
setTimeout(slideIn, 1);
}
}
这是表单HTML
<div id="slider" style="right: -320px;" class="register-photo">
<div class="form-inner">
<div class="form-container">
<form method="post" action="#" id="browserHangForm">
<a id="sidebar" onclick="open_panel()">
<span id="arrow" class="glyphicon glyphicon-arrow-left icon-arrow"></span>
</a>
<div class="form-group">
<input class="form-control" type="text" name="first_name" placeholder="*First Name" autofocus="">
</div>
<div class="form-group">
<input class="form-control" type="email" name="last_name" placeholder="*Last Name" autofocus="">
</div>
<div class="form-group">
<input class="form-control" type="text" name="Email" placeholder="*Email" autofocus="">
</div>
<div class="form-group">
<input class="form-control" type="text" name="Company" placeholder="*Company" autofocus="">
</div>
<div class="form-group">
<button class="btn btn-primary btn-block button-submit" type="submit">Submit</button>
</div>
<br/>
<a href="privacy-policy" class="already" target="_blank"><span
class="glyphicon glyphicon-lock icon-lock"></span>We will never share your information.</a>
</form>
</div>
</div>
</div>
这是最相关的CSS:
html{
max-width: 100% !important;
overflow-y: scroll;
position: static;
overflow-x: hidden !important;
}
.register-photo {
margin-top: 101px;
z-index: 99;
position: fixed;
}
.register-photo .form-container{
z-index: 9;
display: block;
background-color: white;
}
a:active{
background-color: transparent;
}
.button-submit{
margin-bottom: 15px;
}
答案 0 :(得分:0)
我决定撕掉笨重的JavaScript代码并将其替换为jQuery,它似乎更清晰,更易于维护。找到了许多困扰我的东西(减少了css ID的使用并使它们成为类,删除了内联函数调用,并将滑动效果更改为由一个函数而不是4来控制
$(document).ready(function () {
//This function checks if we are in mobile view or not to determine the
//UI behavior of the form.
window.onload = checkWindowSize();
var arrowicon = $(".arrow");
var overlay = $("#overlay");
var slidingDiv = $(".slider");
var closeBtn = $(".closeBtn");
var mobileBtn = $(".mobile-btn");
//When the page loads, check the screen size.
//If the screen size is less than 768px, you want to get the function
//that opens the form as a popup in the center of the screen
//Otherwise, you want it to be a slide-out animation from the right side
function checkWindowSize() {
if ($(window).width() <= 768) {
//get function to open form at center of screen
setTimeout(formModal, 5000);
function formModal() {
slidingDiv.addClass("showForm")
overlay.addClass("showOverlay");
overlay.removeClass('hideOverlay');
mobileBtn.addClass("hideBtn");
}
}
else {
//when we aren't in mobile view, let's just have the form slide out from the right
setTimeout(slideOut, 5000);
function slideOut() {
slidingDiv.animate({'right': '-20px'}).addClass('open');
arrowicon.addClass("glyphicon-arrow-right");
arrowicon.removeClass("glyphicon-arrow-left");
overlay.addClass("showOverlay");
overlay.removeClass("hideOverlay");
}
}
}
/*
------------------------------------------------------------
Functions to open/close form like a modal in center of screen in mobile view
------------------------------------------------------------
*/
mobileBtn.click(function () {
slidingDiv.addClass("showForm");
slidingDiv.removeClass("hideForm");
overlay.addClass("showOverlay");
overlay.removeClass('hideOverlay');
mobileBtn.addClass("hideBtn");
});
closeBtn.click(function () {
slidingDiv.addClass("hideForm");
slidingDiv.removeClass("showForm");
overlay.removeClass("showOverlay");
overlay.addClass("hideOverlay")
mobileBtn.removeClass("hideBtn");
});
/*
------------------------------------------------------------
Function to slide the sidebar form out/in
------------------------------------------------------------
*/
arrowicon.click(function () {
if (slidingDiv.hasClass('open')) {
slidingDiv.animate({'right': '-390px'}).removeClass('open');
arrowicon.addClass("glyphicon-arrow-left");
arrowicon.removeClass("glyphicon-arrow-right");
overlay.removeClass("showOverlay");
overlay.addClass("hideOverlay");
} else {
slidingDiv.animate({'right': '-20px'}).addClass('open');
arrowicon.addClass("glyphicon-arrow-right");
arrowicon.removeClass("glyphicon-arrow-left");
overlay.addClass("showOverlay");
overlay.removeClass("hideOverlay");
}
});
});