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---案例:图标跟着鼠标飞(有bug)

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

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

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

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

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

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

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

随机推荐

  1. Effective Modern C++ 条款4:掌握查看型别推导结果的方法

    采用何种工具来查看型别推导结果,取决于你在软件开发过程的哪个阶段需要该信息.主要研究三个可能的阶段:撰写代码阶段.编译阶段.运行时阶段. IDE编译器 IDE中的代码编译器通常会在你将鼠标指针选停止某 ...

  2. Spring MVC 搭建web项目示例

    环境为Eclipse 1:新建Dynamic web project  : springMvcDemo 2:下载spring的jar包,把jar包复制到WEB-INF/lib目录下 3.添加配置文件w ...

  3. 汉诺塔III HDU - 2064

    汉诺塔III HDU - 2064   约19世纪末,在欧州的商店中出售一种智力玩具,在一块铜板上有三根杆,最左边的杆上自上而下.由小到大顺序串着由64个圆盘构成的塔.目的是将最左边杆上的盘全部移到右 ...

  4. 3D hover文字特效

    body { font-family: 'Source Sans Pro', Arial, sans-serif; background: #becccc; text-transform: upper ...

  5. Thrift---more efficient transport protocol.

    Thrift  是什么?  Thrift源于大名鼎鼎的facebook之手,在2007年facebook提交Apache基金会将Thrift作为一个开源项目,对于当时的facebook来说创造thri ...

  6. GIT → 03:Git的下载和安装

    3.1 Git 下载 官网:https://git-scm.com/ 软件下载地址:https://git-scm.com/downloads 根据自己电脑版本下载对应版本: 3.2 Git 安装 3 ...

  7. Liferay 7:portlet name

    总结自: https://web.liferay.com/zh/web/user.26526/blog/-/blogs/proper-portlet-name-for-your-portlet-com ...

  8. Mac 下终端命令行之基本命令总结(持续更新)

    最近用Mac做一些开发,用到了一些命令行的内容,先将常用的命令行进行总结.由于会不断的用到新的,所以将会持续的总结进来.每一个命令行的使用可能都会比较复杂,我只会总结最常用的使用方法. echo命令 ...

  9. arcgis几何对象

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. YouTube上最受欢迎的十大机器学习视频(最新)

    2017-05-04 机器之心 选自KDnuggets 作者:Thuy T. Pham 机器之心编译 参与:微胖.黄小天 虽然 YouTube 有很多不错的机器学习视频,但是很难搞清楚是否值得一看,何 ...