基于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 控制非法字符的输入代码
Dec 04 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
Dec 19 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
Nov 23 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
js给网页加上背景音乐及选择音效的方法
Mar 03 Javascript
整理Javascript基础语法学习笔记
Nov 29 Javascript
深入理解vue路由的使用
Mar 24 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
Jul 31 Javascript
vue将后台数据时间戳转换成日期格式
Jul 31 Javascript
在vue中使用echarts(折线图的demo,markline用法)
Jul 20 Javascript
Vue使用轮询定时发送请求代码
Aug 10 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 高级课程笔记 面向对象
2009/06/21 PHP
php自定义函数截取汉字长度
2014/05/15 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
2013/08/07 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
2017/01/17 Javascript
vue如何引用其他组件(css和js)
2017/04/13 Javascript
vue filters的使用详解
2018/06/11 Javascript
vue绑定事件后获取绑定事件中的this方法
2018/09/15 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
js实现飞机大战游戏
2020/08/26 Javascript
如何在 Vue 中使用 JSX
2021/02/14 Vue.js
python写xml文件的操作实例
2014/10/05 Python
python用10行代码实现对黄色图片的检测功能
2015/08/10 Python
使用Python求解最大公约数的实现方法
2015/08/20 Python
Python 元类实例解析
2018/04/04 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
Python中字符串List按照长度排序
2019/07/01 Python
Python OpenCV 使用滑动条来调整函数参数的方法
2019/07/08 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
Python实现扫码工具的示例代码
2020/10/09 Python
python palywright库基本使用
2021/01/21 Python
HTML5 History API 实现无刷新跳转
2016/01/11 HTML / CSS
html5给汉字加拼音加进度条的实现代码
2020/04/07 HTML / CSS
办公室主任岗位职责
2013/11/08 职场文书
《雨点》教学反思
2014/02/12 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
爱鸟护鸟的宣传语
2015/07/13 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python
python字符串的一些常见实用操作
2022/04/06 Python