HTML 5 - 动态元素作为图层答案

【问题标题】：HTML 5 -Dynamic Elements as layersHTML 5 - 动态元素作为图层
【发布时间】：2012-02-04 09:44:00
【问题描述】：

我想将动态元素实现为层，一个在另一个之上。上面的层在视觉上对下面的层是半透明的。（也就是说，一个层有一个元素，其中图像定期变化，另一个层其中元素具有水平滚动文本）这可能吗？如果答案是“是”，该怎么做？

【问题讨论】：

【解决方案1】：

例如尝试：

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

【讨论】：

对图片感到抱歉；仅用于演示目的。