基于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 相关文章推荐
setTimeout()与setInterval()方法区别介绍
Dec 24 Javascript
Select标签下拉列表二级联动级联实例代码
Feb 07 Javascript
js实现点击添加一个input节点
Dec 05 Javascript
node.js中的emitter.emit方法使用说明
Dec 10 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 Javascript
Bootstarp风格的toggle效果分享
Feb 23 Javascript
微信小程序之绑定点击事件实例详解
Jul 07 Javascript
对angularJs中$sce服务安全显示html文本的实例
Sep 30 Javascript
Vue 动态组件与 v-once 指令的实现
Feb 12 Javascript
详解iview的checkbox多选框全选时校验问题
Jun 10 Javascript
vue-cli点击实现全屏功能
Mar 07 Javascript
小程序wx.getUserProfile接口的具体使用
Jun 02 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的ZIP压缩类分享
2014/05/04 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
php限制上传文件类型并保存上传文件的方法
2015/03/13 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
PHP自定义递归函数实现数组转JSON功能【支持GBK编码】
2018/07/17 PHP
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
jQuery中fadeOut()方法用法实例
2014/12/24 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
创建你的第一个AngularJS应用的方法
2015/06/16 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
Vue.js如何优雅的进行form validation
2017/04/07 Javascript
Node.js+Express+MySql实现用户登录注册功能
2017/07/10 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
2018/03/09 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
2018/07/06 Javascript
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
react 原生实现头像滚动播放的示例
2020/04/21 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python中的字典使用分享
2016/07/31 Python
详解Python各大聊天系统的屏蔽脏话功能原理
2016/12/01 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
canvas实现飞机打怪兽射击小游戏的示例代码
2018/07/09 HTML / CSS
Woolworth官网:澳洲第一大超市
2017/06/25 全球购物
Mountain Warehouse波兰官方网站:英国户外品牌
2019/08/29 全球购物
体育系毕业生自荐信
2014/06/28 职场文书
大三学生英语考试作弊检讨书
2015/01/01 职场文书
公司借条范本
2015/05/25 职场文书
排查MySQL生产环境索引没有效果
2022/04/11 MySQL