jquery曲线波动动画效果代码
代码语言:html
所属分类:动画
代码描述:jquery曲线波动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.5"> </head> <body> <style type="text/css"> *{margin:0;padding:0;}.headline-bg{position:absolute;width:100%;height:100%;overflow:hidden;background:-webkit-linear-gradient(top,#0076d1,#5db8ff);background:-moz-linear-gradient(top,#0076d1,#5db8ff);background:-o-linear-gradient(top,#0076d1,#5db8ff);background:-ms-linear-gradient(top,#0076d1,#5db8ff);} </style> <div class="headline-bg"><canvas id="waves" class="waves"></canvas></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script > $(document).ready(function() { function b() { var d = $(window).width(), e = (768 - d) / 768 + 1, f = 1; fmhPara = $(".feature-mi").height() < 641 || $(".feature-ai").height() < 641 || $(".feature-bi").height() < 641 ? 0 : 1, 768 > d ? ($(".mi-headline-bg").css("height", $(".feature-mi").height() + 28 * e * f + "px"), $(".ai-headline-bg").css("height", $(".feature-ai").height() + 28 * e * f + "px"), $(".bi-headline-bg").css("height", $(".feature-bi").height() + 28 * e * f + "px"), $(".ee-headline-bg").css("height", $(".feature-ee").height() + parseInt($(".feature-ee").css("padding-top")) + 20 * e + "px")) : ($(".mi-headline-bg").removeAttr("style"), $(".ai-headline-bg").removeAttr("style"), $(".bi-headline-bg").removeAttr("style"), $(".ee-headline-bg").removeAttr("style")) } setTimeout(function() { b() }, 100), $(window).resize(function() { b() }) }), function(c, d) { "function" == typeof define && "object" == typeof define.amd ? define([], function() { return d(c) }) : c.SineWaves = d(c) }(this, function() { function q(b) { if (this.options = y.defaults(this.options, b), this.el = this.options.el, delete this.options.el, !this.el) { throw "No Canvas Selected" } if (this.ctx = this.el.getContext("2d"), this.waves = this.options.waves, delete this.options.waves, !this.waves || !this.waves.length) { throw "No waves specified" } this.dpr = window.devicePixelRatio || 1, this.updateDimensions(), window.addEventListener("resize", this.updateDimensions.bind(this)), this.setupU.........完整代码请登录后点击上方下载按钮下载查看
网友评论0