<!DOCTYPE html>
<html>
<head>
<title>duisgf</title>
<meta charset="utf-8">
<style type="text/css">
#image{
position: relative;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<div>
<img src="flowers.jpg" id="image">
</div>
</body>
</html>
<script type="text/javascript">
var img = document.getElementById("image");
document.onclick = function(event){
var event = event || window.event;
targetX =event.clientX - img.offsetWidth/2;
targetY = event.clientY - img.offsetHeight/2;
}

var leaderX=0;
leaderY=0;
targetX=0;
targetY=0;
setInterval(function(){
leaderX = leaderX + (targetX - leaderX)/10;
leaderY = leaderY + (targetY - leaderY)/10;

img.style.left = leaderX+"px";
img.style.top = leaderY + "px";
},10)
</script>

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

  1. jQuery 图片跟着鼠标动

    html默认鼠标样式改成图片时格式为 .ani 图片跟随鼠标挪动 html <div id="mouseImg"> <img src="images/问 ...

  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. js 图片跟随鼠标移动效果 案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. python :页面布局 ，后台管理页面之左侧菜单跟着滚动条动

    左侧菜单跟着滚动条动 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// ...

  9. 用javascript预加载图片、css、js的方法研究

    预加载的好处可以让网页更快的呈现给用户,缺点就是可能会增加无用的请求(但图片.css.js这些静态文件可以被缓存),如果用户访问的页面里面的css.js.图片被预加载了,用户打开页面的速度会快很多,提 ...

随机推荐

  1. CodeForces 474B（标记用法）

    CodeForces 474B Time Limit:1000MS Memory Limit:262144KB   64bit IO Format:%I64d & %I64u Descript ...

  2. 转：cookie和session（一）——原理

    文章来自于:http://blog.csdn.net/half1/article/details/21645545 一.cookie和session是什么?   cookie是服务器留在客户端中的小文 ...

  3. 转：前端集锦：十款精心挑选的在线 CSS3 代码生成工具

    今天这篇文章向大家推荐十款非常有用的在线 CSS3 代码生成工具,这些工具能够帮助你方便的生成 CSS3 特效.CSS3 是对 CSS 规范的改善和增强,增加了圆角.旋转.阴影.渐变和动画等众多强大的 ...

  4. C语言学习--可变数组

    #ifndef _ARRAY_ #define _ARRAY_ typedef struct { int *array; int size; } Array; //此处定义结构数据类型 Array,虽 ...

  5. 程序自动生成Dump文件（）

    前言:通过drwtsn32.NTSD.CDB等调试工具生成Dump文件, drwtsn32存在的缺点虽然NTSD.CDB可以完全解决,但并不是所有的操作系统中都安装了NTSD.CDB等调试工具.了解了 ...

  6. [项目构建 十三]babasport Nginx负载均衡的详细配置及使用案例详解.

    在这里再次说明下, 这个项目是从网上 找到的一套学习资料, 自己在 空闲时间学习了这些东西. 这里面的code当然会有很多不完善的地方, 但是确实也能学到很多新东西.感谢看过这一些列博文和评论的小伙伴 ...

  7. -_-#【Mac】快捷操作

    快捷键 command + 拖拽 ＝ 剪切option + 拖拽 ＝ 复制command + option + 拖拽 ＝ 快捷方式 command + ］ 前进command + ［ 后退 comma ...

  8. lr11 录制脚本时候，无法自动启动ie,查了网上很多方法都未解决？

    解决办法是把杀毒软件.防火墙都关闭,再重新运行一次,就可以了

  9. UIStackView相关

    从iOS9开始,苹果提供了UIStackView来帮助我们做布局,这玩意儿类似于安卓的线性布局.因为在使用过程中会遇到一些坑,所以写出来供遇到同样问题的人参考.我在这里提供xib和纯代码两种方式创建使 ...

  10. 【COM学习】之一、QueryInterface

    开始先说一句,学习com之前要学好c++ 对象模型. QueryInterface的使用: QueryInterface是IUnknown的一个成员函数,客户可以通过此函数来查询某个组件是否支持某个特 ...