我有一个多页网站,其主页上仅带有一个图像徽标。当访问此页面时,我需要图像像屏幕保护程序一样移动。注册任何触摸后,页面将进入第二页。第二页包含其他数据和信息,但是十分钟之内没有任何触摸,它将默认显示并返回到输入页和屏幕保护程序。

所以,两件事。

一种,使用jQuery像屏幕保护程序一样移动图像。
第二,如果未注册任何触摸,则另一个页面的超时时间为十分钟,这会使该人回到具有屏幕保护程序的第一页。

这是一个HTML5页面,因此如果jQuery无法使用,则可能会使用HTML5和Canvas。

这是用于将用作信息亭和触摸屏的网站。

最佳答案

在屏幕保护程序页面上:

您可以使用HTML画布在屏幕上浮动徽标图像。这里是一个链接:

http://jsfiddle.net/m1erickson/E3Qda/

在第二页上:

首次加载页面时如何开始10分钟的setTimeout。

如果用户在10分钟之前触发了触摸事件,则(1)clearTimeout将原始超时(2)setTimeout延长10分钟。

以下是屏幕保护程序页面的示例代码:

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
    img{border:1px solid purple;}
</style>

<script>
    $(function(){

        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");

        var ball;
        var ballX=60;
        var ballY=150;
        var ballRadius=50;

        var image=new Image();
        image.onload=function(){

            // resize the image to fit inside the ball's radius
            var c=document.createElement("canvas");
            var cctx=c.getContext("2d");

            // calc the max side length of a square that fits the ball
            var maxSide=Math.sqrt(2*ballRadius*ballRadius);

            // calc the max rect size that fits in the ball
            var iw=image.width;
            var ih=image.height;
            var maxW,maxH;
            if(iw>=ih){
                maxW=maxSide;
                maxH=maxSide*iw/ih;
            }else{
                maxW=maxSide*ih/iw;
                maxH=maxSide;
            }

            // size the temp canvas to the max rect size
            c.width=maxW;
            c.height=maxH;

            // draw the image to the temp canvas
            cctx.drawImage(image,0,0,iw,ih,0,0,maxW,maxH);


        var ballimg=new Image();
        ballimg.onload=function(){
            ball={x:ballX,y:ballY,r:ballRadius,img:ballimg,imgSide:maxSide,directionX:1,directionY:1};
            drawBall(ball);
        }
        ballimg.src=c.toDataURL();

            requestAnimationFrame(animate);

        }
        image.src="ship.png";

        function drawBall(ball){

            // clip image inside ball
            ctx.save();
            ctx.arc(ball.x,ball.y,ball.r,0,Math.PI*2,false);
            ctx.closePath();
            ctx.clip();

            ctx.fillStyle="white";
            ctx.fillRect(ball.x-ball.r,ball.y-ball.r,ball.r*2,ball.r*2);
            ctx.drawImage(ball.img, ball.x-ball.imgSide/2,ball.y-ball.imgSide/2);
            ctx.restore();

            ctx.beginPath();
            ctx.arc(ball.x,ball.y,ball.r,0,Math.PI*2,false);
            ctx.closePath();
            ctx.strokeStyle="lightgray";
            ctx.lineWidth=2;
            ctx.stroke();

            ctx.beginPath();
            ctx.arc(ball.x,ball.y,ball.r+2,0,Math.PI*2,false);
            ctx.closePath();
            ctx.strokeStyle="gray";
            ctx.lineWidth=2;
            ctx.stroke();
        }


        function animate(time) {
            requestAnimationFrame(animate);

            // move with collision detection
            ball.x+=ball.directionX;
            if(ball.x-ball.r<0 || ball.x+ball.r>canvas.width){
                ball.directionX*=-1;
                ball.x+=ball.directionX;
            }
            ball.y+=ball.directionY;
            if(ball.y-ball.r<0 || ball.y+ball.r>canvas.height){
                ball.directionY*=-1;
                ball.y+=ball.directionY;
            }

            // Draw
            ctx.clearRect(0,0,canvas.width,canvas.height);
            drawBall(ball);
        }

    }); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=350 height=350></canvas>
</body>
</html>

关于javascript - 网站的jQuery或Canvas屏幕保护程序,网站超时返回屏幕保护程序页面,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/22763476/

10-12 12:37
查看更多