jquery倒影水波纹效果插件
html5 canvas实现的图片水中倒影，水波纹效果jquery插件。
IE浏览器运行本示例请用IE9+版本的浏览器
webkit核心的浏览器如chrome注意要搭建服务器访问，要不本地file浏览出现如下错误
- Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
Uncaught Error: SecurityError: DOM Exception 18
效果如下
jquery倒影水波纹效果插件源代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>超酷的jquery实现图片水波纹动画效果源码_酷站代码 www.5icool.org</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
window.onload = (function () {
jQuery.fn.lake = function (options) {
var settings = $.extend({
'speed': 1,
'scale': 1,
'waves': 10,
'image': true
}, options);
var waves = settings['waves'];
var speed = settings['speed'] / 4;
var scale = settings['scale'] / 2;
var ca = document.createElement('canvas');
var c = ca.getContext('2d');
var img = this.get(0);
var img_loaded = false;
img.parentNode.insertBefore(ca, img);
var w, h, dw, dh;
var offset = 0;
var frame = 0;
var max_frames = 0;
var frames = [];
console.log(img)
imgOnload = function () {
c.save();
c.canvas.width = this.width;
c.canvas.height = this.height * 2;
c.drawImage(this, 0, 0);
c.scale(1, -1);
c.drawImage(this, 0, -this.height * 2);
img_loaded = true;
c.restore();
w = c.canvas.width;
h = c.canvas.height;
dw = w;
dh = h / 2;
var id = c.getImageData(0, h / 2, w, h).data;
var end = false;
// precalc frames
// image displacement
c.save();
while (!end) {
// var odd = c.createImageData(dw, dh);
var odd = c.getImageData(0, h / 2, w, h);
var od = odd.data;
// var pixel = (w*4) * 5;
var pixel = 0;
for (var y = 0; y < dh; y++) {
for (var x = 0; x < dw; x++) {
// var displacement = (scale * dd[pixel]) | 0;
var displacement = (scale * 10 * (Math.sin((dh / (y / waves)) + (-offset)))) | 0;
var j = ((displacement + y) * w + x + displacement) * 4;
// horizon flickering fix
if (j < 0) {
pixel += 4;
continue;
}
// edge wrapping fix
var m = j % (w * 4);
var n = scale * 10 * (y / waves);
if (m < n || m > (w * 4) - n) {
var sign = y < w / 2 ? 1 : -1;
od[pixel] = od[pixel + 4 * sign];
od[++pixel] = od[pixel + 4 * sign];
od[++pixel] = od[pixel + 4 * sign];
od[++pixel] = od[pixel + 4 * sign];
++pixel;
continue;
}
if (id[j + 3] != 0) {
od[pixel] = id[j];
od[++pixel] = id[++j];
od[++pixel] = id[++j];
od[++pixel] = id[++j];
++pixel;
} else {
od[pixel] = od[pixel - w * 4];
od[++pixel] = od[pixel - w * 4];
od[++pixel] = od[pixel - w * 4];
od[++pixel] = od[pixel - w * 4];
++pixel;
// pixel += 4;
}
}
}
if (offset > speed * (6 / speed)) {
offset = 0;
max_frames = frame - 1;
// frames.pop();
frame = 0;
end = true;
} else {
offset += speed;
frame++;
}
frames.push(odd);
}
c.restore();
if (!settings.image) {
c.height = c.height / 2;
}
};
if (img.complete) imgOnload.call(img); else img.onload = imgOnload;
setInterval(function () {
if (img_loaded) {
if (!settings.image) {
c.putImageData(frames[frame], 0, 0);
} else {
c.putImageData(frames[frame], 0, h / 2);
}
// c.putImageData(frames[frame], 0, h/2);
if (frame < max_frames) {
frame++;
} else {
frame = 0;
}
}
}, 33);
return this;
}
$('#lake-img').lake({
'waves': 10,
'scale': 0.5
});
$('#lake-img2').lake();
$('#lake-img3').lake({
'speed': 1.5,
'scale': 1.5
});
})
</script>
<style type="text/css">
canvas { float: left; }
#lakes { overflow: hidden; }
#container {
width: 720px;
margin: 30px auto;
}
</style>
</head>
<body>
<div id="container">
<h1>超酷的jquery实现图片水波纹动画特效演示</h1>
<div id="lakes">
<img id="lake-img" src="/images/lake.png" style="display: none;" />
<img id="lake-img2"src="/images/lake2.png" style="display: none;"/>
<img id="lake-img3"src="/images/lake3.png" style="display: none;"/>
</div>
</div>
</body>
</html>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：jquery倒影水波纹效果插件