jquery+css实现鱼儿水中跳跃游动动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：jquery+css实现鱼儿水中跳跃游动动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <head>
        <style type="text/css">
                    html,body {
	width:100%;
	height:100%;
	margin:0;
	padding:0
}
body {
	background:-webkit-linear-gradient(left,rgba(89,114,192,0.8),rgba(89,114,192,0.2));
	background:-o-linear-gradient(right,rgba(89,114,192,0.8),rgba(89,114,192,0.2));
	background:-moz-linear-gradient(right,rgba(89,114,192,0.8),rgba(89,114,192,0.2));
	background:linear-gradient(to right,rgba(89,114,192,0.8),rgba(89,114,192,0.2));
	background-size:400% 400%;
	animation:gradientBG 5s ease infinite
}
@keyframes gradientBG {
	0% {
	background-position:0 50%
}
50% {
	background-position:100% 50%
}
100% {
	background-position:0 50%
}
}.container {
	margin:0;
	padding:0;
	background-color:transparent;
	width:100%;
	height:200px;
	z-index:-1;
	position:fixed;
	bottom:0;
	left:0
}

        </style>
    </head>

    <body>
        <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
        <div id="jsi-flying-fish-container" class="container"></div>
        <script>
            var RENDERER = {
     POINT_INTERVAL: 5,
     FISH_COUNT: 3,
     MAX_INTERVAL_COUNT: 50,
     INIT_HEIGHT_RATE: 0.5,
     THRESHOLD: 50,
     init: function() {
         this.setParameters();
         this.reconstructMethods();
         this.setup();
         this.bindEvent();
         this.render()
     },
     setParameters: function() {
         this.$window = $(window);
         this.$container = $("#jsi-flying-fish-container");
         this.$canvas = $("<canvas />");
         this.context = this.$canvas.appendTo(this.$container).get(0).getContext("2d");
         this.points = [];
         this.fishes = [];
         this.watchIds = []
     },
     createSurfacePoints: function() {
         var a = Math.round(this.width / this.POINT_INTERVAL);
         this.pointInterval = this.width / (a - 1);
         this.points.push(new SURFACE_POINT(this, 0));
         for (var b = 1; b < a; b++) {
             var c = new SURFACE_POINT(this, b * this.pointInterval),
                 d = this.points[b - 1];
             c.setPreviousPoint(d);
             d.setNextPoint(c);
             this.points.push(c)
         }
     },
     reconstructMethods: function() {
         this.watchWindowSize = this.watchWindowSize.bind(this);
         this.jdugeToStopResize = this.jdugeToStopResize.bind(this);
         this.startEpicenter = this.startEpicenter.bind(this);
         this.moveEpicenter = this.moveEpicenter.bind(this);
         this.reverseVertical = this.reverseVertical.bind(this);
         this.render = this.render.bind(this)
     },
     setup: function() {
         this.points.length = 0;
         this.fishes.length = 0;
         this.watchIds.length = 0;
         this.intervalCount = this.MAX_INTERVAL_COUNT;
         this.width = this.$container.width();
         this.height = this.$container.height();
         this.fishCount = this.FISH_COUNT * this.width / 500 * this.height / 500;
         this.$canvas.attr({
             width: this.width,
             height: this.height
         });
         this.reverse = false;
         this.fishes.push(new FISH(this));
         this.createSurfacePoints()
     },
     watchWindowSize: function() {
         this.clearTimer();
         this.tmpWidth = this.$window.width();
         this.tmpHeight = this.$window.height();
         this.watchIds.push(setTimeout(this.jdugeToStopResize, this.WATCH_INTERVAL))
     },
     clearTimer: function() {
         while (this.watchIds.length > 0) {
             clearTimeout(this.watchIds.pop())
         }
     },
     jdugeToStopResize: function() {
         var c = this.$window.width(),
             a = this.$window.height(),
             b = (c == this.tmpWidth && a == this.tmpHeight);
         this.tmpWidth = c;
         this.tmpHeight = a;
         if (b) {
             this.setup()
         }
     },
     bindEvent: function() {
         this.$window.on("resize", this.watchWindowSize);
         this.$container.on("mouseenter", this.startEpicenter);
         this.$container.on("mousemove", this.moveEpicenter);
         this.$container.on("click", this.reverseVertical)
     },
     getAxis: function(a) {
         var b = this.$container.offset();
         return {
             x: a.clientX - b.left + this.$window.scrollLeft(),
             y: a.clientY - b.top + this.$window.scrollTop()
         }
     },
     startEpicenter: function(a) {
         this.axis = this.getAxis(a)
     },
     moveEpicenter: function(b) {
         var a = this.getAxis(b);
         if (!this.axis) {
             this.axis = a
         }
         this.generateEpicenter(a.x, a.y, a.y - this.axis.y);
         this.axis = a
     },
     generateEpicenter: function(c, d, b) {
         if (d < this.height / 2 - this.THRESHOLD || d > this.height / 2 + this.THRESHOLD) {
             return
         }
         var a = Math.round(c / this.pointInterval);
         if (a < 0 || a >= this.points.length) {
             return
         }
         this.points[a].interfere(d, b)
     },
     reverseVertical: function() {
         this.reverse = !this.reverse;
         for (var b = 0, a = this.fishes.length; b < a; b++) {
             this.fishes[b].reverseVertical()
         }
     },
     controlStatus: function() {
         for (var b = 0, a = this.points.length; b < a; b++) {
             this.points[b].updateSelf()
         }
         for (var b = 0, a = this.points.length; b < a; b++) {
             this.points[b].updateNeighbors()
         }
         if (this.fishes.length < this.fishCount) {
             if (--this.intervalCount == 0) {
                 this.intervalCount = this.MAX_INTERVAL_COUNT;
                 this.fishes.push(new FISH(this))
             }
         }
     },
     render: function() {
         requestAnimationFrame(this.render);
         this.controlStatus();
         this.context.clearRect(0, 0, this.width, this.height);
         this.con.........完整代码请登录后点击上方下载按钮下载查看