『壹』 css濡備綍瀹炵幇鏃犻檺杞鎾鍥懼姩鐢伙紙浠ｇ爜紺轟緥錛
鏈綃囨枃絝犵粰澶у跺甫鏉ョ殑鍐呭規槸濡備綍瀹炵幇鑷鍔ㄦ棤闄愭挱鏀劇殑杞鎾鍥懼姩鐢繪晥鏋滐紝鏈変竴瀹氱殑鍙傝冧環鍊礆紝鏈夐渶瑕佺殑鏈嬪弸鍙浠ュ弬鑰冧竴涓嬶紝甯屾湜瀵逛綘浠鏈夋墍甯鍔┿
鍦ㄤ箣鍓嶇殑鏂囩珷銆恈ss濡備綍瀹炵幇鍥劇墖鐨勬棆杞灞曠ず鏁堟灉銆戜腑浠嬬粛浜嗘墜鍔ㄦ棤闄愯疆鎾鍥劇殑鍒朵綔錛屾湰綃囨垜浠鏉ョ湅鐪嬭嚜鍔ㄦ棤闄愯疆鎾鍥懼姩鐢葷殑鍒朵綔銆備笅闈㈡垜浠灝辨潵鐪嬬湅鍔ㄧ敾鏁堟灉鏄濡備綍瀹炵幇鐨勩
1銆佽劇疆鍔ㄧ敾鐨勮垶鍙
HTML涓庝箣鍓嶆枃絝犻噷鐨勭ず渚嬮潪甯哥浉浼箋傛垜浠瑕佹湁涓涓鍔ㄧ敾鍙戠敓鐨勮垶鍙幫紙#stage錛夛紝涓涓灝嗕細鏃嬭漿鐨刣iv瀹瑰櫒鍜屼竴緋誨垪鍥懼儚錛
<div id="stage">
<div id="rotator" style="-webkit-animation-name: rotator;">
<a href="1.jpg"><img src="1.jpg" width="140"></a>
<a href="2.jpg"><img src="2.jpg" width="140"></a>
<a href="3.jpg"><img src="3.jpg" width="140"></a>
<a href="4.jpg"><img src="4.jpg" width="140"></a>
<a href="5.jpg"><img src="5.jpg" width="140"></a>
<a href="6.jpg"><img src="6.jpg" width="140"></a>
<a href="7.jpg"><img src="7.jpg" width="140"></a>
<a href="8.jpg"><img src="8.jpg" width="140"></a>
</div>
</div>鍐呰仈鏍峰紡灞炴у紩鐢ㄤ笅闈㈢殑鍔ㄧ敾 @keyframes銆傚畠闇瑕佸唴鑱旇屼笉鏄疌SS錛屼互渚挎垜浠鑳藉熶嬌鐢↗avaScript鍋滄㈠拰閲嶆柊鍚鍔ㄥ姩鐢匯
2銆佸湪3D絀洪棿涓甯冪疆鐓х墖
CSS鏍峰紡鐢ㄤ簬瀹氫綅澶氬紶鐓х墖錛岄栧厛鍥寸粫y杞存棆杞瀹冧滑錛堝瀭鐩村悜涓婄炕欏碉級錛岀劧鍚庡緞鍚戝悜澶栧鉤縐伙細
#stage {
margin: 2em auto 1em 50%;
height: 140px;
-webkit-perspective: 1200px;
-webkit-perspective-origin: 0 50%;
}
#rotator a {
position: absolute;
left: -81px;
}
#rotator a img {
padding: 10px;
border: 1px solid #ccc;
background: #fff;
-webkit-backface-visibility: hidden;
}
#rotator a:nth-of-type(1) img {
-webkit-transform: rotateY(-90deg) translateZ(300px);
}
#rotator a:nth-of-type(2) img {
-webkit-transform: rotateY(-60deg) translateZ(300px);
}
#rotator a:nth-of-type(3) img {
-webkit-transform: rotateY(-30deg) translateZ(300px);
}
#rotator a:nth-of-type(4) img {
-webkit-transform: translateZ(300px);
background: #000;
}
#rotator a:nth-of-type(5) img {
-webkit-transform: rotateY(30deg) translateZ(300px);
}
#rotator a:nth-of-type(6) img {
-webkit-transform: rotateY(60deg) translateZ(300px);
}
#rotator a:nth-of-type(n+7) { display: none; }鐓х墖璁劇疆-81px鐨勫間唬琛ㄥ悜宸︾Щ鍔錛屼嬌鍓嶅悜鐓х墖鍦ㄦ棆杞杞翠笂灞呬腑銆傝窛紱繪槸鍥懼儚瀹藉害鐨勪竴鍗婏紙140px / 2錛夊姞涓奓HS鍥懼儚濉鍏咃紙10px錛夊拰杈規嗭紙1px錛夈
璇ラ樁孌甸渶瑕佽劇疆絝嬩綋鐨勫姩鐢伙紝鑸炲彴浠庨〉闈㈢殑涓蹇冨紑濮嬶紝鍥犳ゆ棆杞 鍏冪礌涓嬬殑閿氬厓緔犻渶瑕佸悜鍚庣Щ鍔ㄤ互浣垮姩鐢誨眳涓銆
鎴戜滑鍙寮濮嬪噯澶囧叚寮犵収鐗囷紝 宸﹁竟涓夊紶錛屼腑闂翠竴寮狅紝鍙寵竟涓ゅ紶銆傛渶宸︿晶鐨勭収鐗囷紙浣嶇疆1錛変粠宸︿晶寮濮嬶紝鍥犳や粎鍦ㄧ涓嬈℃棆杞鍚庢墠鍙瑙併
褰撶収鐗囨棆杞鏃訛紝瀹冧細娑堝け錛堟樉紺猴細鏃狅級錛屽苟涓旀柊鐓х墖浼氶檮鍔犲埌宸︿晶錛屽噯澶囦粠浣嶇疆1鏃嬭漿銆傚湪7鍜屾洿楂樼殑浣嶇疆鍙浠ユ湁浠繪剰鏁伴噺鐨勭収鐗囥傚彧鏈夊綋瀹冧滑縐誨姩鍒板彲瑙佷綅緗鏃訛紝瀹冧滑鎵嶄細鍑虹幇銆
鐢氳嚦鍙浠ュ湪鍔ㄧ敾榪涜屾椂浣跨敤Ajax鍔犺澆鏂扮収鐗囥
3銆佹坊鍔犲姩鐢繪晥鏋
姝ｅ傛垜浠涔嬪墠灝濊瘯鐨勯偅鏍鳳紝涓嶆槸灝嗙収鐗囪疆鏃嬭漿鏁存暣360搴︼紝鑰屾槸鎴戜滑瀹為檯鍋氱殑鍙鏄鏃嬭漿30搴 錛堣凍浠ヤ粠涓寮犵収鐗囧埌涓嬩竴寮犵収鐗囷級錛
@-webkit-keyframes rotator {
from { -webkit-transform: rotateY(0deg); }
to { -webkit-transform: rotateY(30deg); }
}
#rotator {
-webkit-transform-origin: 0 0;
-webkit-transform-style: preserve-3d;
-webkit-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
-webkit-animation-ration: 1s;
-webkit-animation-delay: 1s;
}
#rotator:hover {
-webkit-animation-play-state: paused;
}瑕佷嬌鍏抽敭甯у湪鍏朵粬嫻忚堝櫒涓宸ヤ綔錛岃峰嶅埗鎵鏈夋牱寮忥紝鏇挎崲-webkit- with -moz-鍜-ms-錛屽備笅闈㈢殑紺轟緥浠ｇ爜鍧楁墍紺恆
鍔ㄧ敾瀹屾垚鍚庯紝瀹冧細瑙﹀彂涓涓狫avaScript浜嬩歡錛屾偍鍙浠ュ湪涓嬩竴鑺備腑闃呰昏ヤ簨浠躲備簨浠跺勭悊紼嬪簭娌跨潃鐓х墖縐誨姩錛屼互渚垮湪鍔ㄧ敾閲嶇疆鏃訛紝鑰屼笉鏄鍥炲埌鍒濆嬬姸鎬侊紝鐓х墖閮藉洿緇曞渾鍦堢Щ鍔ㄤ簡涓姝ャ
涓轟簡鏇存竻妤氬湴浜嗚В姝ｅ湪鍙戠敓鐨勪簨鎯咃紝涓蹇冪収鐗囧凡鍦ㄤ笅闈㈢殑婕旂ず涓紿佸嚭鏄劇ず銆傚湪鍔ㄧ敾鍙戠敓鏃訛紝鎮ㄥ皢鐪嬪埌紿佸嚭鏄劇ず鐨勮妭鐐規棆杞錛岀劧鍚庨噸緗鍥炶搗濮嬩綅緗錛屼絾鍖呭惈涓嶅悓鐨勭収鐗囥
4銆 JavaScript娣誨姞鍔ㄧ敾鎺у埗鍣
鎴戜滑鍦ㄦょず渚嬩腑闇瑕丣avaScript鏉ユ嫻嬪姩鐢諱綍鏃剁粨鏉燂紝浠ヤ究鍗忚皟閫氳繃杞﹁疆閲嶇疆縐誨姩鐨勭収鐗囥傛病鏈夎繖涓錛岃疆瀛愬彧浼氬湪鍓嶄袱寮犵収鐗囦箣闂翠氦鏇垮嚭鐜般
document.addEventListener("DOMContentLoaded", function() {
var rotateComplete = function() {
target.style.webkitAnimationName = "";
target.insertBefore(arr[arr.length-1], arr[0]);
setTimeout(function(el) {
el.style.webkitAnimationName = "rotator";
}, 0, target);
};
var target = document.getElementById("rotator");
var arr = target.getElementsByTagName("a");
target.addEventListener("webkitAnimationEnd", rotateComplete, false);
}, false);瀵逛簬姣忎釜WebKit鏍峰紡鍜屽叾浠栧紩鐢錛屽瓨鍦‵irefox錛-moz-鎴朚oz錛夛紝Opera錛-o-鎴朞錛夛紝鐢氳嚦Internet Explorer錛-ms-鎴杕s錛夌殑鏇誇唬鍝 - 鎴戜滑蹇呴』蹇嶅彈鐨勬販涔辯洿鍒版爣鍑嗘渶緇堢『瀹氥
瑕佸湪Safari錛孋hrome錛孎irefox錛孫pera鍜孖nternet Explorer 10涓浣跨敤姝ゅ姛鑳斤紝鎴戜滑闇瑕佸寘鍚浠ヤ笅棰濆栫殑璁劇疆錛
var rotateComplete = function() {
with(target.style) {
webkitAnimationName = MozAnimationName = msAnimationName = "";
}
target.insertBefore(arr[arr.length-1], arr[0]);
setTimeout(function(el) {
with(el.style) {
webkitAnimationName = MozAnimationName = msAnimationName = "rotator";
}
}, 0, target);
};
var target = document.getElementById("rotator");
var arr = target.getElementsByTagName("a");
target.addEventListener("webkitAnimationEnd", rotateComplete, false);
target.addEventListener("animationend", rotateComplete, false);
target.addEventListener("MSAnimationEnd", rotateComplete, false);鐩鍓嶅皻涓嶆竻妤氫負浣曢渶瑕乻etTimeout銆傛垜浠涓嶉渶瑕佸畠鏉ヨ劇疆寤惰繜錛屽洜涓轟嬌鐢–SS瀹屾垚錛屼絾娌℃湁setTimeout錛堢敋鑷0ms錛夊姩鐢繪棤娉曢噸鏂拌Е鍙戙
5銆佹晥鏋滃睍紺
榪欏彧鏄妯鍚戠殑杞鎾錛屽湪涔嬪悗鐨勬枃絝犮恈ss瀹炵幇涓夐潰絝嬩綋鏃嬭漿鏃犻檺杞鎾鍥懼姩鐢匯戦噷浼氬湪鏈綃囨枃絝犵殑鍩虹涓婃敼榪涜疆鎾鏂瑰紡錛屽埗浣滀笉涓鏍風殑鐨勮疆鎾鍥懼姩鐢匯