v閱讀目錄

• v1.0寫在前面
• v2.0統(tǒng)計(jì)圖
• v3.0圖片3D切換
• v4.0搖號
• v5.0轉(zhuǎn)盤抽獎(jiǎng)
• v6.0各種登陸加載
• v7.0Web版Win8

v博客前言

友情提示：所有特效效果均是GIF圖片演示(均有源碼下載)，所以這個(gè)博文可能加載的比較慢，請諒解。

凜冬將至(Winter Is Coming)，在上一篇博客凜冬將至，用幾款特效暖暖身得到了比較好的響應(yīng)，所以決定再出一篇分享特效的博客。

回到頂部

v1.0寫在前面

?

本文中所有給出的特效都是本人將一些需要引入的js或者css文件傳到local經(jīng)過測試以后展示給大家的。如果大家在調(diào)試的時(shí)候有問題可以隨時(shí)提出來。因?yàn)槊總€(gè)案例代碼都太多了，所以所有代碼都只給出部分主要代碼(便于大家在得到源碼之前，可以更好的讀懂特效)，當(dāng)然大家也可以根據(jù)右下方的導(dǎo)航欄直接看特效，在看了效果圖以后對某個(gè)特效有興趣，這里我會對應(yīng)的提供源碼下載地址。 回到頂部

v2.0統(tǒng)計(jì)圖

2.1.html代碼：?

<h1>統(tǒng)計(jì)圖</h1><table style="margin-left:auto;margin-right:auto;"><tr><td style="text-align:center;"><h3 style="margin-bottom:0px;">Example 1</h3><div id="chart1" style="width:540px;height:250px;padding:5px;"></div><div style="text-align:right;padding-right:5px;">Start delay: <input id="start" style="width:35px" value="0" />Steps: <input id="steps" style="width:25px" value="135" />Duration: <input id="duration" style="width:35px" value="3000" /> <i>ms</i>Direction: <select id="dir"><option value="right">Right</option><option value="left" selected>Left</option><option value="center">Center</option></select><button id="bnt1" type="button">Animate</button></div></td><td style="text-align:center;"><h3 style="margin-bottom:0px;">Example 2</h3><div id="chart2" style="width:540px;height:250px;padding:5px;"></div><button id="bnt2" type="button">Draw Evolution Line</button></td></tr></table>

2.2.js代碼：?

function pInit(arr){var x = [];x.push([arr[0][0], Math.max.apply(Math, arr.map(function(i) { return i[1];}))]);x.push([arr[0][0], null]);x.push([arr[0][0], Math.min.apply(Math, arr.map(function(i) { return i[1];}))]);for(var i = 0; i < arr.length; i++) {x.push([arr[i][0], null]);}data[serie].data = x;return $.plot(chart, data, g);}var d0 = data[serie];var oData = d0.data;var plot = pInit(oData);var isLines = (data[serie].lines)?true:false;var steps = (data[serie].animator && data[serie].animator.steps) || 135;var duration = (data[serie].animator && data[serie].animator.duration) || 1000;var start = (data[serie].animator && data[serie].animator.start) || 0;var dir = (data[serie].animator && data[serie].animator.direction) || "right";function stepData(){var Si = oData[0][0];var Fi = oData[oData.length-1][0];var Pas = (Fi-Si)/steps;var d2 = []; d2.push(oData[0]);var nPointPos = 1;lPoint = oData[0];nPoint = oData[nPointPos];for (var i = Si+Pas; i < Fi+Pas; i += Pas){if (i>Fi) {i=Fi;}$("#m2").html(i);while (i > nPoint[0]){lPoint = nPoint;nPoint = oData[nPointPos++];}if (i == nPoint[0]){d2.push([i,nPoint[1]]);lPoint = nPoint;nPoint = oData[nPointPos++];}else{var a = ((nPoint[1]-lPoint[1]) / ((nPoint[0]-lPoint[0])));curV = (a * i) + (lPoint[1] - (a * lPoint[0]));d2.push([i,curV]);}}return d2;}

2.3.代碼效果：?

2.4.源碼下載：?

