jquery.eraser制作擦涂效果

jquery.eraser制作擦涂效果

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <meta name='HandheldFriendly' content='True'/>
        <!--<meta name='viewport' content='initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' />-->
        <meta name='viewport' content='user-scalable=0'/>
        <meta name="viewport" content="width=device-width"/>
        <title>
            jQuery.eraser, a plugin that makes an image erasable (touch & mouse)
        </title>
        <style type="text/css">
        
                * {
     
                }
        
        
        
                    body {
        
                        background: #FFF;
        
                        color: #000;
        
                        margin: 5px;
        
                        padding: 0px;
        
                        margin-bottom: 45px;
        
                        text-align: center;
        
                        font-family: Helvetica, Arial;
        
                    }
        
        
        
                    a {
        
                        color: #000;
        
                    }
        
        
        
                    a.box {
        
                        text-decoration: none;
        
                        display: inline-block;
        
                        color: #FFF;
        
                        background: #000;
        
                        padding: 10px;
        
                        margin: 10px;
        
                    }
        
        
        
                    .big {
        
                        font-size: 2em;
        
                        display: inline-block;
        
                        margin: 10px;
        
                    }
        
                    .container {
        
                        position: relative;
        
                        display: inline-block;
        
                        width: 533px;
        
                        height: 800px;
        
                    }
        
        
        
                    #robot {
        
                        position: absolute;
        
                        top: 0px;
        
                        left: 0px;
        
                        z-index: 1;
        
                        -webkit-box-shadow: 0px 0px 20px 0px #707070;
        
                        -moz-box-shadow: 0px 0px 20px 0px #707070;
        
                        box-shadow: 0px 0px 20px 0px #707070;
        
                    }
        
        
        
                    #redux {
        
                        position: absolute;
        
                        top: 0px;
        
                        left: 0px;
        
                        z-index: 2;
        
                    }
        
        
        
                </style>
    </head>
    <body>
        <h1>
            jQuery.eraser()
        </h1>
        <p>
            a plugin that replaces the targeted image by an interactive canvas
            <br/>
            that can be erased
            using touch ou mouse moves.
            <br/>
            <b>
                try by yourself below...
            </b>
        </p>
        <p>
            <code id="percent">
                $("#myImage").eraser();
            </code>
        </p>
        <span class="container">
            <img id="robot" src="img/robot.jpg"/>
            <img id="redux" src="img/robot_redux.png"/>
        </span>
        <p>
            <a href="#" onclick="reset(event);" class="box">
                RESET
            </a>
            <a href="#" onclick="remove(event);" class="box">
                CLEAR
            </a>
            <!--<a href="#" onclick="grow(event);" class="box"> GROW </a>-->
        </p>
        <br/>
        <a href="teeth.htm">
            or brush his teeth
        </a>
        .
    </p>
    <script src="http://www.jq22.com/jquery/2.1.1/jquery.min.js"></script>
    <script src='jquery.eraser.js' type='text/javascript'></script>
    <script type = "text/javascript">
    
    
    
                addEventListener( "load", init, false );
    
    
    
                function init( event ) {
    
                    $("#redux").eraser();
    
    
    
                    // you can alse specify the brush size (in pixel) by using options :
    
                    // $("#redux").eraser({size: 20});
    
                }
    
    
            </script>
</body>
</html>

ps:制作刮刮卡 涂抹效果都可以

原创文章如转载,请注明本文链接: http://newmiracle.cn/?p=2344

发表评论

电子邮件地址不会被公开。 必填项已用*标注