基于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 相关文章推荐
jQuery的链式调用浅析
Dec 03 Javascript
jQuery动态地获取系统时间实现代码
May 24 Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 Javascript
理解javascript异步编程
Jan 27 Javascript
理解javascript中的MVC模式
Jan 28 Javascript
React组件生命周期详解
Jul 03 Javascript
VueJS事件处理器v-on的使用方法
Sep 27 Javascript
vue微信分享 vue实现当前页面分享其他页面
Dec 02 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 Javascript
vue缓存之keep-alive的理解和应用详解
Nov 02 Javascript
详解Typescript里的This的使用方法
Jan 08 Javascript
Ajax实现异步加载数据
Nov 17 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
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
PHP调用C#开发的dll类库方法
2014/07/28 PHP
php实现的Captcha验证码类实例
2014/09/22 PHP
php通过文件流方式复制文件的方法
2015/03/13 PHP
php-msf源码详解
2017/12/25 PHP
RGB颜色值转HTML十六进制(HEX)代码的JS函数
2009/04/25 Javascript
支持ie与FireFox的剪切板操作代码
2009/09/28 Javascript
JQuery.closest(),parent(),parents()寻找父结点
2012/02/17 Javascript
js实现杯子倒水问题自动求解程序
2013/03/25 Javascript
jquery五角星评分插件示例分享
2014/02/21 Javascript
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
深入探究使JavaScript动画流畅的一些方法
2015/06/30 Javascript
老生常谈JavaScript 函数表达式
2016/09/01 Javascript
Javascript中作用域的详细介绍
2016/10/06 Javascript
使用JavaScript获取URL中的参数(两种方法)
2016/11/16 Javascript
jquery对象与DOM对象转化
2017/02/08 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
Vue Cli3 创建项目的方法步骤
2018/10/15 Javascript
简单掌握Python的Collections模块中counter结构的用法
2016/07/07 Python
python print 按逗号或空格分隔的方法
2018/05/02 Python
详解利用Python scipy.signal.filtfilt() 实现信号滤波
2019/06/05 Python
Python队列RabbitMQ 使用方法实例记录
2019/08/05 Python
Python yield的用法实例分析
2020/03/06 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
weblogic面试题
2016/03/07 面试题
工作交流会欢迎词
2014/01/12 职场文书
互联网电子商务专业毕业生求职信
2014/03/18 职场文书
产品开发计划书
2014/04/27 职场文书
户籍证明书标准模板
2014/09/10 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
2014年化验员工作总结
2014/11/18 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
2015年教师节新闻稿
2015/07/17 职场文书
生产实习心得体会范文
2016/01/22 职场文书
Python中super().__init__()测试以及理解
2021/12/06 Python