HTML 5 - 動態元素作爲圖層

我想實現動態元素作爲圖層，一個在另一個上面的圖層是半透明的視覺到下面的圖層（即一個圖層有一個元素，其中的圖像定期更改，另一個圖層元素水平滾動文本）這可能嗎？如果答案是「是」，那麼這怎麼辦呢？HTML 5 - 動態元素作爲圖層

2012-02-04 bitsapien

例如嘗試：

<html> 
    <head> 
     <script type="text/javascript" charset="utf-8"> 
      window.onload = function() { 

       var canvas = document.getElementById('canvas1'); 

       var img = new Image(); 
       img.src = 'http://rakstagemom.files.wordpress.com/2011/01/image-is-cumulus_clouds_panorama-from-wikipedia-commons.jpg'; 

       var addit = -0.4; 
       var scrollSpeed = 0.01; 
       var left = 0; 
       var ctx = canvas.getContext('2d'); 
       var _scale = document.documentElement.clientHeight/canvas.height; 
       var width = canvas.width; 
       var height = canvas.height; 
       var max = -840; 

       //animation loop 
       var init = setInterval(function() { 
        left += addit; 
        if(left > -1) { 
         addit = -0.4 
        } else if(left < max) 
         addit = 0.4; 
        //0.4 
        ctx.drawImage(img, left, 0, width, height); 
        var thisFrameTime = (thisLoop = new Date) - lastLoop; 
        frameTime += (thisFrameTime - frameTime)/filterStrength; 
       }, scrollSpeed); 
      }; 
     </script> 
     <style> 
      body { 
       overflow: hidden; 
       background: #001; 
      } 
      .window { 
       padding: 0; 
       clear: none; 
       border: 1px solid rgba(0,0,0,0.5); 
       border-radius: 10px 10px 2px 2px; 
       box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3); 
       -o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3); 
       -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3); 
       -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3); 
      } 
      #container { 
       width: 91.5%; 
       height: 10em; 
       margin: .55em .9em .4em .85em; 
       position: absolute; 
       background: rgba(0,100,200,0.25); 
      } 
      #canvas1 { 
       width: auto; 
       height: 100%; 
       position: absolute; 
       top: 0; 
       left: 0; 
      } 
     </style> 
    </head> 
    <body> 
     <canvas id="canvas1" width="1784px" height="534px"></canvas> 
     <div id="container" class="window"> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      </p> 
     </div> 
    </body> 
</html>

來源

2012-02-04 10:04:54

遺憾的形象;僅用於演示目的。 – 2012-02-04 10:05:44

很好用！這裏是一個小提琴：https://jsfiddle.net/n4xfvbw6/ – bitsapien 2015-10-29 06:41:20

@CRahul你會接受答案嗎？ thx – 2015-10-29 06:43:43

HTML 5 - 動態元素作爲圖層

回答

相關問題