offset 自己的
目的: js中有一套方便的获取元素尺寸的办法就是offset家族;
div { width:220px; border-left:2px solid red; padding:10px;}
divoffsetWidth = 220 + 2 + 20
为什么不用 divstylewidth 因为东西 只能得到行内的数值
如果 父级 都没有定位则以body 为准
这里的父级指的是所上一级 不仅仅指的是 父亲 还可以是 爷爷 曾爷爷 曾曾爷爷。。。。
offsetParent返回该对象的父级 (带有定位) 不一定是亲的爸爸
前面学过一个返回父亲(亲的) parentNode 有所区别
如果当前元素的父级元素没有进行CSS定位(position为absolute或relative),offsetParent为body。
如果当前元素的父级元素中有CSS定位(position为absolute或relative),offsetParent取最近的那个父级元素。
1.最大区别在于 offsetLeft 可以返回没有定位盒子的距离左侧的位置。 而 styletop 不可以 只有定位的盒子 才有 left top right
2.offsetTop 返回的是数字,而 styletop 返回的是字符串,除了数字外还带有单位:px。
3.offsetTop 只读,而 styletop 可读写。
4.如果没有给 HTML 元素指定过 top 样式,则 styletop 返回的是空字符串。
5.最重要的区别 styleleft 只能得到 行内样式 offsetLeft 随便
我们学过一些事件 : onmouseover onmouseout onclick
event 单词翻译过来 事件 的意思
event 就是事件的对象 指向的是 事件 是 onclick
在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象,但支持的方式不同。
比如鼠标操作时候,会添加鼠标位置的相关信息到事件对象中。
普通浏览器支持 event
ie 678 支持 windowevent
是以我们的 电脑屏幕 为基准点 测量
以我们的 文档 (绝对定位) 的基准点 对齐
ie678 不认识
以 可视区域 为基准点 类似于 固定定位
onmouseover onmouseout onclick
onmousemove 当鼠标移动的时候 就是说,鼠标移动一像素就会执行的事件
divonmousemove = function() { 语句 }
当鼠标再div 身上移动的时候,就会执行。
他们相同点 都是 经过 div 才会触发
divonmouseover 只触发一次
divonmousemove 每移动一像素,就会触发一次
onmouseup 当鼠标弹起
onmousedown 当鼠标按下的时候
1拖动 原理 == 鼠标按下 接着 移动鼠标 。
baronmousedown = function(){
documentonmousemove = function(){
}
}
2当我们按下鼠标的时候,就要记录当前 鼠标 的位置 - 大盒子的位置
算出 bar 当前 在 大盒子内的距离 。
我们知道 按下鼠标然后拖拽可以选择文字 的。
清除选中的内容
offset 自己的 偏移
offsetWidth 得到自己的宽度
offsetHeight
构成 : width + padding + border
div width 200 border 3px padding-right: 15px
div offsetWidth = 200 + 6 + 15 = 221
◆ offsetLeft 和 offsetTop
divoffsetLeft
得到距离 这个 div 最近的 带有定位的 父 盒子 左边距离
◆ offsetParent 返回自己的父亲元素 (带有定位的)
parentNode 这个返回亲父亲 不管父亲是否带有定位
◆ styletop 和 offsetTop
offsetTop 只读 只可以得到结果 但是不能赋值
styletop 能得到 (行内式 ) 但是可以给值
styletop 得到的是 25px
offsetTop 得到的是 25
◆ 事件对象 event
divonclick = function(event) { } event 是点击的事件对象
event 集合点击事件的相关信息
pageX 文档的 参考点
clientX 可视区域
ScreenX 屏幕
◆ 常用事件
onmouseover 经过
onmouseout 离开
onmousemove 鼠标移动
var num = 0;
divonmouseover = function() { num++; consolelog(num))} 1
divonmousemove = function() { num++; consolelog(num))}
onmousedown 按下鼠标
onmouseup 弹起鼠标
拖拽: 先按下鼠标 然后 移动鼠标
baronmousedown = funtion() {
documentonmousemove = function() {}
}
最大 window 对象 document对象
今日案例:筋斗云、点击跟随鼠标、放大镜案例素材获取
链接: http://panbaiducom/s/1jINmiOI
密码:homu如果用html做动画
用js动态修改css样式属性来动态改变页面元素的状态。达到动的效果
采用html5新增加的<canvas>来当画布,用js的画图函数来将画出来。而且更能随意修改这个张图。举例
总之建议,使用html5的方法
/ $(function(){ //canvas加载$("input")click(function(){
var cans=$("#myCanvas")get(0)getContext("2d") ;
var imgs=new Image();
imgssrc="psujpg";
cansdrawImage(imgs,0,0);
});
}) ;
1、彼岸花、开
2、~醉态萌生
3、小可爱1号
4、爱的卍封印
5、脸红派つ
6、天然痴呆萌
7、夏日⊕樱花
8、果果、优酸乳
9、乖乖囡
10、飞天小仙女
11、醋溜仙女肉
12、秋意阑珊
13、不要太可爱^^
14、=W=草莓欧尼¤
15、甜味橙子
16、向日葵
17、青柠少女
18、午後の夏天
19、可爱一如往常
20、小新的蜡笔
21、冬日暖阳
用js来获取原跳转地址
获取window 内部的参数
//获取来源url:ref
var ref = '';
if (documentreferrerlength > 0) {
ref = documentreferrer;
}
try {
if (reflength == 0 && openerlocationhreflength > 0) {
ref = openerlocationhref;
}
} catch (e) {}
当前页面地址:windowlocationhref
欢迎分享,转载请注明来源:表白网
评论列表(0条)