基于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 相关文章推荐
用javascript实现的图片马赛克后显示并切换加文字功能
Apr 21 Javascript
javascript 简单抽屉效果的实现代码
Mar 09 Javascript
javascript抖动元素的小例子
Oct 28 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
Apr 23 Javascript
setTimeout()递归调用不加引号出错的解决方法
Sep 05 Javascript
JavaScript检测字符串中是否含有html标签实现方法
Jul 01 Javascript
JS实现的网页背景闪电闪烁效果代码
Oct 17 Javascript
js实现表单及时验证功能 用户信息立即验证
Sep 13 Javascript
easyui combogrid实现本地模糊搜索过滤多列
May 13 Javascript
node中使用es5/6以及支持性与性能对比
Aug 11 Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 Javascript
JavaScript事件委托实现原理及优点进行
Aug 29 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或asp创建网页桌面快捷方式的代码
2010/03/23 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
magento后台无法登录解决办法的两种方法
2016/12/09 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
javascript支持firefox,ie7页面布局拖拽效果代码
2007/12/20 Javascript
可以将word转成html的js代码
2010/04/11 Javascript
jQuery学习笔记之jQuery的动画
2010/12/22 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
JavaScript使用function定义对象并调用的方法
2015/03/23 Javascript
angularjs表格分页功能详解
2016/01/21 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
Node.js+Express+MySql实现用户登录注册功能
2017/07/10 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
2017/09/30 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
2019/08/27 Javascript
微信小程序中的列表切换功能实例代码详解
2020/06/09 Javascript
js实现全选和全不选
2020/07/28 Javascript
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python如何实现MySQL实例初始化详解
2017/11/06 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
Tensorflow实现部分参数梯度更新操作
2020/01/23 Python
pycharm无法安装第三方库的问题及解决方法以scrapy为例(图解)
2020/05/09 Python
eDreams葡萄牙:全球最大的在线旅行社之一
2019/04/15 全球购物
职业女性的职业规划
2014/03/04 职场文书
俄语专业毕业生求职信
2014/07/12 职场文书
2014年教师批评与自我批评思想汇报
2014/09/20 职场文书
公司市场部岗位职责
2015/04/15 职场文书
如何理解PHP核心特性命名空间
2021/05/28 PHP
Python图片检索之以图搜图
2021/05/31 Python
vue实现简易音乐播放器
2022/08/14 Vue.js