yzc261亚洲城官网备用地址图片旋转放大居中

( yzc261亚洲城官网备用地址 )

屏幕中间有一个宽高未知的图片,点击旋转或放大按钮时,如何让图片始终在屏幕中间?
ps:代码如下,为什么还是不能居中,这有什么问题么?

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style>
        *{padding:0; margin:0;}
        html,body{height:100%; position: relative;}
        img{border:0; vertical-align: middle;}
        #box{ position:absolute;} 
    </style>
    <script src="js/jquery-1.8.0.min.js"></script>
    <script>
        $document.readyfunction{
            var width =,
                height = ,
                src=images/123.jpg;
            $#boxImg.attrsrc,src;
            var img = new Image;
            img.src = src;
            img.onload = function{
                width = img.width;
                height = img.height;
            };

            $#box.css{
                width:width+px,
                height:height+px,
                marginLeft:-width/2+px,
                marginTop:-height/2+px,
                top:50+%,
                left:50+%
            };
        };
     </script>
</head>
<body>
    <div id="box">
        <img id="boxImg" src="" alt="">
    </div>
</body>
</html>

css3 translate配合position absolute

以前postion:absolute + 50% + 负margin的方式一样适用
只不过有css3可以把负margin改为translate-50%,-50%

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <style>
    body,html{
        height:100%;
    }
    #test{
        position:absolute;
        top: 50%;
        left: 50%;
        transform: translate-50%,-50%;
    }
    #myimg{
        background-color:#f00;
        transform: scale1.5;
    }
    </style>
</head>
<body>
    <div id="test">
        <div style="width:300px;height:200px" id="myimg">
    </div>
</body>
</html>

动画,矩阵变换…改变中心点

(看完/读完)这篇文章有何感想! yzc261亚洲城官网备用地址的分享…

发表评论

电子邮件地址不会被公开。 必填项已用*标注