jQuery循环动画与获取组件尺寸的方法

2020-05-23 06:05:24易采站长站整理

    $(“#stop”).click(function() { 
        i++; 
        if (i % 2 != 0) 
            cycle(); 
        else 
            clearInterval(interval); 
    }); 
    $(“#show”).click(function() { 
        j++; 
        if (j % 2 != 0) { 
            var txt = “”; 
            txt += “<p align=”center”>高: ” + $(“#d_id”).height() + “px</br>”; 
            txt += “宽: ” + $(“#d_id”).width() + “px</p>”; 
            $(“#d_id”).html(txt); 
        } else { 
            var txt = “”; 
            $(“#d_id”).html(txt); 
        } 
    }); 
}) 
    </script> 
    </head> 
 
    <body> 
        <button id=”show”> 
            显示/隐藏方块尺寸 
        </button> 
        <button id=”stop”> 
            开始/停止动画的循环 
        </button> 
        <div id=”d_id” class=”d_class” 
            style=”width: 100px; height: 100px; background-color: #000; position: absolute; top: 50px; color: #FFF; left:50px;”></div> 
    </body> 
</html>

1、<body>部分
没有什么特别的,就是定义两个按钮在与一个图层。值得注意的是,在图层的style参数值中必须加入position:absolute一项,否则此图层无法在网页中随意移动

background-color是图层的背景颜色。color是图层中的字体颜色。