JS pc端网页特效
offset
offset常用的属性
- element.offsetTop() 返回元素上方到带有定位的父元素距离
- element.offsetLeft() 返回元素左边到带有定位的父元素距离
- element.offsetWidth() 返回元素的宽度
- element.offsetHeight() 返回元素的高度
- element.offsetParent() 返回该元素带有定位的父元素 如果父元素都没有定位就返回body
<div class="box1"></div>
<script>
var box = document.querySelector('.box1')
console.log(box.offsetTop);
console.log(box.offsetLeft);
console.log(box.offsetWidth);
console.log(box.offsetHeight);
console.log(box.offsetParent);
</script>
offset与style区别
<script>
var box = document.querySelector('.box1')
console.log(box.offsetWidth);
console.log(box.style.width);
</script>
案例
css代码
.box {
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
left: 100px;
top: 100px;
}
<div class="box"></div>
<script>
var box = document.querySelector('.box')
box.addEventListener('mousemove', function (e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
this.innerHTML = 'x坐标是' + x + 'y坐标是' + y;
})
</script>
效果图
JS pc端网页特效的更多相关文章
- PC端网页特效
元素偏移量offset系列 offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移),大小等 获得元素距离带有定位父元素的位置 获得元素自身的大小(宽度高度) ...
- offset 、 client 和 scroll - PC端网页特效
1.元素偏移量 offset 系列 1.1 offset 就是偏移量,使用 offset 系列相关属性可以 动态 得到该元素的位置(偏移).大小等. 注意: 1.获得元素距离带有定位父元素的位置 2 ...
- 【Javascript Demo】移动端访问PC端网页时跳转到对应的移动端网页
不想通过CSS自适应在PC端和移动端分别显示不同的样式,那么只能通过在移动端访问PC端网页时跳转到对应的移动端网页了,那么怎么跳转呢,网上也有很多文章说明,下面是本人测试有效的方式. 1.效果图 PC ...
- JS pc端和移动端共同实现复制到剪贴板功能实现
JS pc端和移动端实现复制到剪贴板功能实现 在网页上复制文本到剪切板,一般是使用JS+Flash结合的方法,网上有很多相关文章介绍.随着 HTML5 技术的发展,Flash 已经在很多场合不适用了, ...
- 网络爬虫中Fiddler抓取PC端网页数据包与手机端APP数据包
1 引言 在编写网络爬虫时,第一步(也是极为关键一步)就是对网络的请求(request)和回复(response)进行分析,寻找其中的规律,然后才能通过网络爬虫进行模拟.浏览器大多也自带有调试工具可以 ...
- Java SpringMVC实现PC端网页微信扫码支付完整版
一:前期微信支付扫盲知识 前提条件是已经有申请了微信支付功能的公众号,然后我们需要得到公众号APPID和微信商户号,这个分别在微信公众号和微信支付商家平台上面可以发现.其实在你申请成功支付功能之后,微 ...
- 自适应PC端网页制作使用REM
做一个PC端的网页,设计图是1920X1080的. 要在常见屏上显示正常(比例正确可) 1280X720 1366X768 1440X900 1920X1080 使用了几种办法 1.内容在一屏内显示的 ...
- PC端网页的基本构成
首先,一个前端最基本的就是排网页,有人会看不起拍页面,认为不就是排一个页面嘛,有啥的,分分钟的事,可是他不知道的是,一个网页中也包含了很多内容,像我们如果不理解margin,padding,会经常对我 ...
- pc端网页,移动端网页(andorid、ios)离开页面做一个时间存储
如图所示:在一个页面中做了一个倒计时,然后用户想离开页面做其他事情,需求是离开页面之后把时间保存,下一次进来继续的时候时间还是上次离开的时间 第一次我用的事件是: // window.onbefor ...
随机推荐
- Configurate vim tool
vim tool is a commom editor, for the sake of improving effeicient, it is necessary to configurate vi ...
- spring security简单登录的认证
一.思路 1.先导入相关配置(使用spring security校验之后,登录拦截的配置) 2.创建一个 WebSecurityConfig 继承 WebSecurityConfigurerAdapt ...
- toad for oracle 小技巧
在SQL*LOADER 工具上(或者称为SQLLDR,读为:“sequel loader”),因为它仍然是装载数据的主要方法,SQLLDR 能够在极短的时间内装 载庞大数量的数据. 我也是初使用,理解 ...
- Ethical Hacking - GAINING ACCESS(10)
CLIENT SIDE ATTACKS Use if server-side attacks fail. If IP is probably useless. Require user interac ...
- Python Ethical Hacking - KEYLOGGER(1)
A program that records keys pressed on the keyboard. Common features: Store logs locally(local keylo ...
- 技术干货:Ceph搭建硬件建议详解
Ceph是专为在商品硬件上运行而设计的,这使得构建和维护超大规模的数据集群在经济上是可行的.当规划出你的集群硬件时,你需要平衡一些考虑因素,包括故障域和潜在的性能问题.硬件规划应该包括将Ceph守护进 ...
- C++语法小记---类型检测
类型检测 C++使用typeid关键字进行类型检查 不同的编译器使用typeid返回的类型名称不严格一致,需要特别注意 也可以使用虚函数,返回各自的类型名 如果typeid的操作数不是类类型(类指针也 ...
- linux日志朔源分析记录
lastlog 记录用户最后一次登录情况 只有root最近登录过 lastlog -u 用户名或者uid uid 直接在passwd文件中的低三位可以看到 lastb 记录用户用户登录失败的用户记录, ...
- 面试题六十:n个骰子的点数
把n个骰子扔在地上,求出现和为s的概率 可得n<=s<=6n 方法:定义6n-n+1长度的数组,然后对所有可能出现的组合进行计算,把结果进行计数存进数组:递归 方法二:动态规划,大问题小化 ...
- 一分钟速学 | NMS, IOU 与 SoftMax
非极大抑制 NMS的英文是Non-maximum suppression的缩写. 简单的说,就是模型给出了多个重叠在一起的候选框,我们只需要保留一个就可以了.其他的重叠的候选框就删掉了,效果可见下图: ...