对象跟随鼠标：

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元素跟随鼠标一起移动,网页中回到顶部按钮的实现的更多相关文章

  1. javascript元素跟随鼠标在指定区域运动

    元素跟随鼠标在指定区域运动通常是用在商城图片的放大镜中,下面是完整的Demo: <!DOCTYPE html> <html lang="en"> <h ...

  2. js进阶 12-3 如何实现元素跟随鼠标移动

    js进阶 12-3 如何实现元素跟随鼠标移动 一.总结 一句话总结:获取鼠标位置,将鼠标位置设置为元素偏移即可. 1.用什么事件获取鼠标位置? 用mousemove可以获取鼠标移动的时候的位置 $(d ...

  3. jQuery背景跟随鼠标移动的网页导航

    首页 PSD模板 CSS模板 特效插件 源码下载 酷站欣赏 建站资源 建站教程 心境之旅 在线留言 设为首页 加入收藏 我要投稿 联系站长 Search     首页 PSD模板 CSS模板 特效插件 ...

  4. vue中回到顶部

    1. 回到顶部,使用 scrollIntoView 方法: Element.scrollIntoView方法滚动当前元素,进入浏览器的可见区域 该方法可以接受一个布尔值作为参数.如果为true,表示元 ...

  5. html网页中 点击按钮页面跳转

    在html页面中 实现点击按钮页面跳转.语句如下: <input type="button" value="跳转" onClick="windo ...

  6. 微信小程序中两种回到顶部按钮的效果实现

    一,使用view形式的回到顶部HTML: <image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}} ...

  7. 网页中创建音频、视频和Flash等多媒体：object元素

    <object>元素:它主要用于定义网页中的多媒体,比如音频.视频.Java applets.PDF.ActiveX和Flash.Object标签是成对出现的,在object标签内可以使用 ...

  8. 在网页中引用DWG控件，交互绘图，和响应鼠标点击对象的方法

    在网页中引用DWG控件,交互绘图,和响应鼠标点击对象的方法 [MXDRAW CAD控件文档] 下面帮助的完整例子,在控件安装目录的Sample\Ie\iedemo.htm中. 1.      主要用到 ...

  9. WPF DragDrop事件元素跟随

    前一段时间项目里面要实现一个鼠标拖动一个元素到另外一个元素上面并且赋值的功能,由于要在surface上运行,拖动的时候手指会挡住系统默认的拖动图标,导致用户意识不到自己是不是在拖动着东西,所以要解决这 ...

随机推荐

  1. Spring官网阅读（十五）Spring中的格式化（Formatter）

    文章目录 Formatter 接口定义 继承树 注解驱动的格式化 AnnotationFormatterFactory FormatterRegistry 接口定义 UML类图 FormattingC ...

  2. Unity 游戏框架搭建 2019 (四十六) 简易消息机制 & 集成到 MonoBehaviourSimplify 里

    在上一篇,我们接触了单例,使用单例解决了我们脚本之间访问的问题. 脚本之间访问其实有更好的方式. 我们先分下脚本访问脚本的几种形式. 第一种,A GameObject 是 B GameObject 的 ...

  3. 王颖奇 20171010129《面向对象程序设计（java）》第十六周学习总结

    实验十六  线程技术 实验时间 2018-12-8 理论部分: 并发⚫ 线程的概念⚫ 中断线程⚫ 线程状态⚫ 多线程调度⚫ 线程同步 1.线程的概念 程序是一段静态的代码,它是应用程序执行的蓝本. 进 ...

  4. 简述异步编程&Promise&异步函数

    前言:文章由本人在学习之余总结巩固思路,不足之前还请指出. 一.异步编程 首先我们先简单来回顾一下同步API和异步API的概念 1.同步API:只有当前的API执行完成之前,才会执行下一个API 例: ...

  5. python3语法学习第四天--序列

    序列是Python中最基本的数据结构. 序列中的每个元素都分配一个索引从0开始依此类推. Python有6个序列的内置类型,但最常见的是列表和元组. 序列可以的操作:索引,切片,加,乘,检查成员. 此 ...

  6. [hdu3486]rmq+枚举优化

    题意:给n个数,求最小的段数,使得每一段的最大值之和大于给定的k.每一段的长度相等,最后若干个丢掉. 思路:从小到大枚举段数,如果能o(1)时间求出每一段的和,那么总复杂度是O(n(1+1/2+1/3 ...

  7. [hdu4358]树状数组

    思路:用一个数组记录最近k次的出现位置,然后在其附近更新答案.具体见代码: #pragma comment(linker, "/STACK:10240000,10240000") ...

  8. transform-translate3d

    translate3d 开启硬件加速,做动效效率比 position 定位置后,改变位置,效果好,比如下拉背景放大效果,上滑的时候背景跟着上滑,可以用 translate3d.亲测效果更好,记下来

  9. Java openrasp学习记录(一)

    前言: 最近一直在做学校实验室安排的项目,太惨了,没多少时间学习新知识,不过rasp还是要挤挤时间学的,先从小例子的分析开始,了解rasp的基本设计思路,后面详细阅读openrasp的源码进行学习!欢 ...

  10. PG 更新统计信息

    http://blog.chinaunix.net/uid-24774106-id-3802225.html 一.vacuum的效果: 1.1释放,再利用 更新/删除的行所占据的磁盘空间. 第一点的原 ...