网站特效中心 - 动画特效
https://webeffect.muanxue.cn/category/animation/
为页面增添视觉上的吸引力,使页面更加生动活泼,吸引用户停留和浏览,增强页面的交互性和吸引力和用户对操作的控制感和满足感。
-
文字渐变(wzjb)
https://webeffect.muanxue.cn/archives/58/
2024-06-09T13:54:00+08:00
预览特效特效代码(CSS) .text {
position: relative;
display: inline-block;
color: transparent;
background: linear-gradient(150deg,
#08dfb4,
#e6d205 20%,
#2cc4e0 40%,
#8b2ce0 60%,
#ff6384 80%,
#08dfb4);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 400% 100%;
animation: flowCss 12s infinite linear;
}
@keyframes flowCss {
0% {
background-position: 0 0;
}
100% {
background-position: -400% 0;
}
}
.text:hover {
animation: flowCss 5s infinite linear;
}调用教程调用本地(推荐)将css代码保存在你的整体css文件里,也可以直接放在前端(这里演示的是直接放在前端)然后将以下代码放在你需要的地方<style>
.text {
position: relative;
display: inline-block;
color: transparent;
background: linear-gradient(150deg,
#08dfb4,
#e6d205 20%,
#2cc4e0 40%,
#8b2ce0 60%,
#ff6384 80%,
#08dfb4);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 400% 100%;
animation: flowCss 12s infinite linear;
}
@keyframes flowCss {
0% {
background-position: 0 0;
}
100% {
background-position: -400% 0;
}
}
.text:hover {
animation: flowCss 5s infinite linear;
}
</style>
<h2 class="text">Web因你而不同,让我们为你的Web锦上添花!</h2>调用云端(不推荐)代码较短,暂时不提供可修改内容渐变颜色:修改7至12行的颜色代码渐变内容:在部署代码中可以将 Web因你而不同,让我们为你的Web锦上添花! 改为自己喜欢的内容。渐变循环时间:将在css代码17行中的12 改为你想要的时间鼠标选择循环时间:将在css代码31行中的5 改为你想要的时间
-
循环打字(dazi)
https://webeffect.muanxue.cn/archives/57/
2024-06-06T10:29:37+08:00
预览特效特效代码(JS)! function(t, s) {
"object" == typeof exports && "undefined" != typeof module ? module.exports = s() : "function" == typeof define && define.amd ? define(s) : (t || self).Typed = s()
}(this, function() {
function t() {
return t = Object.assign ? Object.assign.bind() : function(t) {
for (var s = 1; s < arguments.length; s++) {
var e = arguments[s];
for (var n in e) Object.prototype.hasOwnProperty.call(e, n) && (t[n] = e[n])
}
return t
}, t.apply(this, arguments)
}
var s = {
strings: ["These are the default values...", "You know what you should do?", "Use your own!", "Have a great day!"],
stringsElement: null,
typeSpeed: 0,
startDelay: 0,
backSpeed: 0,
smartBackspace: !0,
shuffle: !1,
backDelay: 700,
fadeOut: !1,
fadeOutClass: "typed-fade-out",
fadeOutDelay: 500,
loop: !1,
loopCount: Infinity,
showCursor: !0,
cursorChar: "|",
autoInsertCss: !0,
attr: null,
bindInputFocusEvents: !1,
contentType: "html",
onBegin: function(t) {},
onComplete: function(t) {},
preStringTyped: function(t, s) {},
onStringTyped: function(t, s) {},
onLastStringBackspaced: function(t) {},
onTypingPaused: function(t, s) {},
onTypingResumed: function(t, s) {},
onReset: function(t) {},
onStop: function(t, s) {},
onStart: function(t, s) {},
onDestroy: function(t) {}
},
e = new( /*#__PURE__*/ function() {
function e() {}
var n = e.prototype;
return n.load = function(e, n, i) {
if (e.el = "string" == typeof i ? document.querySelector(i) : i, e.options = t({}, s, n), e.isInput = "input" === e.el.tagName.toLowerCase(), e.attr = e.options.attr, e.bindInputFocusEvents = e.options.bindInputFocusEvents, e.showCursor = !e.isInput && e.options.showCursor, e.cursorChar = e.options.cursorChar, e.cursorBlinking = !0, e.elContent = e.attr ? e.el.getAttribute(e.attr) : e.el.textContent, e.contentType = e.options.contentType, e.typeSpeed = e.options.typeSpeed, e.startDelay = e.options.startDelay, e.backSpeed = e.options.backSpeed, e.smartBackspace = e.options.smartBackspace, e.backDelay = e.options.backDelay, e.fadeOut = e.options.fadeOut, e.fadeOutClass = e.options.fadeOutClass, e.fadeOutDelay = e.options.fadeOutDelay, e.isPaused = !1, e.strings = e.options.strings.map(function(t) {
return t.trim()
}), e.stringsElement = "string" == typeof e.options.stringsElement ? document.querySelector(e.options.stringsElement) : e.options.stringsElement, e.stringsElement) {
e.strings = [], e.stringsElement.style.cssText = "clip: rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px;";
var r = Array.prototype.slice.apply(e.stringsElement.children),
o = r.length;
if (o)
for (var a = 0; a < o; a += 1) e.strings.push(r[a].innerHTML.trim())
}
for (var u in e.strPos = 0, e.currentElContent = this.getCurrentElContent(e), e.currentElContent && e.currentElContent.length > 0 && (e.strPos = e.currentElContent.length - 1, e.strings.unshift(e.currentElContent)), e.sequence = [], e.strings) e.sequence[u] = u;
e.arrayPos = 0, e.stopNum = 0, e.loop = e.options.loop, e.loopCount = e.options.loopCount, e.curLoop = 0, e.shuffle = e.options.shuffle, e.pause = {
status: !1,
typewrite: !0,
curString: "",
curStrPos: 0
}, e.typingComplete = !1, e.autoInsertCss = e.options.autoInsertCss, e.autoInsertCss && (this.appendCursorAnimationCss(e), this.appendFadeOutAnimationCss(e))
}, n.getCurrentElContent = function(t) {
return t.attr ? t.el.getAttribute(t.attr) : t.isInput ? t.el.value : "html" === t.contentType ? t.el.innerHTML : t.el.textContent
}, n.appendCursorAnimationCss = function(t) {
var s = "data-typed-js-cursor-css";
if (t.showCursor && !document.querySelector("[" + s + "]")) {
var e = document.createElement("style");
e.setAttribute(s, "true"), e.innerHTML = "\n .typed-cursor{\n opacity: 1;\n }\n .typed-cursor.typed-cursor--blink{\n animation: typedjsBlink 0.7s infinite;\n -webkit-animation: typedjsBlink 0.7s infinite;\n animation: typedjsBlink 0.7s infinite;\n }\n @keyframes typedjsBlink{\n 50% { opacity: 0.0; }\n }\n @-webkit-keyframes typedjsBlink{\n 0% { opacity: 1; }\n 50% { opacity: 0.0; }\n 100% { opacity: 1; }\n }\n ", document.body.appendChild(e)
}
}, n.appendFadeOutAnimationCss = function(t) {
var s = "data-typed-fadeout-js-css";
if (t.fadeOut && !document.querySelector("[" + s + "]")) {
var e = document.createElement("style");
e.setAttribute(s, "true"), e.innerHTML = "\n .typed-fade-out{\n opacity: 0;\n transition: opacity .25s;\n }\n .typed-cursor.typed-cursor--blink.typed-fade-out{\n -webkit-animation: 0;\n animation: 0;\n }\n ", document.body.appendChild(e)
}
}, e
}()),
n = new( /*#__PURE__*/ function() {
function t() {}
var s = t.prototype;
return s.typeHtmlChars = function(t, s, e) {
if ("html" !== e.contentType) return s;
var n = t.substring(s).charAt(0);
if ("<" === n || "&" === n) {
var i;
for (i = "<" === n ? ">" : ";"; t.substring(s + 1).charAt(0) !== i && !(1 + ++s > t.length););
s++
}
return s
}, s.backSpaceHtmlChars = function(t, s, e) {
if ("html" !== e.contentType) return s;
var n = t.substring(s).charAt(0);
if (">" === n || ";" === n) {
var i;
for (i = ">" === n ? "<" : "&"; t.substring(s - 1).charAt(0) !== i && !(--s < 0););
s--
}
return s
}, t
}()); /*#__PURE__*/
return function() {
function t(t, s) {
e.load(this, s, t), this.begin()
}
var s = t.prototype;
return s.toggle = function() {
this.pause.status ? this.start() : this.stop()
}, s.stop = function() {
this.typingComplete || this.pause.status || (this.toggleBlinking(!0), this.pause.status = !0, this.options.onStop(this.arrayPos, this))
}, s.start = function() {
this.typingComplete || this.pause.status && (this.pause.status = !1, this.pause.typewrite ? this.typewrite(this.pause.curString, this.pause.curStrPos) : this.backspace(this.pause.curString, this.pause.curStrPos), this.options.onStart(this.arrayPos, this))
}, s.destroy = function() {
this.reset(!1), this.options.onDestroy(this)
}, s.reset = function(t) {
void 0 === t && (t = !0), clearInterval(this.timeout), this.replaceText(""), this.cursor && this.cursor.parentNode && (this.cursor.parentNode.removeChild(this.cursor), this.cursor = null), this.strPos = 0, this.arrayPos = 0, this.curLoop = 0, t && (this.insertCursor(), this.options.onReset(this), this.begin())
}, s.begin = function() {
var t = this;
this.options.onBegin(this), this.typingComplete = !1, this.shuffleStringsIfNeeded(this), this.insertCursor(), this.bindInputFocusEvents && this.bindFocusEvents(), this.timeout = setTimeout(function() {
0 === t.strPos ? t.typewrite(t.strings[t.sequence[t.arrayPos]], t.strPos) : t.backspace(t.strings[t.sequence[t.arrayPos]], t.strPos)
}, this.startDelay)
}, s.typewrite = function(t, s) {
var e = this;
this.fadeOut && this.el.classList.contains(this.fadeOutClass) && (this.el.classList.remove(this.fadeOutClass), this.cursor && this.cursor.classList.remove(this.fadeOutClass));
var i = this.humanizer(this.typeSpeed),
r = 1;
!0 !== this.pause.status ? this.timeout = setTimeout(function() {
s = n.typeHtmlChars(t, s, e);
var i = 0,
o = t.substring(s);
if ("^" === o.charAt(0) && /^\^\d+/.test(o)) {
var a = 1;
a += (o = /\d+/.exec(o)[0]).length, i = parseInt(o), e.temporaryPause = !0, e.options.onTypingPaused(e.arrayPos, e), t = t.substring(0, s) + t.substring(s + a), e.toggleBlinking(!0)
}
if ("`" === o.charAt(0)) {
for (;
"`" !== t.substring(s + r).charAt(0) && (r++, !(s + r > t.length)););
var u = t.substring(0, s),
p = t.substring(u.length + 1, s + r),
c = t.substring(s + r + 1);
t = u + p + c, r--
}
e.timeout = setTimeout(function() {
e.toggleBlinking(!1), s >= t.length ? e.doneTyping(t, s) : e.keepTyping(t, s, r), e.temporaryPause && (e.temporaryPause = !1, e.options.onTypingResumed(e.arrayPos, e))
}, i)
}, i) : this.setPauseStatus(t, s, !0)
}, s.keepTyping = function(t, s, e) {
0 === s && (this.toggleBlinking(!1), this.options.preStringTyped(this.arrayPos, this));
var n = t.substring(0, s += e);
this.replaceText(n), this.typewrite(t, s)
}, s.doneTyping = function(t, s) {
var e = this;
this.options.onStringTyped(this.arrayPos, this), this.toggleBlinking(!0), this.arrayPos === this.strings.length - 1 && (this.complete(), !1 === this.loop || this.curLoop === this.loopCount) || (this.timeout = setTimeout(function() {
e.backspace(t, s)
}, this.backDelay))
}, s.backspace = function(t, s) {
var e = this;
if (!0 !== this.pause.status) {
if (this.fadeOut) return this.initFadeOut();
this.toggleBlinking(!1);
var i = this.humanizer(this.backSpeed);
this.timeout = setTimeout(function() {
s = n.backSpaceHtmlChars(t, s, e);
var i = t.substring(0, s);
if (e.replaceText(i), e.smartBackspace) {
var r = e.strings[e.arrayPos + 1];
e.stopNum = r && i === r.substring(0, s) ? s : 0
}
s > e.stopNum ? (s--, e.backspace(t, s)) : s <= e.stopNum && (e.arrayPos++, e.arrayPos === e.strings.length ? (e.arrayPos = 0, e.options.onLastStringBackspaced(), e.shuffleStringsIfNeeded(), e.begin()) : e.typewrite(e.strings[e.sequence[e.arrayPos]], s))
}, i)
} else this.setPauseStatus(t, s, !1)
}, s.complete = function() {
this.options.onComplete(this), this.loop ? this.curLoop++ : this.typingComplete = !0
}, s.setPauseStatus = function(t, s, e) {
this.pause.typewrite = e, this.pause.curString = t, this.pause.curStrPos = s
}, s.toggleBlinking = function(t) {
this.cursor && (this.pause.status || this.cursorBlinking !== t && (this.cursorBlinking = t, t ? this.cursor.classList.add("typed-cursor--blink") : this.cursor.classList.remove("typed-cursor--blink")))
}, s.humanizer = function(t) {
return Math.round(Math.random() * t / 2) + t
}, s.shuffleStringsIfNeeded = function() {
this.shuffle && (this.sequence = this.sequence.sort(function() {
return Math.random() - .5
}))
}, s.initFadeOut = function() {
var t = this;
return this.el.className += " " + this.fadeOutClass, this.cursor && (this.cursor.className += " " + this.fadeOutClass), setTimeout(function() {
t.arrayPos++, t.replaceText(""), t.strings.length > t.arrayPos ? t.typewrite(t.strings[t.sequence[t.arrayPos]], 0) : (t.typewrite(t.strings[0], 0), t.arrayPos = 0)
}, this.fadeOutDelay)
}, s.replaceText = function(t) {
this.attr ? this.el.setAttribute(this.attr, t) : this.isInput ? this.el.value = t : "html" === this.contentType ? this.el.innerHTML = t : this.el.textContent = t
}, s.bindFocusEvents = function() {
var t = this;
this.isInput && (this.el.addEventListener("focus", function(s) {
t.stop()
}), this.el.addEventListener("blur", function(s) {
t.el.value && 0 !== t.el.value.length || t.start()
}))
}, s.insertCursor = function() {
this.showCursor && (this.cursor || (this.cursor = document.createElement("span"), this.cursor.className = "typed-cursor", this.cursor.setAttribute("aria-hidden", !0), this.cursor.innerHTML = this.cursorChar, this.el.parentNode && this.el.parentNode.insertBefore(this.cursor, this.el.nextSibling)))
}, t
}()
});调用教程调用本地(推荐)将JS代码保存在dazi.js(请根据实际更改)文件里然后将以下代码放在你喜欢的地方(推荐foot或head文件)<script src="./dazi.js"></script>//请根据实际更改
<script>
var typed = new Typed('#text', {
strings: ['Web因你而不同', '让我们为你的Web锦上添花'],
typeSpeed: 80,
loop: true,
backDelay: 2000,
});
</script>调用云端(不推荐)调用云端是使用本站的云储存,主要方便于使用者测试,如果需要稳定请使用本地调用。<script src="https://files.webeffect.muanxue.cn/assets/js/dazi.js"></script>//可以直接调用
<script>
var typed = new Typed('#text', {
strings: ['Web因你而不同', '让我们为你的Web锦上添花'],
typeSpeed: 80,
loop: true,
backDelay: 2000,
});
</script>
<span id="text"></span>可修改内容循环内容:在部署代码中可以将 Web因你而不同 改为自己喜欢的内容。控制变量:typeSpeed 为打字速度(数字越大越快),loop 为是否循环(true为开启,false为关闭),backDelay 为停留时间(1000为1秒)
-
点击爱心(dianji)
https://webeffect.muanxue.cn/archives/54/
2024-06-06T08:37:00+08:00
预览特效特效代码(JS)var a_idx = 0;
$("html").click(function(e) {
var a = new Array(
"❤️", "💛", "🧡", "💚", "💙"
);
var $i = $("<span/>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 144469,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "#f00"
});
$("body").append($i);
$i.animate({
"top": y - 160,
"opacity": 0
},
1500,
function() {
$i.remove()
})
});调用教程调用本地(推荐)将JS代码保存在dianji.js(请根据实际更改)文件里然后将以下代码放在你喜欢的地方(推荐foot或head文件)<script src="./dianji.js"></script>//请根据实际更改调用云端(不推荐)调用云端是使用本站的云储存,主要方便于使用者测试,如果需要稳定请使用本地调用。<script src="https://files.webeffect.muanxue.cn/assets/js/dianji.js"></script>//可以直接调用可修改内容点击内容:可以将特效代码第4行中的 "❤️", "💛", "🧡", "💚", "💙" 改为自己喜欢的内容(包括文字)元素区域单独显示:可以将特效代码第2行中的html 改为你仅仅想要在某个区域显示的元素,比如:body、form等等注意如果特效没有显示,那么请引入 jQuery 库:<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
-
鱼群跃动(yuqun)
https://webeffect.muanxue.cn/archives/47/
2024-06-05T21:02:00+08:00
预览特效特效代码(JS)var RENDERER = {
POINT_INTERVAL: 5,
FISH_COUNT: 3,
MAX_INTERVAL_COUNT: 50,
INIT_HEIGHT_RATE: .5,
THRESHOLD: 50,
init: function() {
this.setParameters(), this.reconstructMethods(), this.setup(), this.bindEvent(), this.render()
},
setParameters: function() {
this.$window = $(window), this.$container = $("#j-fish-skip"), this.$canvas = $("<canvas />"), this.context = this.$canvas.appendTo(this.$container).get(0).getContext("2d"), this.points = [], this.fishes = [], this.watchIds = []
},
createSurfacePoints: function() {
var t = Math.round(this.width / this.POINT_INTERVAL);
this.pointInterval = this.width / (t - 1), this.points.push(new SURFACE_POINT(this, 0));
for (var i = 1; i < t; i++) {
var e = new SURFACE_POINT(this, i * this.pointInterval),
h = this.points[i - 1];
e.setPreviousPoint(h), h.setNextPoint(e), this.points.push(e)
}
},
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 = !1, 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() {
for (; this.watchIds.length > 0;) clearTimeout(this.watchIds.pop())
},
jdugeToStopResize: function() {
var t = this.$window.width(),
i = this.$window.height(),
e = t == this.tmpWidth && i == this.tmpHeight;
this.tmpWidth = t, this.tmpHeight = i, e && this.setup()
},
bindEvent: function() {
this.$window.on("resize", this.watchWindowSize), this.$container.on("mouseenter", this.startEpicenter), this.$container.on("mousemove", this.moveEpicenter)
},
getAxis: function(t) {
var i = this.$container.offset();
return {
x: t.clientX - i.left + this.$window.scrollLeft(),
y: t.clientY - i.top + this.$window.scrollTop()
}
},
startEpicenter: function(t) {
this.axis = this.getAxis(t)
},
moveEpicenter: function(t) {
var i = this.getAxis(t);
this.axis || (this.axis = i), this.generateEpicenter(i.x, i.y, i.y - this.axis.y), this.axis = i
},
generateEpicenter: function(t, i, e) {
if (!(i < this.height / 2 - this.THRESHOLD || i > this.height / 2 + this.THRESHOLD)) {
var h = Math.round(t / this.pointInterval);
h < 0 || h >= this.points.length || this.points[h].interfere(i, e)
}
},
reverseVertical: function() {
this.reverse = !this.reverse;
for (var t = 0, i = this.fishes.length; t < i; t++) this.fishes[t].reverseVertical()
},
controlStatus: function() {
for (var t = 0, i = this.points.length; t < i; t++) this.points[t].updateSelf();
for (t = 0, i = this.points.length; t < i; t++) this.points[t].updateNeighbors();
this.fishes.length < this.fishCount && 0 == --this.intervalCount && (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.context.fillStyle = "rgba(250,128,114,0.7)";
for (var t = 0, i = this.fishes.length; t < i; t++) this.fishes[t].render(this.context);
this.context.save(), this.context.globalCompositeOperation = "xor", this.context.beginPath(), this.context.moveTo(0, this.reverse ? 0 : this.height);
for (t = 0, i = this.points.length; t < i; t++) this.points[t].render(this.context);
this.context.lineTo(this.width, this.reverse ? 0 : this.height), this.context.closePath(), this.context.fill(), this.context.restore()
}
},
SURFACE_POINT = function(t, i) {
this.renderer = t, this.x = i, this.init()
};
SURFACE_POINT.prototype = {
SPRING_CONSTANT: .03,
SPRING_FRICTION: .9,
WAVE_SPREAD: .3,
ACCELARATION_RATE: .01,
init: function() {
this.initHeight = this.renderer.height * this.renderer.INIT_HEIGHT_RATE, this.height = this.initHeight, this.fy = 0, this.force = {
previous: 0,
next: 0
}
},
setPreviousPoint: function(t) {
this.previous = t
},
setNextPoint: function(t) {
this.next = t
},
interfere: function(t, i) {
this.fy = this.renderer.height * this.ACCELARATION_RATE * (this.renderer.height - this.height - t >= 0 ? -1 : 1) * Math.abs(i)
},
updateSelf: function() {
this.fy += this.SPRING_CONSTANT * (this.initHeight - this.height), this.fy *= this.SPRING_FRICTION, this.height += this.fy
},
updateNeighbors: function() {
this.previous && (this.force.previous = this.WAVE_SPREAD * (this.height - this.previous.height)), this.next && (this.force.next = this.WAVE_SPREAD * (this.height - this.next.height))
},
render: function(t) {
this.previous && (this.previous.height += this.force.previous, this.previous.fy += this.force.previous), this.next && (this.next.height += this.force.next, this.next.fy += this.force.next), t.lineTo(this.x, this.renderer.height - this.height)
}
};
var FISH = function(t) {
this.renderer = t, this.init()
};
FISH.prototype = {
GRAVITY: .4,
init: function() {
this.direction = Math.random() < .5, this.x = this.direction ? this.renderer.width + this.renderer.THRESHOLD : -this.renderer.THRESHOLD, this.previousY = this.y, this.vx = this.getRandomValue(4, 10) * (this.direction ? -1 : 1), this.renderer.reverse ? (this.y = this.getRandomValue(1 * this.renderer.height / 10, 4 * this.renderer.height / 10), this.vy = this.getRandomValue(2, 5), this.ay = this.getRandomValue(.05, .2)) : (this.y = this.getRandomValue(6 * this.renderer.height / 10, 9 * this.renderer.height / 10), this.vy = this.getRandomValue(-5, -2), this.ay = this.getRandomValue(-.2, -.05)), this.isOut = !1, this.theta = 0, this.phi = 0
},
getRandomValue: function(t, i) {
return t + (i - t) * Math.random()
},
reverseVertical: function() {
this.isOut = !this.isOut, this.ay *= -1
},
controlStatus: function(t) {
this.previousY = this.y, this.x += this.vx, this.y += this.vy, this.vy += this.ay, this.renderer.reverse ? this.y > this.renderer.height * this.renderer.INIT_HEIGHT_RATE ? (this.vy -= this.GRAVITY, this.isOut = !0) : (this.isOut && (this.ay = this.getRandomValue(.05, .2)), this.isOut = !1) : this.y < this.renderer.height * this.renderer.INIT_HEIGHT_RATE ? (this.vy += this.GRAVITY, this.isOut = !0) : (this.isOut && (this.ay = this.getRandomValue(-.2, -.05)), this.isOut = !1), this.isOut || (this.theta += Math.PI / 20, this.theta %= 2 * Math.PI, this.phi += Math.PI / 30, this.phi %= 2 * Math.PI), this.renderer.generateEpicenter(this.x + (this.direction ? -1 : 1) * this.renderer.THRESHOLD, this.y, this.y - this.previousY), (this.vx > 0 && this.x > this.renderer.width + this.renderer.THRESHOLD || this.vx < 0 && this.x < -this.renderer.THRESHOLD) && this.init()
},
render: function(t) {
t.save(), t.translate(this.x, this.y), t.rotate(Math.PI + Math.atan2(this.vy, this.vx)), t.scale(1, this.direction ? 1 : -1), t.beginPath(), t.moveTo(-30, 0), t.bezierCurveTo(-20, 15, 15, 10, 40, 0), t.bezierCurveTo(15, -10, -20, -15, -30, 0), t.fill(), t.save(), t.translate(40, 0), t.scale(.9 + .2 * Math.sin(this.theta), 1), t.beginPath(), t.moveTo(0, 0), t.quadraticCurveTo(5, 10, 20, 8), t.quadraticCurveTo(12, 5, 10, 0), t.quadraticCurveTo(12, -5, 20, -8), t.quadraticCurveTo(5, -10, 0, 0), t.fill(), t.restore(), t.save(), t.translate(-3, 0), t.rotate((Math.PI / 3 + Math.PI / 10 * Math.sin(this.phi)) * (this.renderer.reverse ? -1 : 1)), t.beginPath(), this.renderer.reverse ? (t.moveTo(5, 0), t.bezierCurveTo(10, 10, 10, 30, 0, 40), t.bezierCurveTo(-12, 25, -8, 10, 0, 0)) : (t.moveTo(-5, 0), t.bezierCurveTo(-10, -10, -10, -30, 0, -40), t.bezierCurveTo(12, -25, 8, -10, 0, 0)), t.closePath(), t.fill(), t.restore(), t.restore(), this.controlStatus(t)
}
}, $(function() {
RENDERER.init()
});调用教程调用本地(推荐)将JS代码保存在yuqun.js(请根据实际更改)文件里然后将以下代码放在你喜欢的地方(推荐foot或head文件)<script src="./yuqun.js">//请根据实际更改</script>
<div id="yuqun" style="position: relative;height:300px ;width: 100%;"></div>调用云端(不推荐)调用云端是使用本站的云储存,主要方便于使用者测试,如果需要稳定请使用本地调用。<script src="https://files.webeffect.muanxue.cn/assets/js/yuqun.js"></script>
<div id="yuqun" style="position: relative;height:300px ;width: 100%;"></div>//可以直接调用可修改内容调用代码中的height:300px 和width: 100% 分别代表鱼群的高度和宽度,可以根据情况进行修改调整。如果不懂去问度娘注意如果特效没有显示,那么请引入 jQuery 库:<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>