点击按钮层动态变小

来源：互联网发布：甘特图软件编辑：程序博客网时间：2024/05/06 06:54

window.onload = function () {

document.getElementById('btn').onclick = function () {

var dvObj = document.getElementById('dv');

                dvObj.style.overflow = 'hidden';
                var h = dvObj.offsetHeight;
                var setId = setInterval(function () {
                    h = h - 20;
                    if (h <= 0) {
                        //计时器清除
                        clearInterval(setId);
                        //层隐藏
                        dvObj.style.display = 'none';

                    } else {
                        dvObj.style.height = h + 'px';
                    }

                }, 10);
            };
        };
<input type="button" name="name" value="层变小" id="btn" />
    <div id="dv" style="width: 300px; height: 400px; border: 1px solid red;">
        <input type="button" name="name" value="按钮" />
        <input type="text" name="name" value="" />
</div>
让图片飞：
window.onload = function () {
            document.onmousemove = function () {
                //alert('fff');
                var imObj = document.getElementById('im');
                imObj.style.position = 'absolute';
                imObj.style.left = window.event.clientX+'px';
                imObj.style.top = window.event.clientY+'px';
            }
        }
<img id="im" src="aa.jpg" alt="Alternate Text" />

0 0