|
一個(gè)簡(jiǎn)單的Pop-out
最后的例子是一個(gè)簡(jiǎn)單的使用了一些在WebKit中可用的視覺(jué)效果的彈出框，使用的CSS和JavaScript 代碼如下：
#box1 {
z-index: 100;
position:absolute;
top:5px; left:5px;
width:100px;
height:250px;
padding:5px;
-webkit-border-radius:10px;
border: 2px solid black;
background: #dddddd;
z-index: 200;
}
#slider {
z-index: 100;
position:absolute;
top:30px; left:5px;
height:200px;
width:90px;
padding-top:10px;
padding-left:15px;
-webkit-border-radius:10px;
border: 1px solid black;
background: #eeeeee;
-webkit-transition: -webkit-transform 0.5s ease-in;
}
<script>
function popout() {
document.getElementById('slider').style.webkitTransform = 'translate(105px,0)';
}
</script>
這里有個(gè)父級(jí)盒子，以及在它下面的一個(gè)滑動(dòng)盒子�；瑒�(dòng)盒子上的”transition”屬性定義動(dòng)作將花費(fèi)半分鐘，并使用一個(gè)”ease-in”時(shí)間特效。JavaScript 通過(guò)設(shè)置”transform”屬性到滑動(dòng)盒子，從而在用戶(hù)點(diǎn)擊一個(gè)鏈接時(shí)引發(fā)動(dòng)作。也就是說(shuō)，動(dòng)畫(huà)只是在用戶(hù)執(zhí)行一個(gè)像點(diǎn)擊彈出鏈接一樣的動(dòng)作之后才會(huì)運(yùn)行。
這個(gè)例子的HTML代碼如下：
<div id="slider">
Slider<br/>Content
</div>
<div id="box1">
<a href="javascript:popout();">Popout</a>
</div>
你可以嘗試這個(gè)例子，就像下面這樣：
截圖8. 滑動(dòng)盒子在彈出之前。
如果你在鏈接上點(diǎn)擊，那么這個(gè)滑動(dòng)元素就會(huì)很快的滑出。
截圖9. 滑出之后的滑出盒子
這些例子的絕大部分功能是由CSS實(shí)現(xiàn)的，只是有很少的JavaScript。
未來(lái)走向
當(dāng)談到在Safari和WebKit中用新的和獨(dú)特的方式使用CSS，這篇文章只是描述了一個(gè)可行性。有各種各樣的新的CSS特性可以用來(lái)創(chuàng)建獨(dú)特的、有視覺(jué)沖擊力的效果，你可以單獨(dú)的實(shí)現(xiàn)他們，也可以聯(lián)合使用！
題記：這篇文章來(lái)自于A(yíng)pple開(kāi)發(fā)者社區(qū)，專(zhuān)門(mén)介紹WebKit核心的瀏覽器的一些新的特性，其中最主要的是對(duì)CSS3的支持。如果你想開(kāi)發(fā)一些很酷的界面效果，我建議你使用WebKit核心的瀏覽器，因?yàn)槟壳皝?lái)說(shuō)，無(wú)論是Safari還是Chrome，都可謂是瀏覽器中的先鋒——對(duì)W3C的支持最好，JS引擎的效率最高，瀏覽器的執(zhí)行效率和反應(yīng)速度也是最快的。我們不能被落后的瀏覽器拖住了我們前進(jìn)的步伐，我們固然要考慮比較落后的瀏覽器，但是對(duì)于前端開(kāi)發(fā)人員來(lái)說(shuō)，進(jìn)步更重要。
譯文鏈接：http://www.qianduan.net/?p=6105
原文來(lái)自：http://developer.apple.com
本文鏈接：http://m.95time.cn/tech/web/2009/6491.asp 
出處：前端觀(guān)察
責(zé)任編輯：bluehearts
上一頁(yè) 用于WebKit的CSS訣竅 [3] 下一頁(yè)
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 4 頁(yè) 用于WebKit的CSS訣竅 [4]
