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上运行,拖动的时候手指会挡住系统默认的拖动图标,导致用户意识不到自己是不是在拖动着东西,所以要解决这 ...
随机推荐
- mybatis添加信息自动生成主键
一.使用Oracle数据库 举例:添加员工的时候自动生成主键 1.在dao接口中声明方法 2.在mapper中实现该方法 需要先在数据表中创建序列 3.测试 注意:在调用过save方法之后,emp对象 ...
- matlab数值数据和变量名
1.2MATLAB数值数据 l 数值数据类型的分类 l 数值数据的输出格式 l 常用数学函数内部函数 1．数值数据类型的分类 l 整型 l 浮点型 l 复数型 (1)整型 1．数值数据类型 ...
- 一篇博客带你轻松应对java面试中的多线程与高并发
1. Java线程的创建方式 (1)继承thread类 thread类本质是实现了runnable接口的一个实例,代表线程的一个实例.启动线程的方式start方法.start是一个本地方法,执行后,执 ...
- 在使用SSH+Spring开发webservice ，报的一些异常及处理方法
1.No bean named 'cxf' is defined 配置文件被我分成了三份,启动时忘记将webService配置导入到主文件,修改后如下: 2.bad request 400 访问路径写 ...
- 【Spark】Spark-shell案例——standAlone模式下读取HDFS上存放的文件
目录 可以先用local模式读取一下 步骤 一.先将做测试的数据上传到HDFS 二.开发scala代码 standAlone模式查看HDFS上的文件 步骤 一.退出local模式,重新进入Spark- ...
- Ubuntu 18.04使用OpenSSL自签证书（证书支持多IP及多域名，谷歌浏览器无警告）
前言 在HTTPS数据传输的过程中,需要用SSL/TLS对数据进行加密和解密,以保证网络传输过程中数据的机密性.HTTPS协议可以大致分为两个部分:其一是协商密钥,首先当Client向Web Serv ...
- P2444 [POI2000]病毒 AC自动机
P2444 [POI2000]病毒 #include <bits/stdc++.h> using namespace std; ; struct Aho_Corasock_Automato ...
- 6.1Go方法
第六章 Go方法 在第三章中讲解了struct,面向对象编程OOP已经是一个编程范式了,Go语言同样支持OOP开发. 一个对象就是一个变量,在这个对象中包含了一些方法,一个方法是一个和特殊类型关联的函 ...
- redis python操作api
redis单例数据库 #redis单例连接 ''' redis-server redis_diy.conf ''' import redis conn=redis.StrictRedis(host=' ...
- Django之内置分页器（paginator）
django分页: from django.shortcutsimportrender from django.core.paginator import Paginator,EmptyPage, P ...