基于JavaScript实现鼠标箭头移动图片跟着移动


Posted in Javascript onAugust 30, 2016

我们经常在一些网站上看到,鼠标在网页上移动,有一张图片跟着鼠标移动。大家知道这种效果是怎么做出来的吗?你可能感到比较复杂,其实他是用js编一段小程序来实现的,且代码简单,比较好理解。下面我就来分享下实现代码。

关键代码如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js鼠标移到</title>
<script type="text/javascript">
function Divflying(){
var div=document.getElementById('dv1');
if (!div) {
return;
}
var intX=window.event.clientX;
var intY=window.event.clientY;
div.style.left=intX+"px";
div.style.top=intY+"px";
}
document.onmousemove=Divflying;
</script>
</head>
<body>
<div id="dv1" style="position:absolute;">
<img src="fly.jpg"><br>
低调的跟着鼠标飘过~~
</div>
</body>
</html>

以上所述是小编给大家介绍的基于JavaScript实现鼠标箭头移动图片跟着移动,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS 自定义带默认值的函数
Jul 21 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
jquery处理页面弹出层查询数据等待操作实例
Mar 25 Javascript
js实现人才网站职位选择功能的方法
Aug 14 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
Jun 15 Javascript
jQuery购物网页经典制作案例
Aug 19 Javascript
轻松掌握JavaScript享元模式
Aug 27 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
discuz表情的JS提取方法分析
Mar 22 Javascript
Angular中支持SCSS的方法
Nov 18 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
May 21 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
Oct 22 Javascript
很棒的js Tab选项卡切换效果
Aug 30 #Javascript
js改变透明度实现轮播图的算法
Aug 24 #Javascript
标准的js无缝滚动效果
Aug 30 #Javascript
js实现按钮控制带有停顿效果的图片滚动
Aug 30 #Javascript
js制作网站首页图片轮播特效代码
Aug 30 #Javascript
js实现简单的碰壁反弹效果
Aug 30 #Javascript
js控住DOM实现发布微博效果
Aug 30 #Javascript
You might like
福利彩票幸运号码自动生成器
2006/10/09 PHP
编写安全 PHP应用程序的七个习惯深入分析
2013/06/08 PHP
PHP面相对象中的重载与重写
2017/02/13 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
javascript学习笔记(九) js对象 设计模式
2012/06/19 Javascript
js 实现日期灵活格式化的小例子
2013/07/14 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
JS常用表单验证方法总结
2014/05/22 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
微信小程序开发(二)图片上传+服务端接收详解
2017/01/11 Javascript
javascript深拷贝和浅拷贝详解
2017/02/14 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
vue.js实现刷新当前页面的方法教程
2017/07/05 Javascript
.vue文件 加scoped 样式不起作用的解决方法
2018/05/28 Javascript
详解JavaScript修改注册表的方法
2020/01/05 Javascript
在vant中使用时间选择器和popup弹出层的操作
2020/11/04 Javascript
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
Python中用pycurl监控http响应时间脚本分享
2015/02/02 Python
Python编程实现双链表,栈,队列及二叉树的方法示例
2017/11/01 Python
python+pygame简单画板实现代码实例
2017/12/13 Python
python 实现return返回多个值
2019/11/19 Python
浅谈Pycharm的项目文件名是红色的原因及解决方式
2020/06/01 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
欧姆龙医疗欧洲有限公司:Omron Healthcare Europe B.V
2020/06/13 全球购物
银行实习生自我鉴定范文
2013/09/19 职场文书
工程监理应届生求职信
2013/11/09 职场文书
大学生自我鉴定
2013/12/08 职场文书
教师党员思想汇报
2014/01/06 职场文书
医生进修自我鉴定
2014/01/19 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
2014年移动公司工作总结
2014/12/08 职场文书
企业爱心捐款倡议书
2015/04/27 职场文书
2015年绩效考核工作总结
2015/05/23 职场文书
公司业务员管理制度
2015/08/05 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书
微信小程序APP的生命周期及页面的生命周期
2022/04/19 Javascript