案例：图标跟着鼠标飞(有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. Linux LVM 配置

    本文出自 “www.kisspuppet.com” 博客,请务必保留此出处http://dreamfire.blog.51cto.com/418026/1084729 许多Linux使用者安装操作系统 ...

  2. 我的第一个python web 开发框架

    1:数据库结构设计与创建 小白做好前端html设计后,马上开始进入数据库结构设计步骤. 在开始之前,小白回忆了一下老大在公司里培训时讲过的数据库设计解说: 对于初学者来说,很多拿到原型时不知道怎么设计 ...

  3. C语言基础——进制转换 / 数据表示

    第一部分:进制转换 二进制:由0~1构成,逢2进1 八进制:由0~7构成,逢8进1 十六进制:由0~9.A~F构成,逢16进1 两个基本概念 基数:n进制基数为n 123.4 = 1*10^2 + 2 ...

  4. java中的基本数据类型转换

    Java 中的 8 种基本数据类型,以及它们的占内存的容量大小和表示的范围,如下图所示: 重新温故了下原始数据类型,现在来解释下它们之间的转换关系. 自动类型转换 自动类型转换是指:数字表示范围小的数 ...

  5. Maven设置http代理

    背景:有时候公司处于安全因素的考虑,需要通过代理访问因特网,这种情况需要为Maven设置htpp代理 设置步骤如下: 1 首先确认自己无法访问外网公共的中央仓库(可通过ping repo1.maven ...

  6. Maven安装目录分析

    maven目录结构介绍 bin: 包含了mvn运行的脚本(既在cmd输入命令执行依赖,在命令行输入任何一条mvn命令时,实际上就是在调用这些脚本) boot: 该目录只包含一个文件,是一个类加载器,m ...

  7. Android Binder机制介绍

    做过Android开发的同学可能有些体会,入门初期,工作内容主要是实现各式各样的UI界面,以及实现应用的业务逻辑.在这个阶段,我们会逐渐熟悉View系统,逐渐学会实现各种各样的界面以及动画效果.再往后 ...

  8. surfer白化

    surfer白化的方法: 方法一: 1.griddata需白化的文件(surfer处理成grd格式,也就是surfer绘图的基本数据格式) 注意:用surfer转换格式时,插值间距(spacing)大 ...

  9. centos7安装samba

    samba是一个实现smb协议的开源软件,为局域网内的不同计算机之间提供文件和打印机共享服务. 1.安装yum groupinstall “file-server” -y 2.配置cp /etc/sa ...

  10. Chapter 07-Basic statistics(Part2 Frequency and contingency tables)

    这一部分使用在vcd包中的Arthritis数据集. > library(vcd) 载入需要的程辑包:MASS 载入需要的程辑包:grid 载入需要的程辑包:colorspace > he ...