前端录网站,记录前端点点滴滴,帮助程序猿快速成长!

支付宝盖印效果demo

jq
一个支付宝盖印效果,点击demo


<-html>
<-head>
<-meta charset="utf-8">
<-style type="text/css">
html{
height: 100%
}
body{
height: 100%;
margin-top: 0;
overflow: hidden;
}
#container{
position: relative;
background-color: #87ceeb;
height: 100%;
}
#stamper{
position: absolute;
display: none;
}
<-/style>
<-/head>
<-body>
<-div id="container">
<-map id="planetmap" name="planetmap">
<-area  alt="Sun" href="javascript:stamp();" coords="840,120,1070,160" shape="rect">
<-/map>
<-img id="stamper" src="http://websqq.org/wp-content/uploads/2012/09/224516obgwvg4to1hdwzdo1.png" alt=" ">
 
<-/div>
<-script src="http://code.jquery.com/jquery-1.8.0.min.js">
<-script type="text/javascript">
//quake
function quake(){
var container = $("#container");
var position = [-3, 3, - 2, 2, - 1, 1, - 1, 0.5, 0];
var i = 0;
setContainer = setInterval(function() {
    if (i == position.length - 1) clearInterval(setContainer);
        container.css("left", position[i] + "px");
        i++;
    },
    40);
}
//stamp
stamp();
function stamp(){
    $('#stamper').css({
        display:'inline',
        width:1950,
        height:930,
        top:-156,
        left:-498,
        opacity: 0.3
 
    });
 
    $('#stamper').animate({
        width:650,
        height:310,
        top:308,
        left:303,
        opacity:1
    },quake)
}
<-/script>
<-/body>
<-/html>





转载请注明:前端录»支付宝盖印效果demo