1.evanyou 效果-彩带的实现，效果如下
image
注：这个主要用的是 Canvas 画布实现的，点击背景绘制新的图形，代码如下：
/*Html代码:*//*CSS代码:*//*JS代码:*/// evanyou效果 var c = document.getElementById('evanyou'), x = c.getContext('2d'), pr = window.devicePixelRatio || 1, w = window.innerWidth, h = window.innerHeight, f = 90, q, m = Math, r = 0, u = m.PI * 2, v = m.cos, z = m.random; c.width = w * pr; c.height = h * pr; x.scale(pr, pr); x.globalAlpha = 0.6; function evanyou() { x.clearRect(0, 0, w, h) q = [{ x: 0, y: h * .7 + f }, { x: 0, y: h * .7 - f }] while (q[1].x < w + f) d(q[0], q[1]) } function d(i, j) { x.beginPath() x.moveTo(i.x, i.y) x.lineTo(j.x, j.y) var k = j.x + (z() * 2 - 0.25) * f, n = y(j.y) x.lineTo(k, n) x.closePath() r -= u / -50 x.fillStyle = '#' + (v(r) * 127 + 128 << 16 | v(r + u / 3) * 127 + 128 << 8 | v(r + u / 3 * 2) * 127 + 128).toString(16) x.fill() q[0] = q[1] q[1] = { x: k, y: n } } function y(p) { var t = p + (z() * 2 - 1.1) * f return (t > h || t < 0) ? y(p) : t } document.onclick = evanyou document.ontouchstart = evanyou evanyou();
View Code
2. 返回顶部特效（滚动条上移或者点击会自动隐藏和显示），效果如下:
image
//Html代码:body> 回到顶部 hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
//CSS样式#back-to-top { position:fixed; right:50px; z-index:9; width:70px; height:900px; background:url('/Content/Images/scroll.png'); transition:0.5s; cursor:pointer; }//JS部分:
View Code
3. 左下角探头效果
image
PS：这个图片在网页的左下角，鼠标移动上去探头效果，代码如下
//Html代码 
//CSS代码
View Code
4. 文字翻转效果（点击翻转，一开始加载页面也翻转）
image
代码如下：
//Html代码 //CSS代码 //Script部分 $(document).ready(function ($) { $(".typed a").typed({ strings: ["这里是地狱之门", "日月君地带"], typeSpeed: 30, backSpeed: 30, backDelay: 700 }); }); //PS：需要引入两个文件：一个是jquery-1.8.2.min.js文件，一个是//typed.min.js文件（PS：自定义的，下面会贴出来）
View Code
typed.min.js 代码:
!function (t) { "use strict"; var s = function (s, e) { this.el = t(s), this.options = t.extend({}, t.fn.typed.defaults, e), this.isInput = this.el.is("input"), this.attr = this.options.attr, this.showCursor = this.isInput ? !1 : this.options.showCursor, this.elContent = this.attr ? this.el.attr(this.attr) : this.el.text(), this.contentType = this.options.contentType, this.typeSpeed = this.options.typeSpeed, this.startDelay = this.options.startDelay, this.backSpeed = this.options.backSpeed, this.backDelay = this.options.backDelay, this.stringsElement = this.options.stringsElement, this.strings = this.options.strings, this.strPos = 0, this.arrayPos = 0, this.stopNum = 0, this.loop = this.options.loop, this.loopCount = this.options.loopCount, this.curLoop = 0, this.stop = !1, this.cursorChar = this.options.cursorChar, this.shuffle = this.options.shuffle, this.sequence = [], this.build() }; s.prototype = { constructor: s, init: function () { var t = this; t.timeout = setTimeout(function () { for (var s = 0; s < t.strings.length; ++s) t.sequence[s] = s; t.shuffle && (t.sequence = t.shuffleArray(t.sequence)), t.typewrite(t.strings[t.sequence[t.arrayPos]], t.strPos) }, t.startDelay) }, build: function () { var s = this; if (this.showCursor === !0 && (this.cursor = t('' + this.cursorChar + ""), this.el.after(this.cursor)), this.stringsElement) { s.strings = [], this.stringsElement.hide(); var e = this.stringsElement.find("p"); t.each(e, function (e, i) { s.strings.push(t(i).html()) }) } this.init() }, typewrite: function (t, s) { if (this.stop !== !0) { var e = Math.round(70 * Math.random()) + this.typeSpeed, i = this; i.timeout = setTimeout(function () { var e = 0, r = t.substr(s); if ("^" === r.charAt(0)) { var o = 1; /^\^\d+/.test(r) && (r = /\d+/.exec(r)[0], o += r.length, e = parseInt(r)), t = t.substring(0, s) + t.substring(s + o) } if ("html" === i.contentType) { var n = t.substr(s).charAt(0); if ("<" === n || "&" === n) { var a = "", h = ""; for (h = "<" === n ? ">" : ";"; t.substr(s).charAt(0) !== h;) a += t.substr(s).charAt(0), s++; s++, a += h } } i.timeout = setTimeout(function () { if (s === t.length) { if (i.options.onStringTyped(i.arrayPos), i.arrayPos === i.strings.length - 1 && (i.options.callback(), i.curLoop++, i.loop === !1 || i.curLoop === i.loopCount)) return; i.timeout = setTimeout(function () { i.backspace(t, s) }, i.backDelay) } else { 0 === s && i.options.preStringTyped(i.arrayPos); var e = t.substr(0, s + 1); i.attr ? i.el.attr(i.attr, e) : i.isInput ? i.el.val(e) : "html" === i.contentType ? i.el.html(e) : i.el.text(e), s++, i.typewrite(t, s) } }, e) }, e) } }, backspace: function (t, s) { if (this.stop !== !0) { var e = Math.round(70 * Math.random()) + this.backSpeed, i = this; i.timeout = setTimeout(function () { if ("html" === i.contentType && ">" === t.substr(s).charAt(0)) { for (var e = ""; "<" !== t.substr(s).charAt(0) ;) e -= t.substr(s).charAt(0), s--; s--, e += "<" } var r = t.substr(0, s); i.attr ? i.el.attr(i.attr, r) : i.isInput ? i.el.val(r) : "html" === i.contentType ? i.el.html(r) : i.el.text(r), s > i.stopNum ? (s--, i.backspace(t, s)) : s <= i.stopNum && (i.arrayPos++, i.arrayPos === i.strings.length ? (i.arrayPos = 0, i.shuffle && (i.sequence = i.shuffleArray(i.sequence)), i.init()) : i.typewrite(i.strings[i.sequence[i.arrayPos]], s)) }, e) } }, shuffleArray: function (t) { var s, e, i = t.length; if (i) for (; --i;) e = Math.floor(Math.random() * (i + 1)), s = t[e], t[e] = t[i], t[i] = s; return t }, reset: function () { var t = this; clearInterval(t.timeout); var s = this.el.attr("id"); this.el.after(''), this.el.remove(), "undefined" != typeof this.cursor && this.cursor.remove(), t.options.resetCallback() } }, t.fn.typed = function (e) { return this.each(function () { var i = t(this), r = i.data("typed"), o = "object" == typeof e && e; r || i.data("typed", r = new s(this, o)), "string" == typeof e && r[e]() }) }, t.fn.typed.defaults = { 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, shuffle: !1, backDelay: 500, loop: !1, loopCount: !1, showCursor: !0, cursorChar: "|", attr: null, contentType: "html", callback: function () { }, preStringTyped: function () { }, onStringTyped: function () { }, resetCallback: function () { } } }(window.jQuery);
View Code
5. 在离开网页时，触发事件（这里以改变标题为例）
image
注:这里鼠标移开时，同时改变网页 title 和 icon 图标，代码如下
//Head部分 IT发烧友，一个真正的技术交流群 //JS部分
View Code
6. 移入网页时改变鼠标的样式
image
PS:这个只要在样式里面设置即可，也就是移入时显示一张图片，代码如下：
//css如下所示
View Code
7. 文字向上滚动效果（PS：鼠标悬停停止滚动）
image
代码如下:
//HTML代码 我是滚动内容
你来抓我啊
嗖嗖嗖
2333333333333333333333333 //CSS代码:#demo{ overflow:hidden; height:200px; width:250px; border:1px solid #6699cc; font-size:14px; color:#336699; line-height:22px; text-align:left; padding:10px; }//JS代码:var demo=document.getElementById("demo"); var demo1=document.getElementById("demo1"); var demo2=document.getElementById("demo2"); var speed=30;//滚动速度值,值越大速度越慢 var nnn=200/demo1.offsetHeight; for(i=0;iView Code
8. 鼠标移入效果
image
PS：鼠标移入，使区域旋转变色
//Style样式//Html标签 - 11111111111111111
- 222222222222222
- 333333333333333
- 4444444444444444
//Script
9. 旋转星空，点击放烟花效果
image
实现代码:
//Html代码 //CSS代码 canvas { position: fixed; width: 100%; height: 100%; z-index: -1; }//引入JS
View Code
universe.js
var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'), w = canvas.width = window.innerWidth, h = canvas.height = window.innerHeight, hue = 217, stars = [], count = 0, maxStars = 1300;//星星数量var canvas2 = document.createElement('canvas'), ctx2 = canvas2.getContext('2d');canvas2.width = 100;canvas2.height = 100;var half = canvas2.width / 2, gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);gradient2.addColorStop(0.025, '#CCC');gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');gradient2.addColorStop(1, 'transparent');ctx2.fillStyle = gradient2;ctx2.beginPath();ctx2.arc(half, half, half, 0, Math.PI * 2);ctx2.fill();// End cachefunction random(min, max) { if (arguments.length < 2) { max = min; min = 0; } if (min > max) { var hold = max; max = min; min = hold; } return Math.floor(Math.random() * (max - min + 1)) + min;}function maxOrbit(x, y) { var max = Math.max(x, y), diameter = Math.round(Math.sqrt(max * max + max * max)); return diameter / 2; //星星移动范围，值越大范围越小，}var Star = function () { this.orbitRadius = random(maxOrbit(w, h)); this.radius = random(60, this.orbitRadius) / 8; //星星大小 this.orbitX = w / 2; this.orbitY = h / 2; this.timePassed = random(0, maxStars); this.speed = random(this.orbitRadius) / 50000; //星星移动速度 this.alpha = random(2, 10) / 10; count++; stars[count] = this;}Star.prototype.draw = function () { var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX, y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY, twinkle = random(10); if (twinkle === 1 && this.alpha > 0) { this.alpha -= 0.05; } else if (twinkle === 2 && this.alpha < 1) { this.alpha += 0.05; } ctx.globalAlpha = this.alpha; ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius); this.timePassed += this.speed;}for (var i = 0; i < maxStars; i++) { new Star();}function animation() { ctx.globalCompositeOperation = 'source-over'; ctx.globalAlpha = 0.5; //尾巴 ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)'; ctx.fillRect(0, 0, w, h) ctx.globalCompositeOperation = 'lighter'; for (var i = 1, l = stars.length; i < l; i++) { stars[i].draw(); canvas2.style.cssText = "display:none"; }; window.requestAnimationFrame(animation);}animation();
10. 点击弹出指定的内容
image
PS:点击弹出显示内容，过一会自动消失, 说白了也就是一个弹出内容插件，比 alert 好看些，代码如下
//Html代码//JS代码
利用上面的插件还可以实现 confirm 选择效果
image
实现代码：
layer.confirm('确定要删除?', { icon: 3, title: '提示' }, function () { alert("当然确定了~"); });