HTML元素跟随鼠标一起移动,网页中回到顶部按钮的实现
对象跟随鼠标：
1.对象css设置绝对定位position: absolute;
2.获取鼠标坐标；
3.通过鼠标坐标计算出对象坐标位置，并设置为css定位的位置；
document.onmousemove=function(event){
event.clientX;//鼠标X坐标
event.clientY;//鼠标Y坐标
对象.style.left=event.clientX - 对象.offsetWidth/2 + "px";
对象.style.top=event.clientY - 对象.offsetHeight/2 + "px";
}
回到顶部按钮（非锚点方式）
描述：滚动条下滑一定距离会出现回到顶部按钮，顶部没有此按钮
实现方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>回至顶部</title>
<style>
#totop{
width: 60px;
height: 60px;
position: fixed;
right: 20px;
bottom: 20px;
display: none;
}
</style>
</head>
<body>
<img src="img/top.png" id="totop"/>
<p>内容1</p>
<p>内容2</p>
<p>内容3</p>
<!--此处省略网页内容-->
<script>
var totop=document.getElementById("totop");//获取按钮img对象（div也行，只要能做成按钮）
var timer=null;//计时器名称
window.onscroll=function(){
var sctop=document.documentElement.scrollTop;//获取滚动条高度
console.log(sctop);
if(sctop>=200){//如果高度大于200px则显示回到顶部按钮
totop.style.display="block";//显示按钮
}else{
totop.style.display="none";//隐藏按钮
}
}
function toTop(){//回到顶部
document.documentElement.scrollTop-=10;
if(document.documentElement.scrollTop<=0){
clearInterval(timer);//回到顶部要清除定时器
}
}
totop.onclick=function(){
timer=setInterval(toTop,10);//点击按钮回到顶部
}
</script>
</body>
</html>
HTML元素跟随鼠标一起移动,网页中回到顶部按钮的实现的更多相关文章
- javascript元素跟随鼠标在指定区域运动
元素跟随鼠标在指定区域运动通常是用在商城图片的放大镜中,下面是完整的Demo: <!DOCTYPE html> <html lang="en"> <h ...
- js进阶 12-3 如何实现元素跟随鼠标移动
js进阶 12-3 如何实现元素跟随鼠标移动 一.总结 一句话总结:获取鼠标位置,将鼠标位置设置为元素偏移即可. 1.用什么事件获取鼠标位置? 用mousemove可以获取鼠标移动的时候的位置 $(d ...
- jQuery背景跟随鼠标移动的网页导航
首页 PSD模板 CSS模板 特效插件 源码下载 酷站欣赏 建站资源 建站教程 心境之旅 在线留言 设为首页 加入收藏 我要投稿 联系站长 Search 首页 PSD模板 CSS模板 特效插件 ...
- vue中回到顶部
1. 回到顶部,使用 scrollIntoView 方法: Element.scrollIntoView方法滚动当前元素,进入浏览器的可见区域 该方法可以接受一个布尔值作为参数.如果为true,表示元 ...
- html网页中 点击按钮页面跳转
在html页面中 实现点击按钮页面跳转.语句如下: <input type="button" value="跳转" onClick="windo ...
- 微信小程序中两种回到顶部按钮的效果实现
一,使用view形式的回到顶部HTML: <image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}} ...
- 网页中创建音频、视频和Flash等多媒体：object元素
<object>元素:它主要用于定义网页中的多媒体,比如音频.视频.Java applets.PDF.ActiveX和Flash.Object标签是成对出现的,在object标签内可以使用 ...
- 在网页中引用DWG控件，交互绘图，和响应鼠标点击对象的方法
在网页中引用DWG控件,交互绘图,和响应鼠标点击对象的方法 [MXDRAW CAD控件文档] 下面帮助的完整例子,在控件安装目录的Sample\Ie\iedemo.htm中. 1. 主要用到 ...
- WPF DragDrop事件元素跟随
前一段时间项目里面要实现一个鼠标拖动一个元素到另外一个元素上面并且赋值的功能,由于要在surface上运行,拖动的时候手指会挡住系统默认的拖动图标,导致用户意识不到自己是不是在拖动着东西,所以要解决这 ...
随机推荐
- GitHub 热点速览 Vol.19：如何叩响大厂的门？
作者:HelloGitHub-小鱼干 摘要:进大厂,无疑是升职加薪走上人生巅峰的一个敲门砖,那,如何拿到这个敲门砖呢?前辈的经验之谈,无疑会给我们进大厂带来许多的经验参考,本周的#大厂面试经验之谈#主 ...
- Linux内核驱动学习（八）GPIO驱动模拟输出PWM
文章目录 前言 原理图 IO模拟输出PWM 设备树 驱动端 调试信息 实验结果 附录 前言 上一篇的学习中介绍了如何在用户空间直接操作GPIO,并写了一个脚本可以产生PWM.本篇的学习会将写一个驱动操 ...
- shell 条件结构之 if 语句使用总结
文章目录 #条件判断的格式 [ exp ] [[ exp ]] test exp 注意: exp 与 "["."]"括号之间必须要有空格,否则会报语法错误: [ ...
- Go实战面试备忘录
原文地址:https://blog.likeli.top/posts/面试/go面试备忘录/ 一个小厂的面试,记录一下,答案不对的,请帮忙更正下 go部分 map底层实现 map底层通过哈希表实现 s ...
- A~Z；26个字母美式
26个字母美式读法 音频下载地址: 链接:https://pan.baidu.com/s/1KOlxNCydgtsODQZMT9JFJg 提取码:8a9g
- Web_php_unserialize
0x01 <?php class Demo { private $file = 'index.php'; public function __construct($file) { $this-& ...
- 【漫画】读写锁ReadWriteLock还是不够快?再试试StampedLock！
本文来源于公众号[胖滚猪学编程] 转载请注明出处! 在互斥锁ReentrantLock不好用?试试读写锁ReadWriteLock一文中,我们对比了互斥锁ReentrantLock和读写锁ReadWr ...
- ES6-10笔记(一)
大纲 (慕课的图先用着) scope-作用域 作用域是指程序源代码中定义变量的区域,规定了如何查找变量,也就是确定当前执行代码对变量的访问权限. JavaScript作用域共有两种主要的工作模型--词 ...
- 笨办法学习python-ex51自我理解笔记
本章节主要讲的是web的工作原理,先大概熟悉记录一下,为以后写Django web框架打下基础. web工作原理: 1.用户从浏览器输入网址----->browser通过电脑中的网络设备(网卡) ...
- Java内存区域与内存溢出异常——深入理解Java虚拟机 笔记一
Java内存区域 对比与C和C++,Java程序员不需要时时刻刻在意对象的创建和删除过程造成的内存溢出.内存泄露等问题,Java虚拟机很好地帮助我们解决了内存管理的问题,但深入理解Java内存区域,有 ...