基于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 相关文章推荐
JS对象与JSON格式数据相互转换
Feb 20 Javascript
extjs4 treepanel动态改变行高度示例
Dec 17 Javascript
浅析JavaScript基本类型与引用类型
May 28 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
May 09 Javascript
浅析JavaScript Array和string的转换(推荐)
May 20 Javascript
js中变量的连续赋值(实例讲解)
Jul 08 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
vue的全局提示框组件实例代码
Feb 26 Javascript
axios实现简单文件上传功能
Sep 25 Javascript
Vue.js实现大转盘抽奖总结及实现思路
Oct 09 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
Nov 25 Javascript
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
很棒的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 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
CI框架中site_url()和base_url()的区别
2015/01/07 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
php无限级分类实现方法分析
2016/10/19 PHP
PHP面向对象程序设计之对象生成方法详解
2016/12/02 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
ThinkPHP5.0框架使用build 自动生成模块操作示例
2019/04/11 PHP
phpfpm的作用和用法
2019/10/10 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
div失去焦点事件实现思路
2014/04/22 Javascript
alert和confirm功能介绍
2014/05/21 Javascript
jquery中one()方法的用法实例
2015/01/16 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
2016/09/05 Javascript
javascript垃圾收集机制的原理分析
2016/12/08 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
[02:02:38]VG vs Mineski Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python使用functools模块中的partial函数生成偏函数
2016/07/02 Python
Python tkinter模块中类继承的三种方式分析
2017/08/08 Python
Python Pandas找到缺失值的位置方法
2018/04/12 Python
Python Matplotlib库安装与基本作图示例
2019/01/09 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
中学生期中自我鉴定
2014/04/20 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
法律系毕业生求职信
2014/05/28 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
高三语文复习计划
2015/01/19 职场文书
部队个人年终总结
2015/03/02 职场文书
大学入学感言
2015/08/01 职场文书
pandas 实现将NaN转换为None
2021/05/14 Python