模仿原生的安卓上拉下拉尽头水波纹，就是应用上拉到底时出现彩色的波纹，追随手指移动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<style>
.canvasphone {
position: fixed;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -250px;
background: url('./phone.png') center center no-repeat;
background-size: 100% 100%;
width: 500px;
height: 500px;
}
canvas {
width: 215px;
margin: 70px 142px;
height: 355px;
}
</style>
</head>
<body>
<div class="canvasphone">
<canvas width="215" height="355" id="aaa"></canvas>
</div>
</body>
<script>
var cvs = document.getElementById("aaa").getContext('2d');
$("#aaa").on('mousedown', function(de) {
var dy = de.pageY;
document.onmousemove = function(me) {
var x = me.pageX - $("canvas").offset().left;
var y = (me.pageY - de.pageY) / 5;
if (y > 30) {
y = 30;
}
if (y < -30) {
y = -30;
}
if (x > 215) {
return;
}
if (x < 0) {
return;
}
var a = Math.abs(y) / 80;
cvs.clearRect(0,0,215,355);
cvs.fillStyle = 'rgba(30,144,255,' + a + ')';
cvs.beginPath();
if (y > 0) {
cvs.moveTo(0,0);
cvs.quadraticCurveTo(x,y,215,0);
} else {
cvs.moveTo(0,355);
cvs.quadraticCurveTo(x,355 + y,215,355);
}
cvs.fill();
}
document.onmouseup = function(e) {
cvs.clearRect(0,0,215,355);
document.onmousemove = null;
document.onmouseup = null;
}
})
</script>
</html>
650
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
