jquery倒影水波纹效果插件

  html5 canvas实现的图片水中倒影,水波纹效果jquery插件。

IE浏览器运行本示例请用IE9+版本的浏览器

webkit核心的浏览器如chrome注意要搭建服务器访问,要不本地file浏览出现如下错误

  1. Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
Uncaught Error: SecurityError: DOM Exception 18

效果如下

jquery倒影水波纹效果插件

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倒影水波纹效果插件

评论(0)Web开发网
阅读(213)喜欢(0)JavaScript/Ajax开发技巧