基于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 相关文章推荐
使用apply方法处理数组的三个技巧[译]
Sep 20 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
Apr 26 Javascript
如何改进javascript代码的性能
Apr 02 Javascript
js实现精美的图片跟随鼠标效果实例
May 16 Javascript
jquery图片滚动放大代码分享(2)
Aug 28 Javascript
javascript self对象使用详解
Oct 18 Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
Nov 14 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
Sep 07 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
Dec 04 Javascript
jQuery实现弹出层效果
Dec 10 jQuery
node.JS路径解析之PATH模块使用方法详解
Feb 06 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
PHP 和 XML: 使用expat函数(三)
2006/10/09 PHP
php页面消耗内存过大的处理办法
2013/03/18 PHP
PHP的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
PHP 将dataurl转成图片image方法总结
2016/10/14 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
2009/12/09 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
2010/11/25 Javascript
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
js判断iframe内的网页是否滚动到底部触发事件
2014/03/18 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
Angularjs 依赖压缩及自定义过滤器写法
2017/02/04 Javascript
基于Vue2.0的分页组件
2017/03/16 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
jQuery实现键盘回车搜索功能
2017/07/25 jQuery
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
2019/04/10 Javascript
使用React手写一个对话框或模态框的方法示例
2019/04/25 Javascript
小程序实现搜索框
2020/06/19 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
Python实现购物车程序
2018/04/16 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
纯css3实现的竖形无限级导航
2014/12/10 HTML / CSS
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
大学生简单自荐信
2013/11/10 职场文书
监理资料员岗位职责
2014/01/03 职场文书
幼师自我鉴定
2014/02/01 职场文书
毕业生工作求职信
2014/06/30 职场文书
保研专家推荐信范文
2015/03/25 职场文书
请病假条范文
2015/08/17 职场文书