jquery - css3 scale 缩放图片问题
问题描述
我想点击document让p的图片从中心点向两边展开一张图片的大小用了css3的缩放,但是他会把图片弄失真,问下用css3能否实现
<!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:
你的图片是位图,放大肯定会失真,你要用矢量图。你用css3也可以实现,要用高版本的浏览器。但是图片照样会失真。
回答3:你只放大x肯定失真。。模糊的话需要用矢量的
相关文章:
1. docker images显示的镜像过多,狗眼被亮瞎了,怎么办?2. mac里的docker如何命令行开启呢?3. docker pull 错误?4. docker start -a dockername 老是卡住,什么情况?5. macos - mac下docker如何设置代理6. docker-compose 为何找不到配置文件?7. 在windows下安装docker Toolbox 启动Docker Quickstart Terminal 失败!8. nginx+uwsgi部署django,8000端口正常,80端口4049. mac连接阿里云docker集群,已经卡了2天了,求问?10. html5 - 移动端UC浏览器兼容问题