1.evanyou 效果-綵帶的實現，效果如下

注：這個主要用的是 Canvas 畫布實現的，點選背景繪製新的圖形，程式碼如下： 

/*Html程式碼:*/<canvasid="evanyou" width="1920" height="934"></canvas>/*CSS程式碼:*/<styletype="text/css">#evanyou{      position:fixed;      width:100%;      height:100%;      left:0;      top:0;  }</style>/*JS程式碼:*///evanyou效果var c = document.getElementById(

View Code

 2. 返回頂部特效（滾動條上移或者點選會自動隱藏和顯示），效果如下:

//Html程式碼:body><!--回到頂部-->  <divid="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部分:  <scriptsrc="~/Scripts/jquery-1.8.2.min.js"></script>  <scripttype="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);returnfalse;              });          };//判斷位置控制 返回頂部的顯隱if ($(window).width() > 800) {//如果窗體的寬度大於800var 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);                  }elseif ($(window).scrollTop()<= 700 && backTo.css('top') !== '-900px') {                     backTo.css('top', '-900px');                  }              });          }//啟用          $.scrollto("#back-to-top", 800);      }  </script>

View Code

3. 左下角探頭效果

PS：這個圖片在網頁的左下角，滑鼠移動上去探頭效果，程式碼如下

//Html程式碼<divclass="xm">      <imgsrc="/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);      }.xmimg{width:50px;      }  </style>

View Code

4. 文字翻轉效果（點選翻轉，一開始載入頁面也翻轉）

程式碼如下：

//Html程式碼<headerclass="header-description">      <divid="site-header">          <h1>              <ahref="@Url.Action("JianJIe", "Home")" title="Anneke.cn">日月君地帶</a>          </h1>          <pclass="typed"><ahref="@Url.Action("JianJIe", "Home")" title="Anneke.cn">日月君地帶</a><spanclass="typed-cursor">|</span></p>      </div>  </header>//CSS程式碼 <styletype="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,"LantingheiSC","MicrosoftYaHei",sans-serif;font-size: 34px;text-shadow: 01px1px#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-headerh1 {display: none;          }#site-headera {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) { "usestrict"; 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('<spanclass="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" != typeofthis.cursor&& this.cursor.remove(), t.options.resetCallback() } }, t.fn.typed = function (e) { returnthis.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 whatyou 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>  <metaname="viewport"content="width=device-width" />  <title>IT發燒友，一個真正的技術交流群</title>  <linkrel="shortcuticon"href="/Content/Images/icon.png"></head>//JS部分  <scriptsrc="~/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="shortcuticon"]').attr('href', "/Content/Images/fail.ico");document.title = '(●—●)喔喲，崩潰啦！';                 clearTimeout(titleTime);              }else {                  $('[rel="shortcuticon"]').attr('href', "/Content/Images/icon.png");document.title = '(/≧▽≦/)咦！又好了！' +OriginTitile;                  titleTime =setTimeout(function () {document.title =OriginTitile;                  }, 2000);              }          });      }  </script>

View Code

6. 移入網頁時改變滑鼠的樣式

PS:這個只要在樣式裡面設定即可，也就是移入時顯示一張圖片，程式碼如下：

//css如下所示 <style>