对象跟随鼠标：

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. java基础篇 之 接口

    组合接口时的名字冲突: 看下面这段代码: interface I1 { int f(); } interface I2 { void f(); } interface I3 { int f(int a ...

  2. LDheatmap | SNP连锁不平衡图（LD）可视化，自己数据实现版！

    本文首发于“生信补给站”,https://mp.weixin.qq.com/s/Gl6BChxSYbSHMo9oMpufPg 连锁不平衡图,用来可视化不同SNP之间的连锁程度,前同事间俗称“倒三角”图 ...

  3. 【Spark】使用java语言开发spark程序

    目录 步骤 一.创建maven工程,导入jar包 二.开发代码 步骤 一.创建maven工程,导入jar包 <properties> <scala.version>2.11.8 ...

  4. OpenCV Error: Unspecified Error(The Function is not implemented)

    Ubuntu 或者 Debian 系统显示窗口的时候遇到了这个问题 error: (-2:Unspecified error) The function is not implemented. Reb ...

  5. 设计模式之GOF23责任链模式

    责任链模式chain of responsibility 将能够处理同一类请求的对象连成一条链,所提交的请求依次在链上传递,直到传递至有能力处理该请求的对象,不能则传给链上下一个 场景: -打牌时 - ...

  6. [hdu2119]二分图最小覆盖，最大匹配

    题意:给一个01矩阵,每次可以选一行或一列,打掉上面所有的1,求打掉所有的1所需的最小次数. 思路:经典的模型了,二分图最小覆盖=最大匹配.所谓最小覆盖是指选最少的点关联所有的边.容易得到将行和列看成 ...

  7. springMVC 重定向带参数

    重定向时经常需要带上一定的标志位参数,当然,强大的springmvc提供了便利的操作. 只需要在方法参数中添加RedirectAttributes 或其子类即可! @RequestMapping(&q ...

  8. vue 升级element-ui woff文件404

    一.build文件下utils.js下增加 publicPath:'../../' 二. 同样的代码环境,用yarn来安装依赖后启动运行正常,而采用npm安装依赖则有类似问题.当然,这个和yarn或者 ...

  9. 【雕爷学编程】Arduino动手做（50）---W25Q64存储模块

    37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器和模块,依照实践(动手试试)出真知的理念,以学习和交流为目的,这里准备 ...

  10. Django之MTV模式

    MTV与MVC+url控制器 MVC框架: ·         M:model.py  就是和数据库打交道用的,创建表等操作 ·         V:View  视图(视图函数:逻辑处理响应函数,ht ...