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上运行,拖动的时候手指会挡住系统默认的拖动图标,导致用户意识不到自己是不是在拖动着东西,所以要解决这 ...
随机推荐
- Scrapy模块使用出错，出现builtins.ImportError: DLL load failed: 找不到指定的程序
问题描述:初次学习scrapy,使用scrapy官方文档创建爬虫项目出错, 出现builtins.ImportError: DLL load failed: 找不到指定的程序, ImportError ...
- STM32 TIM高级定时器死区时间的计算
STM32 TIM高级定时器的互补PWM支持插入死区时间,本文将介绍如何计算以及配置正确的死区时间. 文章目录 什么是死区时间? 数据手册的参数 如何计算合理的死区时间? STM32中配置死区时间 什 ...
- 【漫画】JAVA并发编程 如何解决原子性问题
原创声明:本文转载自公众号[胖滚猪学编程],转载务必注明出处! 在并发编程BUG源头文章中,我们初识了并发编程的三个bug源头:可见性.原子性.有序性.在如何解决可见性和原子性文章中我们大致了解了可见 ...
- mac下charles使用
设置charles 电脑上一次性的工作 1 下载下面两个文件(这里版本自己定) a charles-proxy-4.1.4.dmg b charles4.1.4的副本.jar 2 进行charles ...
- ql的python学习之路-day2
python中所有字符串操作 , )))), ))))#返回50个长度的字符串,不够左边就以0补充,可以用在十六进制补位(不常用)运行结果: My name is qinjiaxi---------- ...
- linux下获取软件源码包 centos/redhat, debian/ubuntu
linux下获取软件源码包 centos/redhat, debian/ubuntu centos下: 1. yum install yum-utils 主要为了获取yumdownloader 2. ...
- 【雕爷学编程】Arduino动手做（59）---RS232转TTL串口模块
37款传感器与执行器的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止这37种的.鉴于本人手头积累了一些传感器和执行器模块,依照实践出真知(一定要动手做)的理念,以学习和交流为 ...
- Vue element-ui date-picker 结束时间大于开始时间且开始时间小于此刻(转)
转载自:https://blog.csdn.net/wintersweetGirl/article/details/82461412 <el-form ref="form" ...
- vue-cli 2.x 搭建项目
一.vue-cli优势 1.成熟的vue项目架构设计 2.本地测试服务器 3.集成打包上线方案 二.系统要求 1.node.js 2. Git 3.node命令行终端 三.安装 1.安装vue-cli ...
- Java实现DDD中UnitOfWork
Java实现DDD中UnitOfWork 背景 Maintains a list of objects affected by a business transaction and coordinat ...