一个支付宝盖印效果,点击
demo
[task]<!DOCTYPE html>
<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>
<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',
1950,
height:930,
top:-156,
left:-498,
opacity: 0.3
});
$('#stamper').animate({
650,
height:310,
top:308,
left:303,
opacity:1
},quake)
}
</script>
</body>
</html>
[/task]