https://github.com/toutouge/WebProject/tree/master/Cartogram 回到頂部

v3.0圖片3D切換

3.1.html代碼：?

<div id="te-wrapper" class="te-wrapper"> <div class="te-images"><img src="images/1.jpg"/><img src="images/2.jpg"/><img src="images/3.jpg"/><img src="images/4.jpg"/><img src="images/5.jpg"/></div><div class="te-cover"><img src="images/1.jpg"/></div><div class="te-transition"><div class="te-card"><div class="te-front"></div><div class="te-back"></div></div></div> </div>

3.2.css代碼：?

.te-card, .te-back, .te-front {width: 100%;height: 100%;position: absolute; }.te-card {-webkit-transform-style: preserve-3d; }.te-front, .te-back { -webkit-backface-visibility: hidden; }.te-back { -webkit-transform: rotate3d(1,0,0,-180deg); }

3.3.js代碼：?

showNext = function() {if( hasPerspective ) {if( $.inArray( type, wPerspective ) !== -1 ) {$teWrapper.addClass('te-perspective');}$teTransition.addClass('te-show');$teCover.addClass('te-hide');}updateImages();},updateImages = function() {var $back = $teTransition.find('div.te-back'),$front = $teTransition.find('div.te-front');( currentImg === imagesCount - 1 ) ? ( last_img = imagesCount - 1, currentImg = 0 ) : ( last_img = currentImg, ++currentImg );var $last_img = $teImages.eq( last_img ),$currentImg = $teImages.eq( currentImg );$front.empty().append('<img src="' + $last_img.attr('src') + '">');$back.empty().append('<img src="' + $currentImg.attr('src') + '">');$teCover.find('img').attr( 'src', $currentImg.attr('src') );};

3.4.代碼效果：?

3.5.源碼下載：?

https://github.com/toutouge/WebProject/tree/master/ImageTransitions 回到頂部

v4.0搖號

4.1.html代碼：?

<div><input type="button" id="start" value="搖一搖" /></div><!--111111111111是開始默認(rèn)的號碼--><div class="odometer">111111111</div>

4.2.css代碼：?

.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-car .odometer-digit .odometer-digit-inner {text-align: left;display: block;position: absolute;top: 0;left: 0;right: 0;bottom: 0;overflow: hidden; } .odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-car .odometer-digit .odometer-ribbon {display: block; } .odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-car .odometer-digit .odometer-ribbon-inner {display: block;-webkit-backface-visibility: hidden; } .odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-car .odometer-digit .odometer-value {display: block;-webkit-transform: translateZ(0); } .odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-car .odometer-digit .odometer-value.odometer-last-value {position: absolute; } .odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-car.odometer-animating-up .odometer-ribbon-inner {-webkit-transition: -webkit-transform 2s;-moz-transition: -moz-transform 2s;-ms-transition: -ms-transform 2s;-o-transition: -o-transform 2s;transition: transform 2s; }

4.3.js代碼：?

trigger = function(el, name) {var evt;if (document.createEvent != null) {evt = document.createEvent('HTMLEvents');evt.initEvent(name, true, true);return el.dispatchEvent(evt);}};now = function() {var _ref, _ref1;return (_ref = (_ref1 = window.performance) != null ? typeof _ref1.now === "function" ? _ref1.now() : void 0 : void 0) != null ? _ref : +(new Date);};round = function(val, precision) {if (precision == null) {precision = 0;}if (!precision) {return Math.round(val);}val *= Math.pow(10, precision);val += 0.5;val = Math.floor(val);return val /= Math.pow(10, precision);};

4.4.代碼效果：?

4.5.源碼下載：?

https://github.com/toutouge/WebProject/tree/master/Lottery 回到頂部

v5.0轉(zhuǎn)盤抽獎(jiǎng)

PS:這個(gè)有待改進(jìn)，暫時(shí)用不上，如果有用得上且改進(jìn)了的園友可以拿出來分享一下。

5.1.html代碼：?

<canvas id="canvas" width="500" height="500"></canvas>

5.2.js代碼：?

