一个支付宝盖印效果,点击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 >
<map >
<area alt="Sun" href="javascript:stamp();" coords="840,120,1070,160" shape="rect">
</map>
<img >
</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',
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>
[/task]
相关文章：
-
2021-10-17
-
2022-12-23
-
2022-01-13
-
2021-08-24
-
2021-10-27
-
2021-07-09
猜你喜欢
-
2022-12-23
-
2022-12-23
-
2022-12-23
-
2022-12-23
-
2022-01-01
-
2022-12-23
相关资源
-
下载
2023-01-18
-
下载
2021-06-24
-
下载
2022-12-14
-
下载
2022-12-06