基于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 EasyPager 分页函数
May 25 Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
Mar 04 Javascript
一看就懂:jsonp详解
Jun 01 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 Javascript
jQuery基于排序功能实现上移、下移的方法
Nov 26 Javascript
Input文本框随着输入内容多少自动延伸的实现
Feb 15 Javascript
ES6中的rest参数与扩展运算符详解
Jul 18 Javascript
angular2系列之路由转场动画的示例代码
Nov 09 Javascript
angularjs使用div模拟textarea文本框的方法
Oct 02 Javascript
js实现跳一跳小游戏
Jul 31 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
Discuz!下Memcache缓存实现方法
2010/05/28 PHP
Window 7/XP 安装Apache 2.4与PHP 5.4 的过程详解
2013/06/02 PHP
async和DOM Script文件加载比较
2014/07/20 PHP
php生成动态验证码gif图片
2015/10/19 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
php如何实现数据库的备份和恢复
2020/11/30 PHP
javascript 简练的几个函数
2009/08/29 Javascript
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
javascript中的previousSibling和nextSibling的正确用法
2015/09/16 Javascript
bootstrap栅格系统示例代码分享
2017/05/22 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
vue-router 路由传参用法实例分析
2020/03/06 Javascript
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
Python模块学习 re 正则表达式
2011/05/19 Python
Python入门篇之条件、循环
2014/10/17 Python
Python实现CET查分的方法
2015/03/10 Python
Django rest framework基本介绍与代码示例
2018/01/26 Python
python爬虫面试宝典(常见问题)
2018/03/02 Python
python利用re,bs4,requests模块获取股票数据
2019/07/29 Python
Python Pickle 实现在同一个文件中序列化多个对象
2019/12/30 Python
python中pivot()函数基础知识点
2021/01/03 Python
css3 box-sizing属性使用参考指南
2013/01/08 HTML / CSS
澳大利亚领先的皮肤诊所:Skin Matrix(抗衰老、痤疮专家、药妆护肤)
2018/05/20 全球购物
日本索尼音乐商店:Sony Music Shop
2018/07/17 全球购物
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
2015年电教工作总结
2015/05/26 职场文书
银行求职信怎么写
2019/06/20 职场文书
golang通过递归遍历生成树状结构的操作
2021/04/28 Golang
MySQL中使用or、in与union all在查询命令下的效率对比
2021/05/26 MySQL
python编程项目中线上问题排查与解决
2021/11/01 Python