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上运行,拖动的时候手指会挡住系统默认的拖动图标,导致用户意识不到自己是不是在拖动着东西,所以要解决这 ...
随机推荐
- CC2530通用IO口的输入输出
一.引脚概述 CC2530有40 个引脚.其中,有21个数字I/O端口,其中P0和P1是8 位端口,P2仅有5位可以使用.P2端口的5个引脚中,有2个需要用作仿真,有2个需要用作晶振.所以可供我们使用 ...
- Spring源码阅读 之 配置的读取，解析
在上文中我们已经知道了Spring如何从我们给定的位置加载到配置文件,并将文件包装成一个Resource对象.这篇文章我们将要探讨的就是,如何从这个Resouce对象中加载到我们的容器?加载到容器后又 ...
- 【Hadoop离线基础总结】HDFS入门介绍
HDFS入门介绍 概述 HDFS全称为Hadoop Distribute File System,也就是Hadoop分布式文件系统,是Hadoop的核心组件之一. 分布式文件系统是横跨在多台计算机上的 ...
- asp.net core计划任务探索之hangfire+redis+cluster
研究了一整天的quartz.net,发现一直无法解决cluster模式下多个node独立运行的问题,改了很多配置项,仍然是每个node各自为战.本来cluster模式下的各个node应该是负载均衡的, ...
- Spark Streaming 基本操作
Spark Streaming 基本操作 一.案例引入 3.1 StreamingContext 3.2 数据源 3.3 服务的启动与停止二.Transf ...
- 不同版本（2.3/2.4/2.5/3.0/3.1）web.xml头信息
Web App 3.1 <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http:// ...
- Redis的几种集群方式分析
一 单机版 分析: 无论多少用户,都访问这一台服务器 .服务器一旦挂了,所有用户都无法访问.风险很大,一般不会有人使用. 二 主从模式(master/slaver) 分析: 主从模式中, 无论多少用户 ...
- SpringCloud Netflix (五) : Hystrix 服务熔断和服务降级
什么是Hystrix 在分布式环境中,许多服务依赖项中的一些服务依赖不可避免地会失败.Hystrix是一个库,通过添加延迟容忍和容错逻辑,帮助您控制这些分布式服务之间的交互.Hystrix通过隔离服务 ...
- git推送代码问题之：ERROR: [abcdefg] missing Change-Id in commit message footer
一.问题: 在日常的工作中,使用git推送代码时会出现以下报错,“missing Change-Id in commit message” : qinjiaxi:$ git push origin H ...
- select 后台获取text 并根据text 设置value选中项
-------获取select 的text string orderNo = this.orderNo.Items[this.orderNo.SelectedIndex].Text; -----根据t ...