竹笋

注册

 

发新话题 回复该主题

js交互开发高级基本内容第二十二节j [复制链接]

1#

一、元素偏移量offset系列

offset含义:offset的含义是偏移量,使用offset的相关属性可以动态地获取该元素的位置、大小等。

获取鼠标位置:鼠标指针在盒子内的坐标位置示意图分析。

divid="box"/div

script

varbox=document.getElementById(box);

console.log(box.offsetWidth);//打印盒子的宽度

console.log(box.offsetHeight);//打印盒子的高度

box.onmousemove=function(e){

…(省略计算鼠标在盒子内的坐标)

};

/script

offset与style的区别

放大镜效果

!--图片预览区域--

divclass="preview_img"

!--图片--

imgsrc="phone.png"alt=""

!--放大镜--

divclass="mask"/div

...(省略大图片结构)

/div

style

...(省略图片预览区)

/*放大镜*/

.mask{

display:none;width:px;height:px;

 background-color:red;opacity:0.5;position:absolute;

}

...(省略大图片外部区域样式代码)

/style

script

//获取元素对象

varmask=document.querySelector(.mask);

varpreview=document.querySelector(.preview_img);

varbig=document.querySelector(.big);

varbigIMg=document.querySelector(.bigIMg);

...(省略了事件逻辑代码)

/script

分享 转发
TOP
发新话题 回复该主题