_rotate: function () {this._options.spinTime += 30;if (this._options.spinTime >= this._options.spinTimeTotal) {this.stop();return;}var spinAngle = this._options.spinAngleStart - easeOut(this._options.spinTime, 0, this._options.spinAngleStart, this._options.spinTimeTotal);this._options.currentAngle += (spinAngle * Math.PI / 180);this._draw();var widget = this;this._options.spinTimeout = setTimeout(function () {widget._rotate();}, 30);},is_rotating: function () {return this._options.rotating;},spin: function () {this._options.rotating = true;this._options.spinAngleStart = Math.random() * 100 + 5 * Math.random() + 5 * Math.random() + 2 * Math.random();this._options.spinTime = 0;this._options.spinTimeTotal = Math.random() * 3000 + 4 * 1000 + 2 * Math.random();this._rotate();},stop: function () {this._options.rotating = false;clearTimeout(this._options.spinTimeout);this._draw();var degrees = this._options.currentAngle * 180 / Math.PI + 90;var arcd = this._options.arc * 180 / Math.PI;var index = Math.floor((360 - degrees % 360) / arcd);var keys = Object.keys(this.options.items);var key = keys[index];this.options.selected(key, this.options.items[key]);}

5.3.代碼效果：?

5.4.源碼下載：?

https://github.com/toutouge/WebProject/tree/master/RouletteReward 回到頂部

v6.0各種登陸加載

6.1.html代碼：?

<form><label>Name</label><input type="text"><label>Email</label><input type="text"><label>Phone</label><input type="text"><button type="button" class="btn btn-primary" id="waitMe_ex">Submit</button></form><div class="controlContainer"><div>To start click Submit button</div>Effect<select id="waitMe_ex_effect"><option>none</option><option selected>bounce</option><option>rotateplane</option><option>stretch</option><option>orbit</option><option>roundBounce</option><option>win8</option><option>win8_linear</option><option>ios</option><option>facebook</option><option>rotation</option><option>timer</option><option>pulse</option><option>progressBar</option><option>bouncePulse</option><option>img</option></select><button class="btn" id="waitMe_ex_close">STOP</button></div>

6.2.css代碼：?

/* stretch */ .waitMe_container .waitMe_progress.stretch > div {width:1px;height:60px;margin:4px;animation:stretch 1.2s infinite ease-in-out} .waitMe_container .waitMe_progress.stretch .waitMe_progress_elem2 {animation-delay:-1.1s} .waitMe_container .waitMe_progress.stretch .waitMe_progress_elem3 {animation-delay:-1s} .waitMe_container .waitMe_progress.stretch .waitMe_progress_elem4 {animation-delay:-.9s} .waitMe_container .waitMe_progress.stretch .waitMe_progress_elem5 {animation-delay:-.8s} @keyframes stretch {0%, 40%, 100% {transform:scaleY(.4)}20% {transform:scaleY(1)} }/* orbit */ .waitMe_container .waitMe_progress.orbit {width:40px;height:40px;margin:auto;animation:orbit_rotate 2s infinite linear} .waitMe_container .waitMe_progress.orbit > div {width:50%;height:50%;border-radius:50%;top:0;position:absolute;animation:orbit 2s infinite ease-in-out} .waitMe_container .waitMe_progress.orbit .waitMe_progress_elem2 {top:auto;bottom:0;animation-delay:-1s} @keyframes orbit_rotate {100% {transform:rotate(360deg)} } @keyframes orbit {0%, 100% {transform:scale(0)}50% {transform:scale(1)} }

6.3.js代碼：?

function waitMeClose() {var currentID = elem.attr('data-waitme_id');elem.removeClass(elemClass + '_container').removeAttr('data-waitme_id');elem.find('.' + elemClass + '[data-waitme_id="' + currentID + '"]').remove();}if (methods[method]) {return methods[method].apply( this, Array.prototype.slice.call(arguments, 1));} else if (typeof method === 'object' || ! method) {return methods.init.apply(this, arguments);}$.event.special.destroyed = {remove: function(o) {if (o.handler) {o.handler();}}};

6.4.代碼效果：?

6.5.源碼下載：?

https://github.com/toutouge/WebProject/tree/master/waitme 回到頂部

