基于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使用数组的push方法完成快速排序
Sep 15 Javascript
Jquery实现鼠标移动放大图片功能实例
Mar 25 Javascript
AngularJS中的过滤器使用详解
Jun 16 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
Dec 10 Javascript
原生JavaScript实现瀑布流布局
Jun 28 Javascript
js实现简单的二级联动效果
Mar 09 Javascript
jQuery中table数据的值拷贝和拆分
Mar 19 Javascript
常见的浏览器Hack技巧整理
Jun 29 Javascript
Vuejs 单文件组件实例详解
Feb 09 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 Javascript
angular inputNumber指令输入框只能输入数字的实现
Dec 03 Javascript
解决vue字符串换行问题(绝对管用)
Aug 06 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
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
转换中文日期的PHP程序
2006/10/09 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
Zend Framework实现Zend_View集成Smarty模板系统的方法
2016/03/05 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
JS实现中国公民身份证号码有效性验证
2017/02/20 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
JS中判断字符串存在和非空的方法
2018/09/12 Javascript
jquery分页优化操作实例分析
2019/08/23 jQuery
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
python操作数据库之sqlite3打开数据库、删除、修改示例
2014/03/13 Python
Python中线程编程之threading模块的使用详解
2015/06/23 Python
Python数据结构与算法之图的最短路径(Dijkstra算法)完整实例
2017/12/12 Python
python多进程中的内存复制(实例讲解)
2018/01/05 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
Python多线程编程之多线程加锁操作示例
2018/09/06 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
python获取Linux发行版名称
2019/08/30 Python
Python json读写方式和字典相互转化
2020/04/18 Python
pytorch 计算ConvTranspose1d输出特征大小方式
2020/06/23 Python
Scrapy-Redis之RedisSpider与RedisCrawlSpider详解
2020/11/18 Python
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
商务英语专业应届毕业生求职信
2013/10/28 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
初中作文评语
2014/12/25 职场文书
小学教师年度个人总结
2015/02/05 职场文书
毕业赠语大全
2015/06/23 职场文书
法制主题班会教案
2015/08/13 职场文书
Redis 报错 error:NOAUTH Authentication required
2022/05/15 Redis