Community Learn Tools Library Leisure
search
English
jquery - css3 scale 缩放图片问题
伊谢尔伦
伊谢尔伦 2017-04-17 11:33:07
0
3
633

我想点击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伐。

reply all(3)
阿神
阿神2017-04-17 11:35:07 3 floor

Method 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>

Method 2: 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>

Method 3: Pure 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>
Like +0
Add Reply
小葫芦
小葫芦2017-04-17 11:35:07 2 floor

Your picture is a bitmap, and it will definitely be distorted when enlarged. You need to use a vector image. You can also achieve this with css3, but you need to use a higher version of the browser. But the picture will still be distorted.

Like +0
Add Reply
黄舟
黄舟2017-04-17 11:35:07 1 floor

You will definitely get distortion if you only zoom in by x. . If it’s blurry, you need to use vector

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template