基于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 XML操作 封装类
Jul 01 Javascript
js中通过父级进行查找定位元素
Jun 15 Javascript
js中的getAttribute方法使用示例
Aug 01 Javascript
JsRender实用入门教程
Oct 31 Javascript
详谈JavaScript 匿名函数及闭包
Nov 14 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
Nov 26 Javascript
js实现获取两个日期之间所有日期的方法
Jun 17 Javascript
node.js express安装及示例网站搭建方法(分享)
Aug 22 Javascript
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
自定义PC微信扫码登录样式写法
Dec 12 Javascript
老生常谈JS中的继承及实现代码
Jul 06 Javascript
解决Vue+Element ui开发中碰到的IE问题
Sep 03 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自定义函数之递归删除文件及目录
2010/08/08 PHP
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
PHP中如何调用webservice的实例参考
2013/04/25 PHP
数组与类使用PHP的可变变量名需要的注意的问题
2013/06/20 PHP
php readfile下载大文件失败的解决方法
2017/05/22 PHP
Laravel框架实现redis集群的方法分析
2017/09/14 PHP
JS 拼图游戏 面向对象,注释完整。
2009/06/18 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
解析JavaScript中点号“.”的多义性
2013/12/02 Javascript
avascript中的自执行匿名函数应用示例
2014/09/15 Javascript
javascript弹出拖动窗口
2015/08/11 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
2016/08/08 Javascript
javascript代码优化的8点总结
2018/01/29 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
JavaScript获取页面元素的常用方法详解
2019/09/28 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
Python多进程编程技术实例分析
2014/09/16 Python
Python字符串拼接的几种方法整理
2017/08/02 Python
Python实现XML文件解析的示例代码
2018/02/05 Python
用python处理MS Word的实例讲解
2018/05/08 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
Python flask框架post接口调用示例
2019/07/03 Python
Python logging设置和logger解析
2019/08/28 Python
CSS3的RGBA中关于整数和百分比值的转换
2015/08/04 HTML / CSS
如何用css3实现switch组件开关的方法
2018/02/09 HTML / CSS
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
软件毕业生个人鉴定
2014/03/03 职场文书
设立有限责任公司出资协议书
2014/11/01 职场文书
学雷锋献爱心活动总结
2015/05/11 职场文书
雨中的树观后感
2015/06/03 职场文书
党员公开承诺书2016
2016/03/24 职场文书
MySQL触发器的使用
2021/05/24 MySQL
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery