对象跟随鼠标：

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. (三)Redis &分布式锁

    1 Redis使用中的常见问题和解决办法 1.1 缓存穿透 定义:缓存系统都是按照key去缓存查询,如果不存在对应的value,就应该去DB查找.一些恶意的请求会故意查询不存在的key,请求量很大,就 ...

  2. java基础篇 之 位运算符

    按位操作符 ​ 按位操作符用来操作基本数据类型中的单个"比特"(bit),即二进制位.按位操作符会对两个参数中对应的位执行布尔代数运算,并最终生成一个结果. ​ 我们常用的按位操作 ...

  3. ASP.NET Core Blazor 初探之 Blazor Server

    上周初步对Blazor WebAssembly进行了初步的探索(ASP.NET Core Blazor 初探之 Blazor WebAssembly).这次来看看Blazor Server该怎么玩. ...

  4. 重要的serialVersionUID

    所有序列化的DO都需要加上 serialVersionUID 否则未来可能就有一个坑在等着你 当你需要修改序列化的实体累的时候 之前缓存内容反序列化就会失败,如果这个缓存很多个地方都在存取 使用 那么 ...

  5. Android CodeReview 些许总结

    CodeReview些许总结 1:使用Handler的时候,使用handler.post(Runnable);,hanler与类尽量保持弱引用关系,或者使用静态的handler对象 public Ha ...

  6. 手机APP自动化环境搭建

    1 摘要 近年来,随着移动应用从数量上和逻辑复杂程度上的增长,以及产品发布周期的紧缩,使得回归测试迫在眉睫,鉴于此APP自动化测试变得越来流行,当前主流的APP自动化工具有:Appium.Roboti ...

  7. 学习Echarts：（二）异步加载更新

    这部分比较简单,对图表的异步加载和更新,其实只是异步获取数据然后通过setOption传入数据和配置而已. $.get('data.json').done(function (data) { myCh ...

  8. js 文本框只能输入数字和点

    http://www.jb51.net/article/51102.htm 手机端 只能输入数字,能输小数点.且只能2位小数 oninput="this.value=this.value.r ...

  9. mysql设置文档快捷写

    select distinct column_name,column_comment,column_type from information_schema.columns where table_n ...

  10. 根据ip查询ip归属地

    http://www.oschina.net/code/snippet_944819_33978 http://www.jb51.net/article/54287.htm public String ...