基于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 offsetX与layerX区别
Mar 12 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
Aug 15 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 Javascript
JavaScript异步加载浅析
Dec 28 Javascript
JavaScript实现的经典文件树菜单效果
Sep 08 Javascript
JavaScript Ajax编程 应用篇
Jul 02 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
jquery实现购物车基本功能
Oct 25 jQuery
JavaScript实现下拉列表
Jan 20 Javascript
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
很棒的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实现多级树型菜单
2006/10/09 PHP
支持png透明图片的php生成缩略图类分享
2015/02/08 PHP
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
2013/01/11 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
javascript创建含数字字母的随机字符串方法总结
2016/08/01 Javascript
微信小程序入门教程
2016/11/18 Javascript
让你彻底掌握es6 Promise的八段代码
2017/07/26 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
javascript Function函数理解与实战
2017/12/01 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
2018/11/08 Javascript
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
2019/06/10 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
Echarts实现多条折线可拖拽效果
2019/12/19 Javascript
[01:18:21]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
python3序列化与反序列化用法实例
2015/05/26 Python
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
python创建文件备份的脚本
2018/09/11 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
详解Python中打乱列表顺序random.shuffle()的使用方法
2019/11/11 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
一款利用css3的鼠标经过动画显示详情特效的实例教程
2014/12/29 HTML / CSS
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
新加坡最佳婴儿用品店:Mamahood.com.sg
2018/08/26 全球购物
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
员工试用期自我鉴定范文
2014/09/15 职场文书
学生抄作业检讨书(2篇)
2014/10/17 职场文书
2015年司法所工作总结
2015/04/27 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书
MySQL慢查询优化解决问题
2022/03/17 MySQL