如何在启动时加载滑动javascript覆盖_Javascript_Css

如何在启动时加载滑动javascript覆盖

javascript css

如何在启动时加载滑动javascript覆盖,javascript,css,Javascript,Css,我希望在启动时加载javascript覆盖框，邀请用户参与反馈调查我在考虑从屏幕顶部下来的覆盖，让人们要么去调查，要么选择“不，谢谢”。我该怎么做我不想要单独的窗户。我想使用javascript、CSS和jQuery来实现这一点——有可能吗？要实现这一效果，只需将绝对定位的DIV滚动到视口中即可。如果DIV的高度为500，则从top:-500开始，然后增加该值，直到DIV在视口中居中。这将是视口高度-500/2 可用性研究表明，这些模式的弹出窗口并不是很流行。你可能会让你的访问者感到恼火，以

我希望在启动时加载javascript覆盖框，邀请用户参与反馈调查

我在考虑从屏幕顶部下来的覆盖，让人们要么去调查，要么选择“不，谢谢”。我该怎么做

我不想要单独的窗户。我想使用javascript、CSS和jQuery来实现这一点——有可能吗？

要实现这一效果，只需将绝对定位的DIV滚动到视口中即可。如果DIV的高度为500，则从top:-500开始，然后增加该值，直到DIV在视口中居中。这将是视口高度-500/2

可用性研究表明，这些模式的弹出窗口并不是很流行。你可能会让你的访问者感到恼火，以至于他们根本不想接受调查，甚至会立即离开网站。我建议用一种不太打扰的方式让访问者回答一些问题。

我不会在这里编写完整的代码示例，但总体思路是：

创建一个具有所需样式属性且z-index=0的元素，使其能够覆盖在其他元素之上。如果要等待页面加载，可以将显示设置为“无”。不要忘了添加“不谢谢”的内容，调用一些隐藏函数。定义一个名为onLoad的JS函数，该函数将位置和显示更改为前面配置的块就是这样，只需要用JavaScript编写一些难看的代码。

我建议不要做幻灯片覆盖，而是做一个居中的，只需要少写代码。

好的，这里有一些东西供你玩：-

<html>
<head>
<style type="text/css">
#banner { position: absolute; width: 100%; left: 0; }
.banner-content { width: 400px; height: 200px; margin: 0 auto; background: green; }
</style>
</head>
<body>
    <div id="banner">
        <div class="banner-content">text
            <a href="http://google.com">Yes</a>
            <a href="#" onclick="Banner.hide();return false">No</a>
        </div>
    <div>

<script type="text/javascript">
    var Banner=(function(){return{
        init: function(){
            this.ban = document.getElementById('banner');
            this.ban.style.top=-this.ban.offsetHeight;
            this.targetY=400;
            this.speed=15;  // increase this to slide faster
            this.delay=15;  // decrease to slide faster
            this.show();
        }
        ,show: function(){
            var self=this;
            this.anim=setInterval(function(){ self.slideDown() }, this.delay);
        }
        ,hide: function(){
            var self=this;
            this.anim=setInterval(function(){ self.slideUp() }, this.delay);
        }
        ,close: function(){ this.ban.style.display='none'; }
        ,slideDown: function(){
            var banSt = this.ban.style, banTop=parseInt(banSt.top.replace(/px/,'')), banH=this.ban.offsetHeight;
            if ((banTop+banH)<this.targetY) this.ban.style.top = banTop+this.speed;
            else clearInterval(this.anim);
        }
        ,slideUp: function(){
            var banSt = this.ban.style, banTop=parseInt(banSt.top.replace(/px/,'')), banH=this.ban.offsetHeight;
            if ((banTop+banH)>0) this.ban.style.top = banTop-this.speed;
            else clearInterval(this.anim);
        }
    }}())
    window.onload=Banner.init()
</script>
</body>
</html>

你想做动画，还是让它出现？你仍然可以做动画，但是如果你不愿意使用jquery，你必须从头开始制作。是的，我想做动画。我想让它从页面顶部滑到中间。此框中可以有文本/图像。如果你能给我指出一些示例代码，那将是很大的帮助。