案例：图标跟着鼠标飞(有bug)

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>title</title>

  <style>

    img {

      position: absolute;

    }

  </style>

</head>

<body>

  <img src="data:images/tianshi.gif" alt="" id="im">

  <script src="common.js"></script>

  <script>

    //鼠标在页面中移动,图片跟着鼠标移动

    document.onmousemove = function (e) {

      //鼠标的移动的横纵坐标

      //可视区域的横坐标

      //可视区域的纵坐标

      my$("im").style.left = e.clientX + "px";

      my$("im").style.top = e.clientY + "px";

    };

  </script>

</body>

</html>

JS---案例：图标跟着鼠标飞(有bug)的更多相关文章

  1. JS---案例：图片跟着鼠标飞的最终版本

    案例:图片跟着鼠标飞的最终版本 换了个好看的糖果照片,想给博客首页加上,但是加上后,应该是overwrite原来的html,所以光有鼠标跟着飞的效果,原来的功能都不能用了 放入common.js &l ...

  2. js 小野人跟着鼠标移动

    <!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  3. [读码][js,css3]能感知鼠标方向的图片遮罩效果

    效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...

  4. JS——事件详情（鼠标事件：clientX、clientY的用法）

    鼠标位置 >可视区位置:clientX.clientY 跟着鼠标移动的div案例 代码如下图:   这个案例,运用到前一篇文章中的event事件来处理.获取div的left和top值,当鼠标移动 ...

  5. js案例之使用正则表达式进行验证数据正确性

    #js案例之使用正则表达式进行验证数据正确性 代码上传至 "GitHub" 样例: <tr> <td>密码:</td> <td> & ...

  6. 利用snowfall.jquery.js实现爱心满屏飞

    小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...

  7. JS打造的跟随鼠标移动的酷炫拓扑图案

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. js实现自己定义鼠标右键-------Day45

    又是周末了,只是事实上这在国外应该算是一周的開始吧,无论怎么说,今天是在歇息,放松我紧绷的神经,放松我有些疲惫的精神,昨晚上要裂了般的头疼,仿佛全部的数据都在脑子字面飞舞旋转,伴着一阵阵的恶心,当时把 ...

  9. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

随机推荐

  1. JavaScript笔记二

    1.表格 - 在网页中可以通过表格来表示一些格式化的数据 - 表格相关的标签 - <table> 用来创建一个表格 - <tr> 表示表格中的一行 - <th> 表 ...

  2. java struts2 debug

    出了一堆bug 改的顺序和哪个起了作用不太记得了 下面列出遇到问题的顺序:1java.lang.NoSuchMethodException:没这个方法 代码是改正后的,出错的时候保证class ,ac ...

  3. Error : Program type already present: android.support.design.widget.CoordinatorLayout$

    背景 因为公司一个app项目需要扩展,因为功能较多且较完整的流程与业务,而且和以前的业务关系不大,所以我整合到了 另外一个分包中(代号:newFunc,请注意是代号)进行依赖. 当我写完这部分业务开始 ...

  4. 为什么坚果云Markdown值得使用？

    值得使用说明是被认为有价值的,值得有两种意思的解释:1.有价值,有意义:2.价钱合适,合算:那么坚果云Markdown是否是人们值得使用的呢?下面就来看看坚果云Markdown到底是什么?为什么值得使 ...

  5. EFK教程(4) - ElasticSearch集群TLS加密通讯

    基于TLS实现ElasticSearch集群加密通讯 作者:"发颠的小狼",欢迎转载 目录 ▪ 用途 ▪ ES节点信息 ▪ Step1. 关闭服务 ▪ Step2. 创建CA证书 ...

  6. 华为云 AI 实战营计划，带你迈上 AI 之路

    当今,AI的开发人才需求呈现极大的供需不平衡.所有开发者都关心,要如何从一名开发者晋升为AI开发者?AI开发能力,是主要的进入障碍.不用慌,华为云推出了 <华为云ModelArts-Lab AI ...

  7. 【如何让代码变“高级”(二)】-这样操作值得一波666（Java Stream）（这么有趣）

    [如何让代码变“高级”(二)]-这样操作值得一波666(Java Stream)(这么有趣) 开发中的代码 在开发中的代码是不是很常见这样的代码: 这样的? for循环取元素取值 List<Us ...

  8. NumPy 学习 第三篇：矢量化和广播

    矢量化 矢量化是指用数组表达式替换显式的for循环.在Python中循环数组或其他跟数组类似的数据结构时,使用循环会涉及很多开销.NumPy中的矢量化操作把内部循环委托给高度优化的C和Fortran函 ...

  9. iOS开发之压缩与解压文件

    ziparchive是基于开源代码”MiniZip”的zip压缩与解压的Objective-C 的Class,使用起来非常的简单 方法:从http://code.google.com/p/ziparc ...

  10. Word表格斜线怎么弄？这里有三种方法很实用

    有些时候我们也会在Word文档中插入表格,因为这样可以准确的表达出文档中的内容.大家应该都知道Excel表格斜线怎么弄,那么Word表格斜线怎么弄吗?今天呢小编就帮大家总结了三种方法哦,有需要的小伙伴 ...