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