jquery – 像Stack Overflow这样的简介栏

我有一个简单的顶级栏使用jQuery,如Stack Overflow上的那个,但我希望它只出现在第一次有人访问网站时.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="bxSlider.js"></script>
        <title>topbar</title>

        <style type="text/css" media="screen">
            #message {
                font-family:Arial,Helvetica,sans-serif;
                position:fixed;
                top:0px;
                left:0px;
                width:100%;
                z-index:105;
                text-align:center;
                color:white;
                padding:2px 0px 2px 0px;
                background-color:#8E1609;
            }

            #example1 {
                text-align: center;
                width: 80%;
            }

            .close-notify {
                white-space: nowrap;
                float:right;
                margin-right:10px;
                color:#fff;
                text-decoration:none;

                padding-left:3px;
                padding-right:3px
            }

            .close-notify a {
                color: #fff;
            }

            h4,p {
                margin:0px;
                padding:0px;
            }
        </style>
    </head>

    <body>
        <DIV ID='message' style="display: none;">
            <DIV ID="example1">
                <DIV CLASS="item">
                    <h4>Head 1</h4>
                    <p>Text 1</p>
                </div><!-- end item -->

                <DIV CLASS="item">
                    <h4>Head 2</h4>
                    <p>Text 2</p>
                </div><!-- end item -->
            </div><!-- end example1 -->
            <a href="#" CLASS="close-notify" onclick="closeNotice()">X</a>
        </div>

        <script type="text/javascript">
            $(document).ready(function() {
             $("#message").fadeIn("slow");
             $('#example1').bxSlider({
              mode: 'slide',speed: 250,wrapper_CLASS: 'example1_container'
              });
            });

            function closeNotice() {
                $("#message").fadeOut("slow");
            }
        </script>
    </body>
</html>

bxSlider.js：

/**
*
*
* bxSlider: Content slider / fade / ticker using the jQuery javascript library.
*
* Author: Steven Wanderski
* Email: wandoledzep@gmail.com
* URL: http://bxslider.com
*
*
**/

