jQuery 图片跟着鼠标动

时间:2022-09-24 12:49:15

html默认鼠标样式改成图片时格式为 .ani

图片跟随鼠标挪动

html

<div id="mouseImg"> <img src="data:images/问奈何.png" alt="问奈何"></div>

jquery:这里就只写了最主要的

 //图片跟着鼠标走
$(document).mousemove(function(e) {
$("#mouseImg").css({
"position": "absolute",
"left": e.pageX + 10,
"top": e.pageY + 10
});
}); //PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化。可以理解为:相对#(0.0)坐标绝对定位
//clientX: 鼠标在页面上可视区域的位置, 从浏览器可视区域左上角开始, 随滑动条移动 而变化。 可以理解为: 相对可视化左上角坐标绝对定位
//screenX:鼠标在屏幕上的位置,从屏幕左上角开始

jQuery 图片跟着鼠标动的更多相关文章

  1. 图片跟着鼠标动js

    <!DOCTYPE html><html><head> <title>duisgf</title> <meta charset=&qu ...

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

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

  3. JQ图片跟着鼠标走

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

  4. Javascript实现让小图片一直跟着鼠标移动

    Javascript实现让小图片一直跟着鼠标移动实例 注意:图片可能加载不出来,注意更换 <!doctype html> <html> <head> <met ...

  5. Javascript实现让图片一直跟着鼠标移动

    Javascript实现让图片一直跟着鼠标移动 注意:图片可能加载不出来,还请及时更换图片 <!doctype html> <html> <head> <me ...

  6. JS---案例:图标跟着鼠标飞&lpar;有bug&rpar;

    案例:图标跟着鼠标飞(有bug) <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  7. jQuery实现的鼠标滑过切换图片代码实例

    jQuery实现的鼠标滑过切换图片代码实例:有时候网页需要这样的简单效果,那就是当鼠标滑过默认图片的时候,能够实现图片的切换,可能在实际应用中,往往没有这么简单,不过大家可以自行扩展一下,下面简单介绍 ...

  8. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C&num;中Trim&lpar;&rpar;、TrimStart&lpar;&rpar;、TrimEnd&lpar;&rpar;的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c&num;中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  9. jquery图片放大插件鼠标悬停图片放大效果

    都知道jquery都插件是非常强大的,最近分享点jquery插件效果,方便效果开发使用. 一.HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

随机推荐

  1. Android保存图片到系统图库

    最近有些用户反映保存图片之后在系统图库找不到保存的图片,遂决定彻底查看并解决下. Adnroid中保存图片的方法可能有如下两种: 第一种是自己写方法,如下代码: public static File ...

  2. 无线端通用的reset样式

    @charset "utf-8"; html, body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, o ...

  3. 用户输入内容转换成Pig Latin形式。

    //(单词的第一个元音字母之前的一道单词后面,以"ay"结尾,英语单词首字母为元音字母或者没有元音字母的以“ay”为后缀.)package toPigLatin; import j ...

  4. sendkeys用法详解

    将一个或多个按键消息发送到活动窗口,就如同在键盘上进行输入一样. 语法 SendKeys string[, wait] SendKeys 语句的语法具有以下几个命名参数: 部分 描述   string ...

  5. 转&colon;linux执行shell脚本的方式及一些区别

    假设shell脚本文件为hello.sh放在/root目录下.下面介绍几种在终端执行shell脚本的方法: [root@localhost home]# cd /root/ [root@localho ...

  6. vs2012中程序集生成无法自动在网站Bin目录下生成Dll文件&quest;&lpar;已解决!&rpar;

    最近,突然发现生成程序集后,网站bin目录下dll没有更新,也没有自动生成dll文件,通过近半个小时的摸索和实验,找到了解决方法: 1.右键网站,不是项目,选择[属性页],在左侧[引用]中如果没有,就 ...

  7. NO-CARRIER

    自己动手写了创建虚拟接口,删除虚拟接口程序,频繁调用创建删除时,有时将接口up起来时会报错: Name not unique on network 利用ip link命令来查看接口(及其对应的索引) ...

  8. 【转】背后的故事之 - 快乐的Lambda表达式(二)

    快乐的Lambda表达式 上一篇 背后的故事之 - 快乐的Lambda表达式(一)我们由浅入深的分析了一下Lambda表达式.知道了它和委托以及普通方法的区别,并且通过测试对比他们之间的性能,然后我们 ...

  9. Shiro 基础教程

    原文地址:Shiro 基础教程 博客地址:http://www.extlight.com 一.前言 Apache Shiro 是 Java 的一个安全框架.功能强大,使用简单的Java安全框架,它为开 ...

  10. git存储用户名与密码

    git config credential.helper store git config --global credential.helper cache ... which tells git t ...