基于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 Object.extend
May 18 Javascript
使用jquery操作session方法分享
Jan 22 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
Mar 16 Javascript
JavaScript中关联原型链属性特性
Feb 13 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
May 05 Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 Javascript
node.js实现微信JS-API封装接口的示例代码
Sep 06 Javascript
小程序实现展开/收起的效果示例
Sep 22 Javascript
微信小程序如何实现在线客服功能
Oct 16 Javascript
javascript中的相等操作符(==与===区别)
Dec 21 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 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的一个完整SMTP类(解决邮件服务器需要验证时的问题)
2006/10/09 PHP
利用PHP判断文件是否为图片的方法总结
2017/01/06 PHP
jquery+json 通用三级联动下拉列表
2010/04/19 Javascript
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
中文字符串截取的js函数代码
2013/04/17 Javascript
js中replace的用法总结
2013/12/27 Javascript
Nodejs极简入门教程(一):模块机制
2014/10/25 NodeJs
详谈JavaScript内存泄漏
2014/11/14 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
实例教学如何写vue插件
2017/11/30 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
Element-UI+Vue模式使用总结
2020/01/02 Javascript
javascript实现简单搜索功能
2020/03/26 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
[37:45]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS Orenda
2014/05/22 DOTA
Python中3种内建数据结构:列表、元组和字典
2014/11/30 Python
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
教你使用python实现微信每天给女朋友说晚安
2018/03/23 Python
python实现多进程代码示例
2018/10/31 Python
numpy基础教程之np.linalg
2019/02/12 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
python读文件的步骤
2019/10/08 Python
学Python 3的理由和必要性
2019/11/19 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
Python 爬虫的原理
2020/07/30 Python
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
网络技术支持面试题
2013/04/22 面试题
面向对象设计的原则是什么
2013/02/13 面试题
大学三年的自我评价
2013/12/25 职场文书
小学标准化建设汇报材料
2014/08/16 职场文书
励志演讲稿500字
2014/08/21 职场文书
简历中的自我评价怎么写呢?
2019/04/30 职场文书
前端传参数进行Mybatis调用mysql存储过程执行返回值详解
2022/08/14 MySQL