CSS3 支援了 translate 與 transform 之類的動態效果樣式,只要完成相關屬性的設定,並經由 JavaScript 動態設定,即可輕易的完成互動效果。考慮以下的範例,於其中黑色區塊按一下,此區塊會左右移動(IE瀏覽器不支援,請改用 Chrome 或是 Firfox)。
於畫面配置以下的內容,第二個 <div> 標籤背景設為 black 以方便測試,請特別注意其中設定了 transform 與 transition 樣式:
接下來撰寫以下的 JavaScript,其中調整 page 的 transform 樣式來達到切換的效果。
若是要同時支援 Firefox ,則分別設定 -moz-transform 、-moz-transition樣式即可。
於畫面配置以下的內容,第二個 <div> 標籤背景設為 black 以方便測試,請特別注意其中設定了 transform 與 transition 樣式:
<div style="…">
<div id="page" onclick="changeTStyle()" style="background: black;
color:white ;
width:230px;height:360px;
z-index: 100;
position: absolute;
padding:70px 0 0 70px;font-size:18pt;
-webkit-transform: translate(300px,0px);
-webkit-transition: -webkit-transform 500ms">
HTML5 CSS3
</div>
</div>
接下來撰寫以下的 JavaScript,其中調整 page 的 transform 樣式來達到切換的效果。
var s = true;
function changeTStyle() {
if(s)
document.getElementById('page').style.webkitTransform =
'translate(0px,0px)';
else
document.getElementById('page').style.webkitTransform =
'translate(300px,0px)';
s = !s;
}
若是要同時支援 Firefox ,則分別設定 -moz-transform 、-moz-transition樣式即可。
沒有留言:
張貼留言