99精品国产高清一区二区麻豆 ,爆乳3把你榨干哦ova在线观看

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

CSS3和javascript中的transform

高洛峰

發(fā)布： 2016-11-30 16:23:03

原創(chuàng)

1967人瀏覽過

在javascript中，webkittransform 大概相當(dāng)于 transform 。transform 為標(biāo)準(zhǔn)，webkittransform 適用于webkit瀏覽器。js中的webkittransform在css對(duì)應(yīng)于-webkit-transform屬性。

在css中transform 屬性向元素應(yīng)用 2d 或 3d 轉(zhuǎn)換。該屬性允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜。

先看一段沒有移動(dòng)div的代碼：

<style>
        #hovertreetf {
            border: 1px solid red;
            width: 120px;
            height: 120px;
        }
    </style><div id="hovertreetf">這是一個(gè)div，沒有移動(dòng)。何問起</div>

登錄后復(fù)制

css中transform 屬性可以把div移動(dòng)。例如：

<style>
        #hovertreetf {
            border: 1px solid red;
            width: 120px;
            height: 120px;
            transform: translateX(100px);
        }
    </style><div id="hovertreetf">這是一個(gè)div，使用css屬性transform移動(dòng)。何問起</div>

登錄后復(fù)制

其中 transform:translateX(100px) 表示id為hovertreetf的div元素水平向右移動(dòng)100像素。?

也可以使用js操作transform屬性使div移動(dòng)，效果跟上面使用css的一樣。例如：

<style>
        #hovertreetf {
            border: 1px solid red;
            width: 120px;
            height: 120px;
        }
    </style><div id="hovertreetf">這是一個(gè)div，使用js操作transform移動(dòng)。何問起</div>
    <script>
        document.getElementById("hovertreetf").style.transform = "translateX(100px)";
    </script>

登錄后復(fù)制

上面說到WebkitTransform 大概相當(dāng)于 transform ，適用于Webkit瀏覽器。使用js操作WebkitTransform 也可以使div移動(dòng)。例如：

立即學(xué)習(xí)“Java免費(fèi)學(xué)習(xí)筆記（深入）”；

<style>
        #hovertreetf {
            border: 1px solid red;
            width: 120px;
            height: 120px;
        }
    </style><div id="hovertreetf">這是一個(gè)div，使用js操作WebkitTransform移動(dòng)。何問起</div>
    <script>
        document.getElementById("hovertreetf").style.WebkitTransform = "translateX(100px)";
    </script>

登錄后復(fù)制

WebkitTransform在css對(duì)應(yīng)于-webkit-transform屬性，例如：

<style>
        #hovertreetf {
            border: 1px solid red;
            width: 120px;
            height: 120px;
            -webkit-transform: translateX(100px);
        }
    </style><div id="hovertreetf">這是一個(gè)div，使用css屬性 -webkit-transform 移動(dòng)。何問起</div>

登錄后復(fù)制

如果只使用css設(shè)置transform，而js沒有設(shè)置，那么js獲取transform屬性值為空，例如：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>關(guān)于css設(shè)置transform然后用js獲取的代碼_何問起</title>
    <meta charset="utf-8" />
    <style>
        #hovertreetf {border: 1px solid red;width: 120px;height: 120px;transform: translateX(100px);}
        #hovertreereusult{border:1px solid green;min-height:40px;margin:5px 0px;}
    </style>
</head>
<body>
    <div id="hovertreetf">這是一個(gè)div，使用css屬性transform移動(dòng)。js獲取transform值為空。何問起</div>
    <div id="hovertreereusult"></div>
    <input type="button" value="獲取transform屬性值" id="hovertreeget" />
    <script>
        document.getElementById("hover"+"treeget").addEventListener("click", function () {

            var h_transformValue = document.getElementById("hovertreetf").style.transform;

            //如果獲取到的是空字符串，則修改為文字：空
            if (h_transformValue == "")
                h_transformValue = "空";

            document.getElementById("hovertreereusult").innerText = "上面div的transform屬性值為："+h_transformValue;
        })
    </script>
</body>
</html>
體驗(yàn)效果：http://hovertree.com/texiao/javascript/3/6.htm

如果先使用js設(shè)置了transform的值，則js可以獲取到所設(shè)置的值。例如：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>關(guān)于js設(shè)置transform然后用js獲取的代碼_何問起</title>
    <meta charset="utf-8" />
    <style>
        #hovertreetf {border: 1px solid red;width: 120px;height: 120px;}
        #hovertreereusult{border:1px solid green;min-height:40px;margin:5px 0px;}
    </style>
</head>
<body>
    <div id="hovertreetf">這是一個(gè)div，使用js設(shè)置transform使它移動(dòng)。js可獲取所設(shè)置的transform值。何問起</div>
    <div id="hovertreereusult"></div>
    <input type="button" value="獲取transform屬性值" id="hovertreeget" />
    <script>
        document.getElementById("hovertreetf").style.transform = "translateX(50px)";

        document.getElementById("hover"+"treeget").addEventListener("click", function () {
            var h_transformValue = document.getElementById("hovertreetf").style.transform;

            //如果獲取到的是空字符串，則修改為文字：空
            if (h_transformValue == "")
                h_transformValue = "空";

            document.getElementById("hovertreereusult").innerText = "上面div的transform屬性值為："+h_transformValue;
        })
    </script>
</body>
</html>

登錄后復(fù)制