1.evanyou效果-彩带的实现，效果如下
注：这个主要用的是Canvas画布实现的，点击背景绘制新的图形，代码如下：
/*Html代码:*/
<canvas id="evanyou" width="" height=""></canvas>
/*CSS代码:*/
<style type="text/css">
#evanyou{
position:fixed;
width:%;
height:%;
left:;
top:;
}
</style> /*JS代码:*/
// evanyou效果
var c = document.getElementById('evanyou'),
x = c.getContext('2d'),
pr = window.devicePixelRatio || ,
w = window.innerWidth,
h = window.innerHeight,
f = ,
q,
m = Math,
r = ,
u = m.PI * ,
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(, , w, h)
q = [{ x: , y: h * . + f }, { x: , y: h * . - f }]
while (q[].x < w + f) d(q[], q[])
}
function d(i, j) {
x.beginPath()
x.moveTo(i.x, i.y)
x.lineTo(j.x, j.y)
var k = j.x + (z() * - 0.25) * f,
n = y(j.y)
x.lineTo(k, n)
x.closePath()
r -= u / -
x.fillStyle = '#' + (v(r) * + << | v(r + u / ) * + << | v(r + u / * ) * + ).toString()
x.fill()
q[] = q[]
q[] = { x: k, y: n }
}
function y(p) {
var t = p + (z() * - 1.1) * f
return (t > h || t < ) ? y(p) : t
}
document.onclick = evanyou
document.ontouchstart = evanyou
evanyou();
2.返回顶部特效（滚动条上移或者点击会自动隐藏和显示），效果如下:
使用到的图片：
代码如下:http://files.cnblogs.com/files/shuai7boy/scroll.gif
//Html代码:
body>
<!--回到顶部-->
<div id="back-to-top" class="red" data-scroll="body" style="top:-46px;color:red;">回到顶部 </div>
<!--撑开网页代码-->
<p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
<p>hello</p><p>hello</p><p>hello</p>
<p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
<p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
<p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
<!--以上是撑开网页代码-->
//CSS样式
#back-to-top {
position:fixed;
right:50px;
z-index:;
width:70px;
height:900px;
background:url('/Content/Images/scroll.png');
transition:.5s;
cursor:pointer;
}
//JS部分:
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
window.onload = function () {
// 利用 data-scroll 属性，滚动到任意 dom 元素
$.scrollto = function (scrolldom, scrolltime) {
$(scrolldom).click(function () {
var scrolltodom = $(this).attr("data-scroll");
$(this).addClass("active").siblings().removeClass("active");
$('html, body').animate({
scrollTop: $(scrolltodom).offset().top
}, scrolltime);
return false;
});
};
//判断位置控制 返回顶部的显隐
if ($(window).width() > ) {//如果窗体的宽度大于800
var backTo = $("#back-to-top");//获取back-to-top对象
var backHeight = $(window).height() - + 'px';//让window高度减980
$(window).scroll(function () {
if ($(window).scrollTop() > && backTo.css('top') === '-900px') {
backTo.css('top', backHeight);
}
else if ($(window).scrollTop() <= && backTo.css('top') !== '-900px') {
backTo.css('top', '-900px');
}
}); }
//启用
$.scrollto("#back-to-top", ); }
</script>
3.左下角探头效果
PS：这个图片在网页的左下角，鼠标移动上去探头效果，代码如下
//Html代码
<div class="xm">
<img src="/Content/Images/xiaomai.png" />
</div>
//CSS代码
<style>
.xm{
position:fixed;
bottom:;
left:;
z-index:;
font-size:;
transition:all .3s ease-in-out;
transform:translateY(3px);
}
.xm:hover{
-webkit-transform:translateY();
-ms-transform:translateY();
}
.xm img{
width:50px;
}
</style>
4. 文字翻转效果（点击翻转，一开始加载页面也翻转）
代码如下：
//Html代码
<header class="header-description">
<div id="site-header">
<h1>
<a href="@Url.Action("JianJIe", "Home")" title="Anneke.cn">日月君地带</a>
</h1>
<p class="typed"><a href="@Url.Action("JianJIe", "Home")" title="Anneke.cn">日月君地带</a><span class="typed-cursor">|</span></p>
</div>
</header>
//CSS代码
<style type="text/css">
#site-header {
font-size: 40px !important;
font-weight: ;
z-index: ;
text-align: center;
position: relative;
top: 180px;
font-family: kilsonburg,"Avenir Next",Helvetica,Arial,"Lantinghei SC","Microsoft YaHei",sans-serif;
font-size: 34px;
text-shadow: 1px 1px #47456d;
margin-bottom: 130px;
animation: show-site-title 1s ease-out;
-o-animation: show-site-title 1s ease-out;
-moz-animation: show-site-title 1s ease-out;
-webkit-animation: show-site-title 1s ease-out;
}
#site-header h1 {
display: none;
}
#site-header a {
color: #fff;
font-weight: ;
}
body {
background-color:#0094ff;
} </style> //Script部分
$(document).ready(function ($) {
$(".typed a").typed({
strings: ["这里是地狱之门", "日月君地带"],
typeSpeed: ,
backSpeed: ,
backDelay:
});
}); //PS：需要引入两个文件：一个是jquery-1.8.2.min.js文件，一个是
//typed.min.js文件（PS：自定义的，下面会贴出来）
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 ? ! : 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 = , this.arrayPos = , this.stopNum = , this.loop = this.options.loop, this.loopCount = this.options.loopCount, this.curLoop = , this.stop = !, 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 = ; 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 === ! && (this.cursor = t('<span class="typed-cursor">' + this.cursorChar + "</span>"), 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 !== !) { var e = Math.round( * Math.random()) + this.typeSpeed, i = this; i.timeout = setTimeout(function () { var e = , r = t.substr(s); if ("^" === r.charAt()) { var o = ; /^\^\d+/.test(r) && (r = /\d+/.exec(r)[], o += r.length, e = parseInt(r)), t = t.substring(, s) + t.substring(s + o) } if ("html" === i.contentType) { var n = t.substr(s).charAt(); if ("<" === n || "&" === n) { var a = "", h = ""; for (h = "<" === n ? ">" : ";"; t.substr(s).charAt() !== h;) a += t.substr(s).charAt(), s++; s++, a += h } } i.timeout = setTimeout(function () { if (s === t.length) { if (i.options.onStringTyped(i.arrayPos), i.arrayPos === i.strings.length - && (i.options.callback(), i.curLoop++, i.loop === ! || i.curLoop === i.loopCount)) return; i.timeout = setTimeout(function () { i.backspace(t, s) }, i.backDelay) } else { === s && i.options.preStringTyped(i.arrayPos); var e = t.substr(, s + ); 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 !== !) { var e = Math.round( * Math.random()) + this.backSpeed, i = this; i.timeout = setTimeout(function () { if ("html" === i.contentType && ">" === t.substr(s).charAt()) { for (var e = ""; "<" !== t.substr(s).charAt() ;) e -= t.substr(s).charAt(), s--; s--, e += "<" } var r = t.substr(, 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 = , 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 + )), 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('<span id="' + s + '"/>'), 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: , startDelay: , backSpeed: , shuffle: !, backDelay: , loop: !, loopCount: !, showCursor: !, cursorChar: "|", attr: null, contentType: "html", callback: function () { }, preStringTyped: function () { }, onStringTyped: function () { }, resetCallback: function () { } } }(window.jQuery);
5. 在离开网页时，触发事件（这里以改变标题为例）
注:这里鼠标移开时，同时改变网页title和icon图标，代码如下
//Head部分
<head>
<meta name="viewport" content="width=device-width" />
<title>IT发烧友，一个真正的技术交流群</title>
<link rel="shortcut icon" href="/Content/Images/icon.png">
</head>
//JS部分
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script>
window.onload = function () {
var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
$('[rel="shortcut icon"]').attr('href', "/Content/Images/fail.ico");
document.title = '(●—●)喔哟，崩溃啦！';
clearTimeout(titleTime);
}
else {
$('[rel="shortcut icon"]').attr('href', "/Content/Images/icon.png");
document.title = '(/≧▽≦/)咦！又好了！' + OriginTitile;
titleTime = setTimeout(function () {
document.title = OriginTitile;
}, );
}
});
}
</script>
6. 移入网页时改变鼠标的样式
PS:这个只要在样式里面设置即可，也就是移入时显示一张图片，代码如下：
//css如下所示
<style>
abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, html, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
margin: ;
padding: ;
cursor: url('/Content/Image/cursor.ico'),auto;
}
</style>
7. 文字向上滚动效果（PS：鼠标悬停停止滚动）
代码如下:
//HTML代码
<div align="center" id="demo">
<div id="demo1">
我是滚动内容<br/>
你来抓我啊<br/>
嗖嗖嗖<br/> </div>
<div id="demo2"></div>
</div>
//CSS代码:
#demo{
overflow:hidden;
height:200px;
width:250px;
border:1px solid #6699cc;
font-size:14px;
color:#;
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=;//滚动速度值,值越大速度越慢
var nnn=/demo1.offsetHeight;
for(i=;i<nnn;i++){demo1.innerHTML+="<br />"+ demo1.innerHTML}
demo2.innerHTML = demo1.innerHTML //克隆demo2为demo1
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=) //当滚动至demo1与demo2交界时
demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端
else{
demo.scrollTop++ //如果是横向的 将 所有的 height top 改成 width left
}
}
var MyMar = setInterval(Marquee,speed); //设置定时器
demo.onmouseover = function(){clearInterval(MyMar)} //鼠标经过时清除定时器达到滚动停止的目的
demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)} //鼠标移开时重设定时器
8.鼠标移入效果
PS：鼠标移入，使区域旋转变色
//Style样式
<link href="~/Content/amazeui.min.css" rel="stylesheet" />
<style type="text/css">
#XuanZhuan li{
width:200px;
height:50px;
background-color:pink;
margin-left:15px;
position:relative;
float:left;
list-style:none;
margin-top:15px;
}
div{
width:470px;
}
#XuanZhuan li:hover{
cursor:pointer;
}
</style>
//Html标签
<div>
<ul id="XuanZhuan">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
//Script
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
//在友情链接页面，鼠标放在li上,li旋转效果
$(function () {
$("#XuanZhuan li").hover(function () {
$(this).css("background-color", "yellow");
$(this).attr("class", "am-animation-spin");
}, function () {
$(this).css("background-color", "pink");
$(this).attr("class", "");
});
})
</script>
引入amazeui.min.css样式如下:
链接：http://pan.baidu.com/s/1qY1YinU 密码：tjox
9.旋转星空，点击放烟花效果
实现代码:
//Html代码
<div>
<canvas id="canvas"></canvas>
<canvas id="snow"></canvas> <div class="am-g" style="position: fixed; bottom: 0px;">
<div class="am-u-sm-12">
<div style="z-index: 9999" id="player" class="aplayer">
</div>
</div>
</div>
</div>
//CSS代码
canvas {
position: fixed;
width: %;
height: %;
z-index: -;
}
//引入JS
<script src="~/Content/assets/js/jquery.min.js"></script>
<script src="~/Scripts/Blog/universe.js"></script><!--旋转背景-->
<script src="~/Scripts/Blog/Fireworks.js"></script><!--点击放烟花-->
universe.js
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
w = canvas.width = window.innerWidth,
h = canvas.height = window.innerHeight,
hue = ,
stars = [],
count = ,
maxStars = ;//星星数量
var canvas2 = document.createElement('canvas'),
ctx2 = canvas2.getContext('2d');
canvas2.width = ;
canvas2.height = ;
var half = canvas2.width / ,
gradient2 = ctx2.createRadialGradient(half, half, , 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(, 'transparent');
ctx2.fillStyle = gradient2;
ctx2.beginPath();
ctx2.arc(half, half, half, , Math.PI * );
ctx2.fill();
// End cache
function random(min, max) {
if (arguments.length < ) {
max = min;
min = ;
}
if (min > max) {
var hold = max;
max = min;
min = hold;
}
return Math.floor(Math.random() * (max - min + )) + min;
}
function maxOrbit(x, y) {
var max = Math.max(x, y),
diameter = Math.round(Math.sqrt(max * max + max * max));
return diameter / ;
//星星移动范围，值越大范围越小，
}
var Star = function () {
this.orbitRadius = random(maxOrbit(w, h));
this.radius = random(, this.orbitRadius) / ;
//星星大小
this.orbitX = w / ;
this.orbitY = h / ;
this.timePassed = random(, maxStars);
this.speed = random(this.orbitRadius) / ;
//星星移动速度
this.alpha = random(, ) / ;
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();
if (twinkle === && this.alpha > ) {
this.alpha -= 0.05;
} else if (twinkle === && this.alpha < ) {
this.alpha += 0.05;
}
ctx.globalAlpha = this.alpha;
ctx.drawImage(canvas2, x - this.radius / , y - this.radius / , this.radius, this.radius);
this.timePassed += this.speed;
}
for (var i = ; i < maxStars; i++) {
new Star();
}
function animation() {
ctx.globalCompositeOperation = 'source-over';
ctx.globalAlpha = 0.5; //尾巴
ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';
ctx.fillRect(, , w, h)
ctx.globalCompositeOperation = 'lighter';
for (var i = , l = stars.length; i < l; i++) {
stars[i].draw();
canvas2.style.cssText = "display:none";
};
window.requestAnimationFrame(animation);
}
animation();
Fireworks.js
$(function () {
var Fireworks = function () {
var self = this;
var rand = function (rMi, rMa) { return ~~((Math.random() * (rMa - rMi + )) + rMi); }
var hitTest = function (x1, y1, w1, h1, x2, y2, w2, h2) { return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1); };
window.requestAnimFrame = function () { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (a) { window.setTimeout(a, 1E3 / ) } }();
self.init = function () {
self.canvas = document.createElement('canvas');
self.canvas.width = self.cw = $(window).innerWidth();
self.canvas.height = self.ch = $(window).innerHeight();
self.particles = [];
self.partCount = ;
self.fireworks = [];
self.mx = self.cw / ;
self.my = self.ch / ;
self.currentHue = ;
self.partSpeed = ;
self.partSpeedVariance = ;
self.partWind = ;
self.partFriction = ;
self.partGravity = ;
self.hueMin = ;
self.hueMax = ;
self.fworkSpeed = ;
self.fworkAccel = ;
self.hueVariance = ;
self.flickerDensity = ;
self.showShockwave = true;
self.showTarget = false;
self.clearAlpha = ;
$(document.body).append(self.canvas);
self.ctx = self.canvas.getContext('2d');
self.ctx.lineCap = 'round';
self.ctx.lineJoin = 'round';
self.lineWidth = ;
self.bindEvents();
self.canvasLoop();
self.canvas.onselectstart = function () {
return false;
};
};
self.createParticles = function (x, y, hue) {
var countdown = self.partCount;
while (countdown--) {
var newParticle = {
x: x,
y: y,
coordLast: [
{ x: x, y: y },
{ x: x, y: y },
{ x: x, y: y }
],
angle: rand(, ),
speed: rand(((self.partSpeed - self.partSpeedVariance) <= ) ? : self.partSpeed - self.partSpeedVariance, (self.partSpeed + self.partSpeedVariance)),
friction: - self.partFriction / ,
gravity: self.partGravity / ,
hue: rand(hue - self.hueVariance, hue + self.hueVariance),
brightness: rand(, ),
alpha: rand(, ) / ,
decay: rand(, ) / ,
wind: (rand(, self.partWind) - (self.partWind / )) / ,
lineWidth: self.lineWidth
};
self.particles.push(newParticle);
}
};
self.updateParticles = function () {
var i = self.particles.length;
while (i--) {
var p = self.particles[i];
var radians = p.angle * Math.PI / ;
var vx = Math.cos(radians) * p.speed;
var vy = Math.sin(radians) * p.speed;
p.speed *= p.friction;
p.coordLast[].x = p.coordLast[].x;
p.coordLast[].y = p.coordLast[].y;
p.coordLast[].x = p.coordLast[].x;
p.coordLast[].y = p.coordLast[].y;
p.coordLast[].x = p.x;
p.coordLast[].y = p.y;
p.x += vx;
p.y += vy;
p.y += p.gravity;
p.angle += p.wind;
p.alpha -= p.decay;
if (!hitTest(, , self.cw, self.ch, p.x - p.radius, p.y - p.radius, p.radius * , p.radius * ) || p.alpha < .) {
self.particles.splice(i, );
}
};
};
self.drawParticles = function () {
var i = self.particles.length;
while (i--) {
var p = self.particles[i];
var coordRand = (rand(, ) - );
self.ctx.beginPath();
self.ctx.moveTo(Math.round(p.coordLast[coordRand].x), Math.round(p.coordLast[coordRand].y));
self.ctx.lineTo(Math.round(p.x), Math.round(p.y));
self.ctx.closePath();
self.ctx.strokeStyle = 'hsla(' + p.hue + ', 100%, ' + p.brightness + '%, ' + p.alpha + ')';
self.ctx.stroke();
if (self.flickerDensity > ) {
var inverseDensity = - self.flickerDensity;
if (rand(, inverseDensity) === inverseDensity) {
self.ctx.beginPath();
self.ctx.arc(Math.round(p.x), Math.round(p.y), rand(p.lineWidth, p.lineWidth + ) / , , Math.PI * , false)
self.ctx.closePath();
var randAlpha = rand(, ) / ;
self.ctx.fillStyle = 'hsla(' + p.hue + ', 100%, ' + p.brightness + '%, ' + randAlpha + ')';
self.ctx.fill();
}
}
};
};
self.createFireworks = function (startX, startY, targetX, targetY) {
var newFirework = {
x: startX,
y: startY,
startX: startX,
startY: startY,
hitX: false,
hitY: false,
coordLast: [
{ x: startX, y: startY },
{ x: startX, y: startY },
{ x: startX, y: startY }
],
targetX: targetX,
targetY: targetY,
speed: self.fworkSpeed,
angle: Math.atan2(targetY - startY, targetX - startX),
shockwaveAngle: Math.atan2(targetY - startY, targetX - startX) + ( * (Math.PI / )),
acceleration: self.fworkAccel / ,
hue: self.currentHue,
brightness: rand(, ),
alpha: rand(, ) / ,
lineWidth: self.lineWidth
};
self.fireworks.push(newFirework);
};
self.updateFireworks = function () {
var i = self.fireworks.length;
while (i--) {
var f = self.fireworks[i];
self.ctx.lineWidth = f.lineWidth;
vx = Math.cos(f.angle) * f.speed,
vy = Math.sin(f.angle) * f.speed;
f.speed *= + f.acceleration;
f.coordLast[].x = f.coordLast[].x;
f.coordLast[].y = f.coordLast[].y;
f.coordLast[].x = f.coordLast[].x;
f.coordLast[].y = f.coordLast[].y;
f.coordLast[].x = f.x;
f.coordLast[].y = f.y;
if (f.startX >= f.targetX) {
if (f.x + vx <= f.targetX) {
f.x = f.targetX;
f.hitX = true;
} else {
f.x += vx;
}
} else {
if (f.x + vx >= f.targetX) {
f.x = f.targetX;
f.hitX = true;
} else {
f.x += vx;
}
}
if (f.startY >= f.targetY) {
if (f.y + vy <= f.targetY) {
f.y = f.targetY;
f.hitY = true;
} else {
f.y += vy;
}
} else {
if (f.y + vy >= f.targetY) {
f.y = f.targetY;
f.hitY = true;
} else {
f.y += vy;
}
}
if (f.hitX && f.hitY) {
self.createParticles(f.targetX, f.targetY, f.hue);
self.fireworks.splice(i, );
}
};
};
self.drawFireworks = function () {
var i = self.fireworks.length;
self.ctx.globalCompositeOperation = 'lighter';
while (i--) {
var f = self.fireworks[i];
self.ctx.lineWidth = f.lineWidth;
var coordRand = (rand(, ) - );
self.ctx.beginPath();
self.ctx.moveTo(Math.round(f.coordLast[coordRand].x), Math.round(f.coordLast[coordRand].y));
self.ctx.lineTo(Math.round(f.x), Math.round(f.y));
self.ctx.closePath();
self.ctx.strokeStyle = 'hsla(' + f.hue + ', 100%, ' + f.brightness + '%, ' + f.alpha + ')';
self.ctx.stroke();
if (self.showTarget) {
self.ctx.save();
self.ctx.beginPath();
self.ctx.arc(Math.round(f.targetX), Math.round(f.targetY), rand(, ), , Math.PI * , false)
self.ctx.closePath();
self.ctx.lineWidth = ;
self.ctx.stroke();
self.ctx.restore();
}
if (self.showShockwave) {
self.ctx.save();
self.ctx.translate(Math.round(f.x), Math.round(f.y));
self.ctx.rotate(f.shockwaveAngle);
self.ctx.beginPath();
self.ctx.arc(, , * (f.speed / ), , Math.PI, true);
self.ctx.strokeStyle = 'hsla(' + f.hue + ', 100%, ' + f.brightness + '%, ' + rand(, ) / + ')';
self.ctx.lineWidth = f.lineWidth;
self.ctx.stroke();
self.ctx.restore();
}
};
};
self.bindEvents = function () {
$(window).on('resize', function () {
clearTimeout(self.timeout);
self.timeout = setTimeout(function () {
self.canvas.width = self.cw = $(window).innerWidth();
self.canvas.height = self.ch = $(window).innerHeight();
self.ctx.lineCap = 'round';
self.ctx.lineJoin = 'round';
}, );
});
$(self.canvas).on('mousedown', function (e) {
self.mx = e.pageX - self.canvas.offsetLeft;
self.my = e.pageY - self.canvas.offsetTop;
self.currentHue = rand(self.hueMin, self.hueMax);
self.createFireworks(self.cw / , self.ch, self.mx, self.my);
$(self.canvas).on('mousemove.fireworks', function (e) {
self.mx = e.pageX - self.canvas.offsetLeft;
self.my = e.pageY - self.canvas.offsetTop;
self.currentHue = rand(self.hueMin, self.hueMax);
self.createFireworks(self.cw / , self.ch, self.mx, self.my);
});
});
$(self.canvas).on('mouseup', function (e) {
$(self.canvas).off('mousemove.fireworks');
});
}
self.clear = function () {
self.particles = [];
self.fireworks = [];
self.ctx.clearRect(, , self.cw, self.ch);
};
self.canvasLoop = function () {
requestAnimFrame(self.canvasLoop, self.canvas);
self.ctx.globalCompositeOperation = 'destination-out';
self.ctx.fillStyle = 'rgba(0,0,0,' + self.clearAlpha / + ')';
self.ctx.fillRect(, , self.cw, self.ch);
self.updateFireworks();
self.updateParticles();
self.drawFireworks();
self.drawParticles();
};
self.init();
}
var fworks = new Fireworks();
});
10.音乐播放组件-APlayer
PS：此插件由迅雷提供，实现如下:
//Html代码
<div id="player1" class="aplayer">
<pre class="aplayer-lrc-content">
[ti:断桥残雪]
[ar:Vae]
[al:断桥残雪（EP）]
[:01.90]Vae - 断桥残雪
[:05.16]词、曲 编曲：许嵩（Vae）
[:08.16]
[:24.99]寻不到花的折翼枯叶蝶
[:30.09]永远也看不见凋谢
[:36.90]江南夜色下的小桥屋檐
[:42.04]读不懂塞北的荒野
[:48.94]梅开时节因寂寞而缠绵
[:54.07]春归后又很快湮灭
[:01.21]独留我赏烟花飞满天
[:06.03]摇曳后就随风飘远
[:13.11]断桥是否下过雪
[:15.83]我望着湖面
[:18.77]水中寒月如雪
[:21.78]指尖轻点融解
[:24.81]断桥是否下过雪
[:27.69]又想起你的脸
[:30.66]若是无缘再见
[:33.75]白堤柳帘垂泪好几遍
[:03.83]寻不到花的折翼枯叶蝶
[:09.12]永远也看不见凋谢
[:15.84]江南夜色下的小桥屋檐
[:21.17]读不懂塞北的荒野
[:28.01]梅开时节因寂寞而缠绵
[:33.09]春归后又很快湮灭
[:39.79]独留我赏烟花飞满天
[:45.19]摇曳后就随风飘远
[:52.06]断桥是否下过雪
[:54.83]我望着湖面
[:57.80]水中寒月如雪
[:00.82]指尖轻点融解
[:03.85]断桥是否下过雪
[:06.83]又想起你的脸
[:09.90]若是无缘再见
[:12.74]白堤柳帘垂泪好几遍 <!-- ... -->
</pre>
</div>
//JS部分
<script type="text/javascript">
//初始化APlayer音乐播放器插件。
var ap = new APlayer({
element: document.getElementById('player1'),
narrow: false,
autoplay: false, //是否自动播放
showlrc: true, //是否显示歌词
theme: '#66B7FF', //主题颜色
music: {
title: '断桥残雪',
author: '许嵩大人',
url: '/Content/Music/许嵩 - 断桥残雪.mp3',
pic: '/Content/Music/dqcx.jpg',
}
});
ap.init();
</script>
//引入JS部分
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<link href="//cdn.bootcss.com/aplayer/1.4.8/APlayer.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/aplayer/1.4.8/APlayer.min.js"></script>
11.点击弹出指定的内容
PS:点击弹出显示内容，过一会自动消失,说白了也就是一个弹出内容插件，比alert好看些，代码如下
//Html代码
<input type="button" value="显示获取到的内容" id="btn1"/>
//JS代码
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/layer/layer.js"></script>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
layer.msg("我是弹出的内容");
});
})
</script>
layer.js引入链接：http://pan.baidu.com/s/1geTeA8F 密码：uabe
利用上面的插件还可以实现confirm选择效果
实现代码：
layer.confirm('确定要删除?', { icon: , title: '提示' }, function () {
alert("当然确定了~");
});
PS:上面的弹框点击后必须添加 layer.closeAll("dialog");才会关闭
12.天天飞鸟
上面这是个网页小游戏，在网页中引入简单的图片JS即可开始啦~
实现如下：
链接：http://pan.baidu.com/s/1o7V85oI 密码：qvu3