社区 学习 工具库 休闲
搜索
简体中文
jquery - css3 scale 缩放图片问题
伊谢尔伦
伊谢尔伦 2017-04-17 11:33:07
0
3
598

我想点击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>
伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

全部回复(3)
阿神
阿神2017-04-17 11:35:07 3 楼

方法一：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>
点赞 +0
添加回复
小葫芦
小葫芦2017-04-17 11:35:07 2 楼

你的图片是位图，放大肯定会失真,你要用矢量图。你用css3也可以实现，要用高版本的浏览器。但是图片照样会失真。

点赞 +0
添加回复
黄舟
黄舟2017-04-17 11:35:07 1 楼

你只放大x肯定失真。。模糊的话需要用矢量的

点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板