‘壹’ 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瀹炵幇涓夐溃绔嬩綋镞嬭浆镞犻檺杞鎾锲惧姩鐢汇戦噷浼氩湪链绡囨枃绔犵殑锘虹涓婃敼杩涜疆鎾鏂瑰纺锛屽埗浣滀笉涓镙风殑镄勮疆鎾锲惧姩鐢汇