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上运行,拖动的时候手指会挡住系统默认的拖动图标,导致用户意识不到自己是不是在拖动着东西,所以要解决这 ...
随机推荐
- 【Swift】获取UILabel中点击的某个功能标签文字并作出响应动作
1.需求 首先.针对UILabel中显示的多个功能标签,作出颜色标记提示. 其次.对关键字作出点击响应动作. 如图所示: 解决: 1.使用正则匹配到关键字 public static var hash ...
- Code::Blocks20.03 编译报错
Code::Blocks最近出了新版20.03,进入官网选择下载了附带MinGW版的安装包后,编译HelloWorld就报错(CB一直以来都有问题,新版还是这样...) 主要有两个问题: ld.exe ...
- OpenWrt R2020.03.05 去广告 抗污染 加速 UnPnP NAS
固件版本已经更新,新版本链接:https://www.cnblogs.com/zlAurora/p/12500932.html 容我啰嗦一下,为什么会有这个固件. 从KoolShare LED ...
- 绝对一个月精通vue
马上从vue-cli4练手,要不然,学几年,你也不懂组件式开发,不懂VUEX,不懂路由, 也许你会说你懂, 麻烦你花一个月学vue-cli4以一个完整购物商城来练手, 一个月后,如果还觉得我错,我 ...
- 带你理解【JavaScript】中的继承机制
前文 总所周知,继承是所有OO语言中都拥有的一个共性.在JavaScript中,它的继承机制与其他OO语言有着很大的不同,尽管ES6为我们提供了像面向对象继承一样的语法糖,但是其底层依然是构造函数,所 ...
- JDBC14 ORM03 JavaBean封装
Javabean对象封装一条信息(推荐) 让JavaBean的属性名和类型尽量和数据库保持一致 一条记录对应一个对象,将这些查询到的对象放到容器中(List) 表信息如下 List封装多条信息 Con ...
- 《 .NET并发编程实战》一书中的节流为什么不翻译成限流
有读者问,为什么< .NET并发编程实战>一书中的节流为什么不翻译成限流? 这个问题问得十分好!毕竟“限流”这个词名气很大,耳熟能详,知名度比“节流”大多了. 首先,节流的原词Thrott ...
- 2020年腾讯实习生C++面试题&持续更新中（5）
2020年腾讯实习生C++面试题&持续更新中(5) 大家好呀,我是好好学习天天编程的天天~ 昨天一位小伙伴反馈已经拿到了腾讯offer,很是替小伙伴的激动~ 那今天还是持续给大家分享面经,希望 ...
- 手把手golang教程【二】——数组与切片
本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是golang专题的第五篇,这一篇我们将会了解golang中的数组和切片的使用. 数组与切片 golang当中数组和C++中的定义类似, ...
- Django之钩子Hook方法
局部钩子: 在Fom类中定义 clean_字段名() 方法,就能够实现对特定字段进行校验.(校验函数正常必须返回当前字段值) def clean_name(self): pass n ...