案例：图标跟着鼠标飞(有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. nginx 负载均衡简单配置

    配置要求: 三台服务器 127.0.0.1       主负载(把访问请求分给主机池) 127.0.0.2       主机2 127.0.0.3       主机3 第一步: 配置127.0.0.1 ...

  2. python--BMI

    #bmi height,weight = eval(input("请输入身高(m) 体重(kg),以逗号隔开\n")) bmi = weight/pow(weight,2) pri ...

  3. postgresql修改最大连接数配置

    1.查看配置文件位置等信息,用来确定配置对应的配置文件. select setting,boot_val,reset_val,sourcefile,*from pg_settings  where n ...

  4. CentOS 7 网卡 bond 配置

    第一块网卡配置 [root@localhost network-scripts]# cat ifcfg-eth0 TYPE=Ethernet BOOTPROTO=none USERCTL=no DEV ...

  5. while(cin)?

    #include<iostream> #include<utility> using namespace std; int main() { int i; do { cout& ...

  6. 查看/设置JVM使用的垃圾收集器

    一.设置垃圾收集器的参数 -XX:+UseSerialGC,虚拟机在Client模式下的默认值,Serial+Serial Old -XX:+UseParNewGC,ParNew+Serial Old ...

  7. 使用生成对抗网络（GAN）生成手写字

    先放结果 这是通过GAN迭代训练30W次,耗时3小时生成的手写字图片效果,大部分的还是能看出来是数字的. 实现原理 简单说下原理,生成对抗网络需要训练两个任务,一个叫生成器,一个叫判别器,如字面意思, ...

  8. Preact（React）核心原理详解

    原创: 宝丁 玄说前端 本文作者:字节跳动 - 宝丁 一.Preact 是什么 二.Preact 和 React 的区别有哪些? 三.Preact 是怎么工作的 四.结合实际组件了解整体渲染流程 五. ...

  9. Java修炼——面向对象的三大特征_封装的使用

    封装的作用含义:程序设计追求"高内聚,低耦合" 1.提高代码的安全性 2.提高代码的复用性 3."高内聚":封装细节,便于修改内部代码,提高可 维护性 4.&q ...

  10. HDU3247 Resource Archiver (AC自动机+spfa+状压DP)

    Great! Your new software is almost finished! The only thing left to do is archiving all your n resou ...