灏佽缂撳姩鍔ㄧ敾3

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了灏佽缂撳姩鍔ㄧ敾3相关的知识，希望对你有一定的参考价值。

鏍囩锛?a href='http://www.mamicode.com/so/1/html' title='html'>html   getc   css   璁剧疆   buffer   瀹為獙   pad   宸﹀彸   pos   

鍓嶉潰涓ょ瘒閮芥槸鍋氫簡涓€浜涘叧浜庣紦鍔ㄥ姩鐢荤殑鍩虹锛岀幇鍦紝鍙互鍦ㄥ墠闈㈢殑鍩虹涓婄湡姝ｇ殑灏佽缂撳姩鍔ㄧ敾浜嗐€?/p>

鍗曞€间紶鍏?/h2> 
 $("btn").onclick = function () {
             clearInterval(timer);
            timer = setInterval(function () {   
                var speed = (target - box.offsetLeft) * 0.2;
                speed = Math.ceil(speed);
                box.style.left = box.offsetLeft + speed + "px";
                box.innerText = box.offsetLeft;
                if(box.offsetLeft === target){
                    clearInterval(timer);
                }
            }, 20);
        };

涓婇潰璐村嚭鏉ョ殑鏄垜浠墠闈㈠仛鐨勫疄楠岋紝鍥犱负鎴戜滑鏄鍏冪礌宸﹀彸绉诲姩锛屾敼鍙樼殑鏄厓绱犺窛绂诲乏杈硅竟妗嗙殑璺濈锛岄偅涔堬紝濡傛灉鎴戜滑闇€瑕佽鍏冪礌涓婁笅绉诲姩锛屽氨闇€瑕佹敼鍙樺厓绱犺窛绂讳笂杈规鐨勮窛绂伙紝濡傛灉瑕佹敼鍙樺厓绱犵殑澶у皬锛屽氨闇€瑕佹敼鍙樺厓绱犵殑瀹介珮锛屼篃灏辨槸璇达紝涓嶈兘浠呬粎渚濋潬浜庝笂闈㈢殑offsetLeft浜嗭紝鑰屾槸闇€瑕佹寜闇€鏀瑰彉灞炴€у悕绉板拰鍊硷紝杩欏氨闇€瑕佺敤鍒颁笂涓€绡囩殑鐭ヨ瘑浜嗐€?/p>

棣栧厛纭畾闇€瑕佹敼鍙樼殑灞炴€э紝骞惰幏鍙栧垵濮嬪€硷細

function getCSSAttrValue(obj, attr) {
    if(obj.currentStyle){ // IE 鍜?opera
        return obj.currentStyle[attr];
    }else {
        return window.getComputedStyle(obj, null)[attr];
    }

鍏舵瑕佹牴鎹?strong>style[attr]鍔ㄦ€佹敼鍙樿鍏冪礌鐨勫€硷紝璁╁厓绱犺繍鍔ㄨ捣鏉ャ€?/p>

鍥犳锛屾垜浠笂闈㈢殑鍑芥暟闇€瑕佺◢浣滀慨鏀癸細

function buffer(obj, attr, target) {
        //娓呴櫎瀹氭椂鍣?        clearInterval(obj.timer);

        //璁剧疆瀹氭椂鍣?        obj.timer = setInterval(function () {
            //鑾峰彇鍒濆鍊?            var begin = parseInt(getCSSAttrValue(obj, attr));
            console.log(begin);

            //姹傚嚭姝ラ暱
            var speed = (target - begin) * 0.2;
            // 鍒ゆ柇鏄惁鍚戜笂鍙栨暣
            speed = (target > begin) ? Math.ceil(speed) : Math.floor(speed);
            //鍔ㄨ捣鏉?            obj.style[attr] = begin + speed + "px";
            obj.innerText = begin;
            if(begin === target){
                clearInterval(obj.timer);
            }
        }, 20);
    }

杩樻槸涔嬪墠鐨勬晥鏋滐紝瀹炵幇鍚戝乏鍚戝彸杩愬姩锛屾垜浠氨鍙互杩欐牱鍐欎簡锛?/p> 

function $(id) {
    return typeof id === "string" ? document.getElementById(id) : null;
}
        var box = $("box");
        $("btn").onclick = function () {
            buffer(box, "left",  500);
        };

褰撶劧锛屼篃鍙互瀹炵幇鍏冪礌鐨勫ぇ灏忔敼鍙樹簡锛?/p> 

function $(id) {
    return typeof id === "string" ? document.getElementById(id) : null;
}
  var box = $("box");
$("btn1").onclick = function () {
            buffer(box, "width", 260);
        };

瀹屾暣浠ｇ爜濡備笅锛?/p>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        #box{
            width: 100px;
            height: 100px;
            background-color: red;

            position: absolute;
        }
    </style>
</head>
<body>
   <button id="btn">寰€鍙宠蛋</button>
   <button id="btn1">鍙樺ぇ</button>
   <div id="box"></div>
<script>

    window.onload = function () {

        // 0. 鍙橀噺
        var box = $("box");

        // 1. 鐩戝惉鎸夐挳鐨勭偣鍑?/span>
        $("btn").onclick = function () {
            buffer(box, "left",  500);
        };

        $("btn1").onclick = function () {
            buffer(box, "width", 260);
        };
    };


    function getCSSAttrValue(obj, attr) {
    if(obj.currentStyle){ // IE 鍜?opera
        return obj.currentStyle[attr];
    }else {
        return window.getComputedStyle(obj, null)[attr];
    }
}
function $(id) {
    return typeof id === "string" ? document.getElementById(id) : null;
}
    function buffer(obj, attr, target) {
        //娓呴櫎瀹氭椂鍣?/span>
        clearInterval(obj.timer);

        //璁剧疆瀹氭椂鍣?/span>
        obj.timer = setInterval(function () {
            //鑾峰彇鍒濆鍊?/span>
            var begin = parseInt(getCSSAttrValue(obj, attr));
            console.log(begin);

            //姹傚嚭姝ラ暱
            var speed = (target - begin) * 0.2;
            // 鍒ゆ柇鏄惁鍚戜笂鍙栨暣
            speed = (target > begin) ? Math.ceil(speed) : Math.floor(speed);
            //鍔ㄨ捣鏉?/span>
            obj.style[attr] = begin + speed + "px";
            obj.innerText = begin;
            if(begin === target){
                clearInterval(obj.timer);
            }
        }, 20);
    }
</script>
</body>
</html>

鎶€鏈垎浜浘鐗? src=

鎶€鏈垎浜浘鐗? src=

 

以上是关于灏佽缂撳姩鍔ㄧ敾3的主要内容，如果未能解决你的问题，请参考以下文章

canvas鍔ㄧ敾鍚堥泦Vue缁勪欢

jQuery 鍒ゆ柇鍔ㄧ敾杈圭晫

css3鐨勪竴浜涘皬鏂规硶

Atitit 娓告垙寮曟搸---鐗╃悊绯荤粺锛?)------鐖嗙偢鏁堟灉