Question

我想通过点击按钮将整个div移到左边，但是我想要确定尺寸现在尺寸变化。我想点击同步按钮，它应向左移动。

我正在使用Jquery。以下是整个代码

＆＃13;

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


    <script>
        $('button').click(function () {
            $('.error').stop().fadeIn(400).delay(3000).fadeOut(400); //fade out after 3 seconds
        });
    </script>
    <script type="text/javascript">
        window.onload=function(){
            populatedropdown( "monthdropdown", "yeardropdown")
        }
    </script>
    <script type="text/javascript">
        var monthtext=['Month','01','02','03','04','05','06','07','08','09','10','11','12'];
        var yeartext=['Year','2015','2014','2013','2012','2011','2010','2009','2008','2007','2006','2005','2004','2003','2002','2001','2000'];
        function populatedropdown( monthfield, yearfield){
            var today=new Date();

            var monthfield=document.getElementById(monthfield);
            var yearfield=document.getElementById(yearfield);

            for (var m=0; m<=12; m++)
                monthfield.options[m]=new Option(monthtext[m], monthtext[m])
// monthfield.options[today.getMonth()]=new Option(monthtext[today.getMonth()], monthtext[today.getMonth()], true, true) ;//select today's month

            var thisyear=today.getFullYear();
// yearfield.options[0]= Year;
            for (var y=0; y<17; y++){

//yearfield.options[y]=new Option(thisyear, thisyear);
                yearfield.options[y]=new Option(yeartext[y], yeartext[y]);
                thisyear-=1;
            }
// yearfield.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true); //select today's year
        }
    </script>
    
    <script type="text/javascript">
                $(function () {
                    $("#drop").change(function () {
                        selectedText = $(this).find("option:selected").text();
                        if(selectedText != "RBSK")
                        {

                            alert("Test available for RBSK only");

                        }
                        msg="";

                    });

                });
                $(function () {
                    $("#monthdropdown").change(function () {
                        selectedText_month="Month";
                        selectedText_month = $(this).find("option:selected").text();
                        if(selectedText_month == "Month")
                        {

                            alert("Please Choose Month");

                        }
                        console.log("month is--" + selectedText_month);
                    });
                });
                $(function () {
                    $("#yeardropdown").change(function () {
                        selectedText_year="Year";
                        selectedText_year = $(this).find("option:selected").text();
                        if(selectedText_year == "Year")
                        {

                            alert("Please Choose Valid Year");

                        }
                        console.log("year is--" + selectedText_year);

                    });
                });

                console.log("period: "+selectedText_year+selectedText_month);

            </script>
            
            <script type="text/javascript">

            $(document).ready(function() {

                $('#Submit').click(function () {
                    $('#content').animate({

                        'marginLeft': "-=600px" //moves left
                    });
                });

                $('#Submit').click(function () {
                    $('#myHeader').animate({

                        'marginTop': "-=250px" //moves left
                    });
                });
                $('#Submit').click(function () {
                    $('#qwe').animate({

                        'marginTop': "-=450px" //moves left
                    });
                });

                $('#Submit').click(function () {
                    $('#qwe2').animate({

                        'marginTop': "-=450px" //moves left
                    });
                });
                $('#Submit').click(function () {
                    $('#qwe1').animate({

                        'marginTop': "-=950px" //moves left
                    });
                });
                $('#Submit').click(function () {
                    $('#qwe3').animate({

                        'marginTop': "-=970px" //moves left
                    });
                });


//                $('#Submit').click(function () {
//                    $('#img').show();
//
//                    $.ajax({
//
//
//
//                        success: function (result) {
//                            $('#img').hide();
//                        }
//
//                    });
//                });
            });

        </script>

＆＃13;

<style>
    h2 {
        text-align: center;
    }
    body {
        background-color: lightblue;
    }

</style>

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
<body>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

  
  <form id="From1" method="post">
    <div  style="display:table-cell; vertical-align:middle; text-align:center">
        <img src="js/xmlimg.png"  style="width:180px; height:160px"; align="left">
        <img src="js/loading.gif" id="img" style="display:none" align="center"/>

    </div>

    <div id="content"style="display: block">

        <h2 >Welcome</h2>
        <br>

        <p style="font-size:150%;margin-left:39%" > Sources :
            <select id="drop" name="drop">
                <option value="0">Select Source</option>
                <option value="1">RBSK</option>
                <option value="2">MIDRS</option>
                <option value="3">ATM </option>
                <option value="4">RT </option>
            </select>

          <p style="font-size:150%;margin-left:40%"; >Period   :
        <form>
        <form action="" name="someform">
            <select id="monthdropdown"></select>
            <select id="yeardropdown"></select>
         <br> <br>
            <button type="button" class="btn btn-primary btn-lg" style= " margin-left: 13% "   id="Submit" name="Submit"  onclick="prepareDataValueSet()">SYNC
            </button>

        </form>

    </form>


       </div>

    <h4 id="myHeader"  style="text-align:right; margin-top:10%; margin-right:20%; color: indianred"></h4>
    <h4 id="qwe"  style="text-align: right; margin-top:15%; margin-right:10%;color: dodgerblue"></h4>
    <h4 id="qwe2"  style="text-align: right; margin-top:20%; margin-right:10%;color: dodgerblue"></h4>
    <h4 id="qwe1"  style="text-align: right; margin-top:55%; margin-right:4%;color: darkgreen"></h4>
    <h4 id="qwe3"  style="text-align: right; margin-top:55%; margin-right:4%;color: darkgreen"></h4>
    </div>

</form>


</body>
</html>

＆＃13;

图标大小随班次变化

0 个答案: