亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

愛折騰,求助?!

?function?next(){
????????????????var?curPage=document.getElementById("page"+curIndex);
????????????????curPage.style.webkitTransform="rotateX(-90deg)";
????????????????curIndex++;
????????????????var?nextPage?=?document.getElementById("page"+curIndex);
????????????????nextPage.style.webkitTransform="rotateX(0deg)";
????????}

折騰了一個下午了,還是不行。如果我想實現點擊next可以一直從頁碼6循環到頁碼1怎么寫代碼呢?

正在回答

1 回答

<html> ? ?

<head> ? ?

<title></title> ? ?

<style> ? ?

#my3dspace{ ? ?

-webkit-perspective: 800; ? ?

-webkit-perspective-origin: 50% 50%; ? ?

overflow:hidden; ? ?

} ? ?

#pagegroup{ ? ?

width:400px; ? ?

height:400px; ? ?

margin:0 auto; ? ?

-webkit-transform-style:preserve-3d; ? ?

position: relative; ? ?

} ? ?

.page{ ? ?

width:360px; ? ?

height:360px; ? ?

padding:20px; ? ?

background-color: black; ? ?

color:white; ? ?

font-weight:bold; ? ?

font-size:360px; ? ?

line-height:360px; ? ?

text-align:center; ? ?

position:absolute; ? ?

} ? ?

#page1{ ? ?

-webkit-transform-origin:bottom; ? ?

-webkit-transition: -webkit-transform 1s linear; ? ?

} ? ?

#page2,#page3,#page4,#page5,#page6{ ? ?

-webkit-transform-origin:bottom; ? ?

-webkit-transition: -webkit-transform 1s linear; ? ?

-webkit-transform: rotateX(90deg); ? ?

} ? ?

#op{ ? ?

text-align:center; ? ?

margin: 40px auto; ? ?

} ? ?

</style> ? ?

<script type="text/javascript"> ? ?

var curIndex = 1; ? ?

function next(){ ? ?

if( curIndex == 6 ) ? ?

return; ? ?

var curPage = document.getElementById("page"+curIndex); ? ?

curPage.style.webkitTransform = "rotateX(-90deg)"; ? ?

curIndex ++; ? ?

var nextPage = document.getElementById("page"+curIndex); ? ?

nextPage.style.webkitTransform = "rotateX(0deg)"; ? ?

} ? ?

function prev(){ ? ?

if( curIndex == 1 ) ? ?

return; ? ?

var curPage = document.getElementById("page"+curIndex); ? ?

curPage.style.webkitTransform = "rotateX(90deg)"; ? ?

curIndex --; ? ?

var prevPage = document.getElementById("page"+curIndex); ? ?

prevPage.style.webkitTransform = "rotateX(0deg)"; ? ?

} ? ?

</script> ? ?

</head> ? ?

<body> ? ?

<div id="my3dspace"> ? ?

<div id="pagegroup"> ? ?

<div class="page" id="page1">1</div> ? ?

<div class="page" id="page2">2</div> ? ?

<div class="page" id="page3">3</div> ? ?

<div class="page" id="page4">4</div> ? ?

<div class="page" id="page5">5</div> ? ?

<div class="page" id="page6">6</div> ? ?

</div> ? ?

</div> ? ?

<div id="op"> ? ?

<a href="javascript:next()">next</a>&nbsp;<a href="javascript:prev()">previous</a> ? ?

</div> ? ?

</body> ? ?

</html> ? ?


1 回復 有任何疑惑可以回復我~
#1

Yinsion_Nie

謝謝,雖然是老師講的動畫效果,但是我提前看到了,能夠全部理解應用到的知識,這對我幫助很大。
2016-11-12 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消

愛折騰,求助?!

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號