html5酷炫网页 炫酷网页设计展示

1.evanyou效果-彩带的实现，效果如下

 

注：这个主要用的是Canvas画布实现的，点击背景绘制新的图形，代码如下： 

/*Html代码:*/
 <canvas id="evanyou" width="1920" height="934"></canvas>
/*CSS代码:*/
<style type="text/css">
    #evanyou{
        position:fixed;
        width:100%;
        height:100%;
        left:0;
        top:0;
    }
</style>

/*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.返回顶部特效（滚动条上移或者点击会自动隐藏和显示），效果如下:

 

使用到的图片：

代码如下:

//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:9;
             width:70px;
             height:900px;
             background:url('/Content/Images/scroll.png');
             transition:0.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) {//如果窗体的宽度大于800
                var backTo = $("#back-to-top");//获取back-to-top对象
                var backHeight = $(window).height() - 980 + 'px';//让window高度减980
                $(window).scroll(function () {
                    if ($(window).scrollTop() > 700 && backTo.css('top') === '-900px') {
                        backTo.css('top', backHeight);
                    }
                    else if ($(window).scrollTop() <= 700 && backTo.css('top') !== '-900px') {
                        backTo.css('top', '-900px');
                    }
                });

            }
            //启用
            $.scrollto("#back-to-top", 800);

        }
    </script>

View Code

3.左下角探头效果

PS：这个图片在网页的左下角，鼠标移动上去探头效果，代码如下

//Html代码
<div class="xm">
        <img src="/Content/Images/xiaomai.png" />
    </div>
//CSS代码
 <style>
        .xm{
            position:fixed;
            bottom:0;
            left:0;
            z-index:1;
            font-size:0;
            transition:all .3s ease-in-out;           
            transform:translateY(3px);           
        }
        .xm:hover{
            -webkit-transform:translateY(0);
            -ms-transform:translateY(0);
        }
        .xm img{
            width:50px;
        }
    </style>

View Code

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: 700;
            z-index: 1;
            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: 0 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: 400;
            }
        body {
            background-color:#0094ff;
        }

    </style>

//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('<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 !== !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('<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: 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. 在离开网页时，触发事件（这里以改变标题为例）

 

注:这里鼠标移开时，同时改变网页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;
                    }, 2000);
                }
            });
        }
    </script>

View Code

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: 0;
            padding: 0;
            cursor: url('/Content/Image/cursor.ico'),auto;
        }
    </style>

View Code

7. 文字向上滚动效果（PS：鼠标悬停停止滚动）

代码如下:

//HTML代码
<div align="center" id="demo">
            <div id="demo1">
            我是滚动内容<br/>
            你来抓我啊<br/>
            嗖嗖嗖<br/>
            2333333333333333333333333
            </div>
            <div id="demo2"></div>
        </div>    
//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;i<nnn;i++){demo1.innerHTML+="<br />"+ demo1.innerHTML}
demo2.innerHTML = demo1.innerHTML    //克隆demo2为demo1
function Marquee(){
    if(demo2.offsetTop-demo.scrollTop<=0)    //当滚动至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)}    //鼠标移开时重设定时器

View Code

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>
                11111111111111111
            </li>
            <li>
                222222222222222
            </li>
           <li>
               333333333333333
           </li>
            <li>
              4444444444444444
            </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>

View Code

 

引入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: 100%;
            height: 100%;
            z-index: -1;
        }
//引入JS
 <script src="~/Content/assets/js/jquery.min.js"></script>    
    <script src="~/Scripts/Blog/universe.js"></script><!--旋转背景-->
    <script src="~/Scripts/Blog/Fireworks.js"></script><!--点击放烟花-->

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 cache

function 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();

View Code

Fireworks.js

$(function () {
    var Fireworks = function () {
        var self = this;
        var rand = function (rMi, rMa) { return ~~((Math.random() * (rMa - rMi + 1)) + 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 / 60) } }();

        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 = 150;
            self.fireworks = [];
            self.mx = self.cw / 2;
            self.my = self.ch / 2;
            self.currentHue = 30;
            self.partSpeed = 5;
            self.partSpeedVariance = 10;
            self.partWind = 50;
            self.partFriction = 5;
            self.partGravity = 1;
            self.hueMin = 0;
            self.hueMax = 360;
            self.fworkSpeed = 4;
            self.fworkAccel = 10;
            self.hueVariance = 30;
            self.flickerDensity = 25;
            self.showShockwave = true;
            self.showTarget = false;
            self.clearAlpha = 25;

            $(document.body).append(self.canvas);
            self.ctx = self.canvas.getContext('2d');
            self.ctx.lineCap = 'round';
            self.ctx.lineJoin = 'round';
            self.lineWidth = 1;
            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(0, 360),
                    speed: rand(((self.partSpeed - self.partSpeedVariance) <= 0) ? 1 : self.partSpeed - self.partSpeedVariance, (self.partSpeed + self.partSpeedVariance)),
                    friction: 1 - self.partFriction / 100,
                    gravity: self.partGravity / 2,
                    hue: rand(hue - self.hueVariance, hue + self.hueVariance),
                    brightness: rand(50, 80),
                    alpha: rand(40, 100) / 100,
                    decay: rand(10, 50) / 1000,
                    wind: (rand(0, self.partWind) - (self.partWind / 2)) / 25,
                    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 / 180;
                var vx = Math.cos(radians) * p.speed;
                var vy = Math.sin(radians) * p.speed;
                p.speed *= p.friction;

                p.coordLast[2].x = p.coordLast[1].x;
                p.coordLast[2].y = p.coordLast[1].y;
                p.coordLast[1].x = p.coordLast[0].x;
                p.coordLast[1].y = p.coordLast[0].y;
                p.coordLast[0].x = p.x;
                p.coordLast[0].y = p.y;

                p.x += vx;
                p.y += vy;
                p.y += p.gravity;

                p.angle += p.wind;
                p.alpha -= p.decay;

                if (!hitTest(0, 0, self.cw, self.ch, p.x - p.radius, p.y - p.radius, p.radius * 2, p.radius * 2) || p.alpha < .05) {
                    self.particles.splice(i, 1);
                }
            };
        };

        self.drawParticles = function () {
            var i = self.particles.length;
            while (i--) {
                var p = self.particles[i];

                var coordRand = (rand(1, 3) - 1);
                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 > 0) {
                    var inverseDensity = 50 - self.flickerDensity;
                    if (rand(0, inverseDensity) === inverseDensity) {
                        self.ctx.beginPath();
                        self.ctx.arc(Math.round(p.x), Math.round(p.y), rand(p.lineWidth, p.lineWidth + 3) / 2, 0, Math.PI * 2, false)
                        self.ctx.closePath();
                        var randAlpha = rand(50, 100) / 100;
                        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) + (90 * (Math.PI / 180)),
                acceleration: self.fworkAccel / 100,
                hue: self.currentHue,
                brightness: rand(50, 80),
                alpha: rand(50, 100) / 100,
                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 *= 1 + f.acceleration;
                f.coordLast[2].x = f.coordLast[1].x;
                f.coordLast[2].y = f.coordLast[1].y;
                f.coordLast[1].x = f.coordLast[0].x;
                f.coordLast[1].y = f.coordLast[0].y;
                f.coordLast[0].x = f.x;
                f.coordLast[0].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, 1);

                }
            };
        };

        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(1, 3) - 1);
                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(1, 8), 0, Math.PI * 2, false)
                    self.ctx.closePath();
                    self.ctx.lineWidth = 1;
                    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(0, 0, 1 * (f.speed / 5), 0, Math.PI, true);
                    self.ctx.strokeStyle = 'hsla(' + f.hue + ', 100%, ' + f.brightness + '%, ' + rand(25, 60) / 100 + ')';
                    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';
                }, 100);
            });

            $(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 / 2, 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 / 2, 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(0, 0, 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 / 100 + ')';
            self.ctx.fillRect(0, 0, self.cw, self.ch);
            self.updateFireworks();
            self.updateParticles();
            self.drawFireworks();
            self.drawParticles();

        };

        self.init();

    }
    var fworks = new Fireworks();

});

View Code

10.音乐播放组件-APlayer 

   

PS：此插件由迅雷提供，实现如下:

//Html代码
 <div id="player1" class="aplayer">
            <pre class="aplayer-lrc-content">
                                  [ti:断桥残雪]
[ar:Vae]
[al:断桥残雪（EP）]
[00:01.90]Vae - 断桥残雪
[00:05.16]词、曲 编曲：许嵩（Vae）
[00:08.16]
[00:24.99]寻不到花的折翼枯叶蝶
[00:30.09]永远也看不见凋谢
[00:36.90]江南夜色下的小桥屋檐
[00:42.04]读不懂塞北的荒野
[00:48.94]梅开时节因寂寞而缠绵
[00:54.07]春归后又很快湮灭
[01:01.21]独留我赏烟花飞满天
[01:06.03]摇曳后就随风飘远
[01:13.11]断桥是否下过雪
[01:15.83]我望着湖面
[01:18.77]水中寒月如雪
[01:21.78]指尖轻点融解
[01:24.81]断桥是否下过雪
[01:27.69]又想起你的脸
[01:30.66]若是无缘再见
[01:33.75]白堤柳帘垂泪好几遍
[02:03.83]寻不到花的折翼枯叶蝶
[02:09.12]永远也看不见凋谢
[02:15.84]江南夜色下的小桥屋檐
[02:21.17]读不懂塞北的荒野
[02:28.01]梅开时节因寂寞而缠绵
[02:33.09]春归后又很快湮灭
[02:39.79]独留我赏烟花飞满天
[02:45.19]摇曳后就随风飘远
[02:52.06]断桥是否下过雪
[02:54.83]我望着湖面
[02:57.80]水中寒月如雪
[03:00.82]指尖轻点融解
[03:03.85]断桥是否下过雪
[03:06.83]又想起你的脸
[03:09.90]若是无缘再见
[03: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>

View Code

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>

View Code

layer.js引入链接：http://pan.baidu.com/s/1geTeA8F 密码：uabe

利用上面的插件还可以实现confirm选择效果

实现代码：

layer.confirm('确定要删除?', { icon: 3, title: '提示' }, function () {
                    alert("当然确定了~");
                    
                });

View Code

PS:上面的弹框点击后必须添加 layer.closeAll("dialog");才会关闭

12.天天飞鸟 

上面这是个网页小游戏，在网页中引入简单的图片JS即可开始啦~

实现如下：

链接：http://pan.baidu.com/s/1o7V85oI 密码：qvu3

 

百闻不如一见，百见不如一做，只有做了，才知道问题出现在哪儿，才能去解决问题。