jquery - css3 scale 縮放圖片問題
問題描述
我想點(diǎn)擊document讓p的圖片從中心點(diǎn)向兩邊展開一張圖片的大小用了css3的縮放，但是他會(huì)把圖片弄失真，問下用css3能否實(shí)現(xiàn)
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Document</title> <style>p { width:1px; background:url(http://www.ppt123.net/beijing/UploadFiles_8374/201203/2012032518062306.jpg); background-size:cover; height:600px; margin:100px auto; -webkit-transform-origin:left top; -moz-transform-origin:left top; -o-transform-origin:left top; -ms-transform-origin:left top; transform-origin:left top; -webkit-transition:1s; -moz-transition:1s; -o-transition:1s;} </style></head><body> <p class='outter'></p> <script src='http://cdn.bootcss.com/jquery/2.2.1/jquery.js'></script> <script>$(function() { $(document).on(’click’,function(){ $(’p’).css({ ’-webkit-transform’:’scaleX(800)’,’transform’:’scaleX(800)’ }) })}); </script></body></html>
問題解答
回答1：方法一：js<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Document</title> <style>p { width:0; height:0;position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: 50% 50%;background:url(http://www.ppt123.net/beijing/UploadFiles_8374/201203/2012032518062306.jpg); background-size:cover;} </style></head><body> <p class='outter'></p> <script src='http://cdn.bootcss.com/jquery/2.2.1/jquery.js'></script> <script>$(function() { $(document).on(’click’,function(){ $(’p’).stop(true).animate({ width: 800, height: 600 }) })}); </script></body></html>方法二：scale
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Document</title> <style>p { width: 800px; height: 600px; margin: 100px auto 0; transform: scale(0); transform-origin: 50% 50%; transition: transform .4s ease-in-out; background:url(http://www.ppt123.net/beijing/UploadFiles_8374/201203/2012032518062306.jpg); background-size:cover;} </style></head><body> <p class='outter'></p> <script src='http://cdn.bootcss.com/jquery/2.2.1/jquery.js'></script> <script>$(function() { $(document).on(’click’,function(){ $(’p’).css({ 'transform': 'scale(1)' }) })}); </script></body></html>方法三：純CSS
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Document</title> <style>.outter { width: 800px; height: 600px; margin: 100px auto 0; background-color: gray;}.inner { width: 800px; height: 600px; transform: scale(0); transform-origin: 50% 50%; transition: transform .4s ease-in-out; background:url(http://www.ppt123.net/beijing/UploadFiles_8374/201203/2012032518062306.jpg); background-size:cover;}.outter:hover .inner { transform: scale(1);} </style></head><body> <p class='outter'><p class='inner'></p> </p></body></html>回答2：
你的圖片是位圖，放大肯定會(huì)失真,你要用矢量圖。你用css3也可以實(shí)現(xiàn)，要用高版本的瀏覽器。但是圖片照樣會(huì)失真。
回答3：你只放大x肯定失真。。模糊的話需要用矢量的
相關(guān)文章：
1. java - 部署web項(xiàng)目時(shí)無法省略項(xiàng)目名？2. mysql 5個(gè)left關(guān)鍵 然后再用搜索條件 幾千條數(shù)據(jù)就會(huì)卡，如何解決呢3. python - [已解決]flask QQ郵箱mail4. javascript - position fixed；設(shè)置了height 100 卻不是瀏覽器可視窗口的寬高，求大神釋疑。5. mysql - 在不允許改動(dòng)數(shù)據(jù)表的情況下，如何優(yōu)化以varchar格式存儲(chǔ)的時(shí)間的比較？6. javascript - vue-cli proxyTable怎么配置7. 主題切換問題，用過別人的webapp在后臺(tái)切換模板主題后手機(jī)端打開網(wǎng)頁就是切換到的主題了8. python3.x - git bash如何運(yùn)行.bat文件？9. html - eclipse 標(biāo)簽錯(cuò)誤10. java - 如何寫一個(gè)intellij-idea插件，實(shí)現(xiàn)編譯時(shí)修改源代碼的目的
網(wǎng)公網(wǎng)安備