javascript – 将div滑到左边,然后出现下一个div

2019年8月3日 175次阅读

我有这个表单我正在创建,当你点击“下一步”按钮我想滑下一个表格()向左到左边这是我的功能

jQuery('input[name^=Next]').click(function () {
     current.animate({ marginLeft: -current.width() }, 750);
     current = current.next();
});

那个功能不按我想要的方式工作.它将容器中的文本滑过而不是整个容器,这可能是我所知道的所有问题.
我的表格有一个类名.wikiform并不是水平居中的.这是我的完整代码.我不是那种javascript体验,所以你会感激不尽.剪切并粘贴并试用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" language="javascript" src="Scripts/jquery-1.4.4.js"></script>
<script type="text/javascript" language="javascript" src="Scripts/jquery-easing.1.2.pack.js"></script>    <script type="text/javascript" language="javascript">

    (function ($) {
        $.fn.WikiForm = function (options) {

            this.Mode = options.mode || 'CancelOk' || 'Ok' || 'Wizard';
            var current = jQuery('.wikiform .view :first');
            function positionForm() {
                //jQuery('.wikiform').css( {'top':
                jQuery('body')
                    .css('overflow-y', 'hidden');
                jQuery('<div id="overlay"></div>')
                    .insertBefore('.wikiform')
                    .css('top', jQuery(document).scrollTop())
                    .animate({ 'opacity': '0.8' }, 'slow');
                jQuery('.wikiform')
                    .css('height', jQuery('.wikiform .wizard .view:first').height() + jQuery('.wikiform .navigation').height())
                    .css('top', window.screen.availHeight / 2 - jQuery('.wikiform').height() / 2)
                    .css('width', jQuery('.wikiform .wizard .view:first').width())
                    .css('left', -jQuery('.wikiform').width())
                    .animate({ marginLeft: jQuery(document).width() / 2 + jQuery('.wikiform').width() / 2 }, 750);
                jQuery('.wikiform .wizard')
                    .css('overflow', 'hidden')
                    .css('height', jQuery('.wikiform .wizard .view:first').height() );

            }
            if (this.Mode == "Wizard") {
                return this.each(function () {

                    var current = jQuery('.wizard .view :first');
                    var form = jQuery(this);

                    positionForm();

                    jQuery('input[name^=Next]').click(function () {
                        current.animate({ marginLeft: -current.width() }, 750);
                        current = current.next();
                    });
                    jQuery('input[name^=Back]').click(function () {
                        alert("Back");
                    });

                });
            } else if (this.Mode == "CancelOk") {
                return this.each(function () {

                });
            } else {
                return this.each(function () {

                });
            }
        };
    })(jQuery);

    $(document).ready(function () {
        jQuery(window).bind("load", function () {
            jQuery(".wikiform").WikiForm({ mode: 'Wizard', speed:750, ease:"expoinout" });
        });
    });
</script>
<style type="text/css">
    body 
    {
        margin:0px;
    }
    #overlay 
    {
        background-color:Black; position:absolute; top:0; left:0; height:100%; width:100%;
    }
    .wikiform 
    {            
        background-color:Green; position:absolute;
    }
    .wikiform .wizard
    {
        clear: both;
    }
    .wizard
    {
        position: relative;
    left: 0; top: 0;
    width: 100%;
    list-style-type: none;

    }
    .wizard .view
    {            
        float:left;
    }
    .view .form
    {

    }        
    .navigation 
    {
        float:right; clear:left
    }
    #view1 
    {
        background-color:Aqua;
        width:300px;
        height:300px;

    }
    #view2
    {
        background-color:Fuchsia;
        width:300px;
        height:300px;           
    }
</style>
<title></title>
</head>
<body><form action="" method=""><div id="layout">
    <div id="header">
        Header
    </div>
    <div id="content" style="height:2000px">
        Content
    </div>
    <div id="footer">
        Footer
    </div>
</div>
<div id="formView1" class="wikiform">
    <div class="wizard">    
        <div id="view1" class="view">
            <div class="form">
                Content 1
            </div>        
        </div>
        <div id="view2" class="view">
            <div class="form">
                Content 2
            </div>        
        </div>             
    </div>
    <div class="navigation">
        <input type="button" name="Back" value=" Back " />
        <input type="button" name="Next " class="Next" value=" Next " />
        <input type="button" name="Cancel" value="Cancel" />
    </div>   
</div></form></body></html>

最佳答案 尝试更改此行：

var current = jQuery('.wizard .view :first');

(直接在’view’下选择表单元素)

对此：

var current = jQuery('.wizard .view:first');
// The first element with a class of 'view' under an element with a class of
// 'wizard'

更新,由于以下评论：

要制作一个简单的滚动小部件,您需要以下内容：

>外部< div>具有固定的宽度和高度
>内部< div>具有固定的高度和非常长的宽度.
>代码更改内部< div>的左偏移量.

你可以在这里看到这样一个小部件的简单例子：http://jsfiddle.net/andrewwhitaker/feJxu/

对于OP的具体问题,我修改了分配CSS属性的代码,如下所示：

    $('.wikiform')
        .css('height', $('.wikiform .wizard .view:first').height() + $('.wikiform .navigation').height())
        .css('top', window.screen.availHeight / 2 - $('.wikiform').height() / 2)
        .css('width', $('.wikiform .wizard .view:first').width())
        .css('left', -$('.wikiform').width())
        .css('overflow', 'hidden') // ADDED
        .animate({marginLeft: $(document).width() / 2 + $('.wikiform').width() / 2
        }, 750);

        $('.wikiform .wizard')
            .css('width', '10000px') // ADDED.  May need to be longer depending on content.
            .css('height', $('.wikiform .wizard .view:first').height());

我也改变了’下一步’的动画：

$('input[name^=Next]').click(function() {
    $(".wizard").animate({
        left: "-=" + current.width() + "px"
    }, 750);
}); // Similar logic for 'back'

这样做基本上是用一个巨大的宽度(.wizard)改变视图的左偏移量,并将一个新的形式滚动到具有固定宽度和高度(.wikiform)的视图中.请在此处查看工作示例：http://jsfiddle.net/andrewwhitaker/J9L8s/

点赞