jquery - js向兩邊展開(kāi)
問(wèn)題描述
比如我有這樣一個(gè)p寬100高100我想點(diǎn)擊的是時(shí)候讓他的展示方式是從中間向兩邊展開(kāi)，css3要怎么寫(xiě)
問(wèn)題解答
回答1：<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Document</title> <style>.outter { position: relative; width: 202px; height: 400px;}.left,.right { position: absolute; top: 0; left: 0; display: inline-block; width: 100px; height: 400px; background-color: #000;}.right { left: inherit; right: 0;}.ani { animation: ani 5s; -moz-animation: ani 5s; /* Firefox */ -webkit-animation: ani 5s; /* Safari 和 Chrome */ -o-animation: ani 5s;}@keyframes ani { from {width: 100px; } to {width: 0; }} </style></head><body> <p class='outter'><p class='left inner'></p><p class='right inner'></p> </p> <script src='http://cdn.bootcss.com/jquery/2.2.1/jquery.js'></script> <script>$(function() { var inner = $(’.inner’); $(’.outter’).one(’click’, function() {inner.addClass(’ani’).on(’webkitAnimationEnd’, function() { inner.hide();}); }); }); </script></body></html>回答2：
作為初學(xué)者，看樓主提問(wèn)帶的標(biāo)簽里有JQ，就興致勃勃地寫(xiě)了一下。其實(shí)樓上的CSS3屬性真心很好啊！
<!DOCTYPE html><html><head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>兩邊展開(kāi)</title> <link rel='stylesheet' href='http://www.gepszalag.com/wenda/5947.html'> <style> .content {width: 100px;height: 100px;position: relative;overflow: hidden; }.content p {position: absolute;width: 49px;height: 100px; }.left {left: 0;background-color: black;margin-right: 2px; }.right {background-color: black;right: 0; } </style></head><body> <p class='content'><p class='left'></p><p class='right'></p> </p> <script src='http://www.gepszalag.com/wenda/js/jquery-1.12.0.min.js'></script> <script> $(function() {$('.content').click(function() { $('.left').animate({left: '-49px' }, 1000); $('.right').animate({right: '-49px' }, 1000)}) }) </script></body></html>回答3：
使用translateX(n)屬性，文檔看下面http://www.w3school.com.cn/css3/css3_2dtransform.asp
相關(guān)文章：
1. Python處理Dict生成json2. python2.7 - python 正則前瞻 后瞻 無(wú)法匹配到正確的內(nèi)容3. mysql - Sql union 操作4. （python)關(guān)于如何做到按win+R再輸入文件文件名就可以運(yùn)行？5. android - WebView加載天貓等購(gòu)物網(wǎng)頁(yè)出問(wèn)題？6. 急急急！！！求大神解答網(wǎng)站評(píng)論問(wèn)題，有大神幫幫小弟嗎7. python - 請(qǐng)問(wèn)這兩個(gè)地方是為什么呢？8. 想練支付寶對(duì)接和微信支付對(duì)接開(kāi)發(fā)（Java），好像個(gè)人不可以，怎么弄個(gè)企業(yè)的9. javascript - 按鈕鏈接到另一個(gè)網(wǎng)址 怎么通過(guò)百度統(tǒng)計(jì)計(jì)算按鈕的點(diǎn)擊數(shù)量10. 大家都用什么工具管理mysql數(shù)據(jù)庫(kù)？
網(wǎng)公網(wǎng)安備