基于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 相关文章推荐
基于jQuery制作迷你背词汇工具
Jul 27 Javascript
自制基于jQuery的智能提示插件一枚
Feb 18 Javascript
javascript开发技术大全-第3章 js数据类型
Jul 03 Javascript
第五篇Bootstrap 排版
Jun 21 Javascript
JS排序之冒泡排序详解
Apr 08 Javascript
深入理解vue2.0路由如何配置问题
Jul 18 Javascript
JavaScript实现区块链
Mar 14 Javascript
JS中的事件委托实例浅析
Mar 22 Javascript
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
微信小程序scroll-view实现字幕滚动
Jul 14 Javascript
微信小程序中遇到的iOS兼容性问题小结
Nov 14 Javascript
vue-cli设置css不生效的解决方法
Feb 07 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实现图片上传并进行替换操作
2016/03/15 PHP
php实现登录页面的简单实例
2019/09/29 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
js函数调用常用方法详解
2012/12/03 Javascript
jquery和javascript的区别(常用方法比较)
2013/07/04 Javascript
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
jQuery基本过滤选择器用法示例
2016/09/09 Javascript
javascript轮播图算法
2016/10/21 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
2017/01/19 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
2017/05/07 Javascript
Angular.JS中select下拉框设置value的方法
2017/06/20 Javascript
jQuery常见的遍历DOM操作详解
2018/09/05 jQuery
Layer+Echarts构建弹出层折线图的方法
2019/09/25 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
Django数据库操作的实例(增删改查)
2017/09/04 Python
详解python的ORM中Pony用法
2018/02/09 Python
Python get获取页面cookie代码实例
2018/09/12 Python
Python变量访问权限控制详解
2019/06/29 Python
Django中提示消息messages的设置方式
2019/11/15 Python
python中的split、rsplit、splitlines用法说明
2020/10/23 Python
appium+python自动化配置(adk、jdk、node.js)
2020/11/17 Python
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
瑜伽国际:Yoga International
2018/04/18 全球购物
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
采购主管岗位职责
2014/02/01 职场文书
协议书样本
2014/04/23 职场文书
小学雷锋月活动总结
2014/07/03 职场文书
医生行业员工的辞职信
2019/06/24 职场文书
青年人初次创业的“五不要”
2019/08/23 职场文书
导游词之吉林吉塔
2019/11/11 职场文书