基于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中onmouse事件在div中失效问题的解决方法
Jan 09 Javascript
JQuery 操作/获取table具体代码
Jun 13 Javascript
JavaScript移除数组元素减少长度的方法
Sep 05 Javascript
js返回前一页刷新本页重载页面
Jul 29 Javascript
Vue.js常用指令汇总(v-if、v-for等)
Nov 03 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
js 动态生成html 触发事件传参字符转义的实例
Feb 14 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
微信小程序新手教程之页面打开数量限制
Mar 03 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
Mar 04 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 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
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
PHP中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
php日期操作技巧小结
2016/06/25 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
PHP与Perl之间知识点区别整理
2019/03/19 PHP
javascript与webservice的通信实现代码
2010/12/25 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
2015/04/02 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
2015/09/15 Javascript
第二篇Bootstrap起步
2016/06/21 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
Bootstrap Table使用整理(四)之工具栏
2017/06/09 Javascript
JS实现验证码倒计时的注册页面
2018/01/02 Javascript
JavaScript寄生组合式继承实例详解
2018/01/06 Javascript
原生JS实现多个小球碰撞反弹效果示例
2018/01/31 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
python通过自定义isnumber函数判断字符串是否为数字的方法
2015/04/23 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
python实现扫描局域网指定网段ip的方法
2019/04/16 Python
使用Python轻松完成垃圾分类(基于图像识别)
2019/07/09 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
python判断变量是否为列表的方法
2020/09/17 Python
世界领先的豪华床上用品供应商之一:Bedeck Home
2019/03/18 全球购物
大门门卫岗位职责
2013/11/30 职场文书
幼儿园家长会邀请函
2014/01/15 职场文书
求职意向书
2014/04/01 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
党支部半年考察意见
2015/06/01 职场文书
初中地理教学反思
2016/02/19 职场文书
《中国机长》观后感:敬畏生命,敬畏职责
2019/11/12 职场文书