如何讓滑動JavaScript覆蓋啓動時加載

我想在啓動時加載一個javascript覆蓋框加載用戶參與反饋調查。如何讓滑動JavaScript覆蓋啓動時加載

我正在考慮從屏幕頂部下來的疊加層，並讓人們參與調查或選擇「不，謝謝」。我該怎麼做？

我不想要一個單獨的窗口。我想這樣做只使用JavaScript，CSS（沒有jQuery - 是否有可能？）

來源

2010-08-18 Sofia

你試圖做動畫，或者只是有它出現玩嗎？你仍然可以做動畫，但如果你不願意使用jQuery，你必須從頭開始。 – Jage 2010-08-18 07:39:33

是的，我想做動畫。我希望它從頁面頂部向下滑動到中間。在這個框中可以有文字/圖像。如果你能指點我一些示例代碼，這將是很大的幫助。 – Sofia 2010-08-18 08:07:39

要實現這種效果，只需將絕對定位的DIV滾動到視口中即可。如果DIV的高度爲500，則從top: -500開始，然後增加該值直到DIV在視口中居中。（這將是視口高度 - 500/2）

可用性研究顯示這些模式「流行音樂」雖然不是很受歡迎。您最終可能會讓您的訪客煩躁，甚至根本不想參加調查，甚至立即離開網站。我建議採取一種較不干擾的方式來要求訪問者回答幾個問題。

來源

2010-08-18 07:39:28 10goto10

我不會在這裏寫整個代碼示例，但總體思路是：

創建<div/>元素與所需的樣式屬性和z-index=0，使其能夠覆蓋在你的其他元素之上。如果您希望它等待頁面加載，您可以將display設置爲none。不要忘記添加與'不用謝謝'調用一些隱藏功能的內容。
定義JS調用的函數onLoad()其改變位置和display到<div/>的block我們前面

這就是它配置，只需要使用JavaScript編寫一些醜陋的代碼。我會建議不要做一個幻燈片覆蓋，但一箇中心，只是少寫代碼。

來源

2010-08-18 07:40:29 Bivas

好吧，這裏的東西給你用:-)

<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>

來源

2010-08-18 20:47:26 tborychowski

如何讓滑動JavaScript覆蓋啓動時加載

回答

相關問題