js特效复习

来源:互联网 发布:海岛奇兵升级数据最新 编辑:程序博客网 时间:2024/06/04 20:04

迷失了本心,很多东西都不愿意去动手敲了,太懒了,但是有太累,自己已经不知道该做什么好:


走一步算一步吧,不太清除自己为什么这么差,又害怕,恐惧

1.offsetWidth:获取内容的宽度,包含了padding-left,padding-right,border#demo {            width: 300px;            border: 1px solid red;            padding: 10px;            margin:15px;        }offsetWidth=322;2.offsetHeight=content+pt+pb+2border3.offsetLeft:到body的长度4.offsetparent:父亲offset 可以得到但是并不能设置5.event.clientYevent.pageY(ie  x)光标相对于该网页的垂直位置event.screenY相对于屏幕;拖拽案例 var scrollBar = document.getElementById("scrollBar");    var bar  = scrollBar.children[0];    var mask = scrollBar.children[1];    var demo = document.getElementById("demo");    bar.onmousedown = function(event) {        var event = event || window.event;        var leftVal = event.clientX - this.offsetLeft;        var that = this;        document.onmousemove = function(event) {            var event = event || window.event;            that.style.left = event.clientX - leftVal  + 'px';            //alert(that.style.left);            var val = parseInt(that.style.left);            if(val < 0)            {                that.style.left = 0;            } else if(val > 390)            {                that.style.left = "390px";            }            mask.style.width = that.style.left;              //计算百分比            demo.innerHTML = "已经走了:"+ parseInt(parseInt(that.style.left) / 390 * 100) + "%";            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();        }        document.onmouseup = function() {            document.onmousemove = null;          }    }
原创粉丝点击