jQuery.fn.bxSlider = function(options){

    /////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // Declare variables and functions
    /////////////////////////////////////////////////////////////////////////////////////////////////////////////
    var defaults = {
        mode: 'slide',speed: 500,auto: false,auto_direction: 'left',pause: 2500,controls: true,prev_text: 'prev',next_text: 'next',width: $(this).children().width(),prev_img: '',next_img: '',ticker_direction: 'left',wrapper_class: 'container'
    };

    options = $.extend(defaults,options);

    if(options.mode == 'ticker'){
        options.auto = true;
    }

    var $this = $(this);

    var $parent_width = options.width;
    var current = 0;
    var is_working = false;
    var child_count = $this.children().size();
    var i = 0;
    var j = 0;
    var k = 0;

    function animate_next(){
        is_working = true;
        $this.animate({'left':'-' + $parent_width * 2 + 'px'},options.speed,function(){
            $this.css({'left':'-' + $parent_width + 'px'}).children(':first').appendTo($this);
            is_working = false;
        });
    }

    function animate_prev(){
        is_working = true;
        $this.animate({'left': 0},function(){
            $this.css({'left':'-' + $parent_width + 'px'}).children(':last').insertBefore($this.children(':first'));
            is_working = false;
        });
    }

    function fade(direction){
        if(direction == 'next'){
            var last_before_switch = child_count - 1;
            var start_over = 0;
            var incr = k + 1;
        }else if(direction == 'prev'){
            var last_before_switch = 0;
            var start_over = child_count -1;
            var incr = k - 1;
        }

        is_working = true;
        if(k == last_before_switch){
            $this.children().eq(k).fadeTo(options.speed,0);
            $this.children().eq(start_over).fadeTo(options.speed,1,function(){
                is_working = false;
                k = start_over;
            });

        }else{
            $this.children().eq(k).fadeTo(options.speed,0);
            $this.children().eq(incr).fadeTo(options.speed,function(){
                is_working = false;
                k = incr;
            });
        }
    }

    function add_controls(){
        /////////////////////////////////////////////////////////////////////////////////////////////////////////////
        // Check if user selected images to use for next / prev
        /////////////////////////////////////////////////////////////////////////////////////////////////////////////

        if(options.prev_img != '' || options.next_img != ''){
            $this.parent().append('<a class="slider_prev" href=""><img src="' + options.prev_img + '" alt=""/></a><a class="slider_next" href=""><img src="' + options.next_img + '" alt="" /></a>');
        }else{
            $this.parent().append('<a class="slider_prev" href="">' + options.prev_text + '</a><a class="slider_next" href="">' + options.next_text + '</a>');
        }

        $this.parent().find('.slider_prev').css({'float':'left','outline':'0','color':'yellow'});
        $this.parent().find('.slider_next').css({'float':'right','color':'yellow'});


        /////////////////////////////////////////////////////////////////////////////////////////////////////////////
        // Accomodate padding-top for controls when elements are absolutely positioned (only in fade mode)
        /////////////////////////////////////////////////////////////////////////////////////////////////////////////

        if(options.mode == 'fade'){
           $this.parent().find('.slider_prev').css({'paddingTop' : $this.children().height()})
           $this.parent().find('.slider_next').css({'paddingTop' : $this.children().height()})
        }

        /////////////////////////////////////////////////////////////////////////////////////////////////////////////
        // Actions when user clicks next / prev buttons
        /////////////////////////////////////////////////////////////////////////////////////////////////////////////

        $this.parent().find('.slider_next').click(function(){
            if(!is_working){
                if(options.mode == 'slide'){
                    animate_next();
                    if(options.auto){
                        clearInterval($.t);
                        $.t = setInterval(function(){animate_next();},options.pause);
                    }
                }else if(options.mode == 'fade'){
                    fade('next');
                    if(options.auto){
                        clearInterval($.t);
                        $.t = setInterval(function(){fade('next');},options.pause);
                    }
                }
            }
            return false;
        });

        $this.parent().find('.slider_prev').click(function(){
            if(!is_working){
                if(options.mode == 'slide'){
                    animate_prev();
                    if(options.auto){
                        clearInterval($.t);
                        $.t = setInterval(function(){animate_prev();},options.pause);
                    }
                }else if(options.mode == 'fade'){
                    fade('prev');
                    if(options.auto){
                        clearInterval($.t);
                        $.t = setInterval(function(){fade('prev');},options.pause);
                    }
                }
            }
            return false;
        });
    }


    function ticker() {
        if(options.ticker_direction == 'left'){
            $this.animate({'left':'-' + $parent_width * 2 + 'px'},'linear',function(){
                $this.css({'left':'-' + $parent_width + 'px'}).children(':first').appendTo($this);
                ticker();
            });
        }else if(options.ticker_direction == 'right'){
            $this.animate({'left': 0},function(){
                $this.css({'left':'-' + $parent_width + 'px'}).children(':last').insertBefore($this.children(':first'));
                ticker();
            });
        }
    }


    /////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // Create content wrapper and set CSS
    /////////////////////////////////////////////////////////////////////////////////////////////////////////////

    $this.wrap('<div class="' + options.wrapper_class + '"></div>');
    //console.log($this.parent().css('paddingTop'));
    if(options.mode == 'slide' || options.mode == 'ticker'){
        $this.parent().css({
            'overflow' : 'hidden','position' : 'relative','margin' : '0 auto','width' : options.width + 'px'
        });

        $this.css({
            'width' : '999999px','left' : '-' + $parent_width + 'px'
        });

        $this.children().css({
            'float' : 'left','width' : $parent_width
        });

        $this.children(':last').insertBefore($this.children(':first'));
    }else if(options.mode == 'fade'){
     $this.parent().css({
         'overflow' : 'hidden','width' : options.width + 'px'
         //'height' : $this.children().height()
     });

     if(!options.controls){
         $this.parent().css({'height' : $this.children().height()});
     }

     $this.children().css({
         'position' : 'absolute','width' : $parent_width,'listStyle' : 'none','opacity' : 0
     });

     $this.children(':first').css({
         'opacity' : 1
     });
    }

    /////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // Check if user selected "auto"
    /////////////////////////////////////////////////////////////////////////////////////////////////////////////

    if(!options.auto){
        add_controls();
    }else{
        if(options.mode == 'ticker'){
            ticker();
        }else{
            /////////////////////////////////////////////////////////////////////////////////////////////////////////////
            // Set a timed interval
            /////////////////////////////////////////////////////////////////////////////////////////////////////////////
            if(options.mode == 'slide'){
                if(options.auto_direction == 'left'){
                    $.t = setInterval(function(){animate_next();},options.pause);
                }else if(options.auto_direction == 'right'){
                    $.t = setInterval(function(){animate_prev();},options.pause);
                }
            }else if(options.mode == 'fade'){
                if(options.auto_direction == 'left'){
                    $.t = setInterval(function(){fade('next');},options.pause);
                }else if(options.auto_direction == 'right'){
                    $.t = setInterval(function(){fade('prev');},options.pause);
                }
            }
            if(options.controls){
                add_controls();
            }
        }
    }
}

解决方法

你可以 use JavaScript to set cookies.

页面加载时,检查cookie.如果cookie存在,他们已经去过该网站.如果没有,他们就没有.这不是完美的(你可以轻松删除cookie),但它的工作原理.

然后,更改相同cookie的值,或者设置一个新cookie,指出用户是否单击了x.

我不想只复制和粘贴代码,但W3C schools example几乎就是你要找的.

所以基本上你将有三种状态：

>从未来过这里(没有饼干)
>在这里但没有点击x(cookie name =“new_user_status”,value =“new”或者什么)
>点击x(cookie name =“new_user_status”,value =“他们很好”.或者其他)

您甚至可以为要显示的每条消息执行此操作.

> cookie name = [无论你的留言标题是什么]> cookie值=显示/隐藏

原文链接：https://www.f2er.com/jquery/178616.html

jquery – 像Stack Overflow这样的简介栏

解决方法

猜你在找的jQuery相关文章