Javascript 滑动接触式复位_Javascript_Jquery_Css_Slider

Javascript 滑动接触式复位

javascript jquery css

Javascript 滑动接触式复位,javascript,jquery,css,slider,Javascript,Jquery,Css,Slider,我想重新定位我的滑动接触表单。我在网上看过一篇教程。。但它位于右边。单击时，它会向左滑动以下是本教程的主要内容所以与其把它放在右边。。我想在屏幕的右下角重新定位。而不是向左滑动。。单击按钮时，它将向上滑动。我还不太擅长jQuery。帮助代码如下： HTML:：： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

我想重新定位我的滑动接触表单。我在网上看过一篇教程。。但它位于右边。单击时，它会向左滑动

以下是本教程的主要内容

所以与其把它放在右边。。我想在屏幕的右下角重新定位。而不是向左滑动。。单击按钮时，它将向上滑动。我还不太擅长jQuery。帮助

代码如下：

HTML:：：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
    <title>Feedback Form Demo</title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>

    <!-- Files For mRova Feedback Form [Dependency: jQuery] -->
    <script src="mrova-feedback-form.js" type="text/javascript"></script>
    <link rel="stylesheet" href="mrova-feedback-form.css" type="text/css"/>
    <!-- END -->

    <!-- Just For Demo -->
    <style type="text/css">
html, body {
    padding: 0;
    margin: 0;
    height: 100%;
}
body {
    background-color: #f2f2f2;
    font-family: helvetica, arial, tahoma, verdana, sans-serif;
}
h1 {
    text-align: center;
    margin-top: 40px;
    color: #333;
}
</style>
    <!-- END -->
    </head>
    <body>
<h1>Free Feedback Form</h1>

<!--Feedback Form HTML START -->
<div id="mrova-feedback">
      <div id="mrova-contact-thankyou" style="display: none;"> Thank you.  We'hv received your feedback. </div>
      <div id="mrova-form">
    <form id="mrova-contactform" action="#" method="post">
          <ul >
        <li>
              <label for="mrova-name">Your Name*</label>
              <input type="text" name="mrova-name" class="required" id="mrova-name" value="">
            </li>
        <li>
              <label for="mrova-email">Email*</label>
              <input type="text" name="mrova-email" class="required" id="mrova-email" value="">
            </li>
        <li>
              <label for="mrova-message">Message*</label>
              <textarea class="required" id="mrova-message" name="mrova-message"  rows="8" cols="30"></textarea>
            </li>
      </ul>
          <input type="submit" value="Send" id="mrova-sendbutton" name="mrova-sendbutton">
        </form>
  </div>
      <div id="mrova-img-control"></div>
    </div>
<!-- Feedback Form HTML END -->

</body>
</html>

JS:：：

这是我的工作：在css文件中：

#mrova-feedback {
    display: hidden;
    width: 420px;
    position: fixed;
    left: -462px;
    border: 1px solid #3cb58c;
    padding: 8px 20px;
    background-color: #fff;
}

#mrova-img-control {
    cursor: pointer;
    position: absolute;
    right: -52px;
    width: 52px;
    background: transparent url('feedback_buttons/feedback.jpg');
    height: 168px;
}

基本上是从右变左

在js文件中：

$img_control.vAlign()
//animate the form
.toggleClick(function(){
    $mrova_feedback.animate({'left':'-2px'},1000);
}, function(){
    $mrova_feedback.animate({'left':'-'+$mrova_feedback.outerWidth()},1000);
});

我想把它放在“屏幕右下角”而不是左边。对不起。在css中，在#mrova feedback中添加“bottom:0”，并在js://setback to block state和vertical align to center//$mrova_feedback.vAlign（）/.css（{'display'：'block'，'height'：$mrova_feedback.outerHeight（）}）中删除它//将反馈按钮与父分区对齐居中我希望它从下到上滑动切换。

#mrova-feedback {
    display: hidden;
    width: 420px;
    position: fixed;
    left: -462px;
    border: 1px solid #3cb58c;
    padding: 8px 20px;
    background-color: #fff;
}

#mrova-img-control {
    cursor: pointer;
    position: absolute;
    right: -52px;
    width: 52px;
    background: transparent url('feedback_buttons/feedback.jpg');
    height: 168px;
}

$img_control.vAlign()
//animate the form
.toggleClick(function(){
    $mrova_feedback.animate({'left':'-2px'},1000);
}, function(){
    $mrova_feedback.animate({'left':'-'+$mrova_feedback.outerWidth()},1000);
});