v7.0Web版Win8

7.1.html代碼：?

<div class="s-page random-restored-page"><h2 class="page-title">Some minimized App</h2><div class="close-button s-close-button">x</div></div><div class="s-page custom-page"><h2 class="page-title">Thank You!</h2><div class="close-button s-close-button">x</div></div><div class="r-page random-r-page"><div class="page-content"><h2 class="page-title">App Screen</h2><p>$text</p></div><div class="close-button r-close-button">x</div></div>

7.2.css代碼：?

.slidePageInFromLeft {-webkit-animation: slidePageInFromLeft .8s cubic-bezier(.01,1,.22,.99) 1 0.25s normal forwards;-o-animation: slidePageInFromLeft .8s cubic-bezier(.01,1,.22,.99) 1 0.25s normal forwards;animation: slidePageInFromLeft .8s cubic-bezier(.01,1,.22,.99) 1 0.25s normal forwards }.openpage {-webkit-animation: rotatePageInFromRight 1s cubic-bezier(.66,.04,.36,1.03) 1 normal forwards;-o-animation: rotatePageInFromRight 1s cubic-bezier(.66,.04,.36,1.03) 1 normal forwards;animation: rotatePageInFromRight 1s cubic-bezier(.66,.04,.36,1.03) 1 normal forwards }.slidePageBackLeft {opacity: 1;left: 0;-webkit-animation: slidePageBackLeft .8s ease-out 1 normal forwards;-o-animation: slidePageBackLeft .8s ease-out 1 normal forwards;animation: slidePageBackLeft .8s ease-out 1 normal forwards }.slidePageLeft {opacity: 1;-webkit-transform: rotateY(0) translateZ(0);-ms-transform: rotateY(0) translateZ(0);-o-transform: rotateY(0) translateZ(0);transform: rotateY(0) translateZ(0);-webkit-animation: slidePageLeft .8s ease-out 1 normal forwards;-o-animation: slidePageLeft .8s ease-out 1 normal forwards;animation: slidePageLeft .8s ease-out 1 normal forwards }.fadeOutback {-webkit-animation: fadeOutBack 0.3s ease-out 1 normal forwards;-o-animation: fadeOutBack 0.3s ease-out 1 normal forwards;animation: fadeOutBack 0.3s ease-out 1 normal forwards }

7.3.js代碼：?

$('.tile').each(function(){var $this= $(this),page = $this.data('page-name'),bgcolor = $this.css('background-color'),textColor = $this.css('color');//if the tile rotates, we'll use the colors of the front faceif($this.hasClass('rotate3d')) {frontface = $this.find('.front');bgcolor = frontface.css('background-color');textColor = frontface.css('color');}//if the tile has an image and a caption, we'll use the caption stylesif($this.hasClass('fig-tile')) {caption = $this.find('figcaption');bgcolor = caption.css('background-color');textColor = caption.css('color');}$this.on('click',function(){$('.'+page).css({'background-color': bgcolor, 'color': textColor}).find('.close-button').css({'background-color': textColor, 'color': bgcolor});});});

7.4.代碼效果：?

7.5.源碼下載：?

https://github.com/toutouge/WebProject/tree/master/win8

作　　者：請叫我頭頭哥?
出　　處：http://www.cnblogs.com/toutou/?
關(guān)于作者：專注于微軟平臺的項(xiàng)目開發(fā)。如有問題或建議，請多多賜教！?
版權(quán)聲明：本文版權(quán)歸作者和博客園共有，歡迎轉(zhuǎn)載，但未經(jīng)作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接。?
特此聲明：所有評論和私信都會在第一時(shí)間回復(fù)。也歡迎園子的大大們指正錯(cuò)誤，共同進(jìn)步。或者直接私信我?
聲援博主：如果您覺得文章對您有幫助，可以點(diǎn)擊文章右下角【推薦】一下。您的鼓勵(lì)是作者堅(jiān)持原創(chuàng)和持續(xù)寫作的最大動(dòng)力

總結(jié)

以上是生活随笔為你收集整理的转。WEB前端特效。统计图，3D切换图片，摇号，转盘抽奖的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。