<!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. 移动端html5重力感应

    下面是测试案例,只测试过itouch,iphone http://06wjin.sinaapp.com/billd/     http://06wjin.sinaapp.com/billd/test. ...

  2. linux 命令——PS命令

    首先要明白什么是进程进程是一个正在运行的程序.也就是说在Linux系统上运行的所有东西都是进程.和进程相比较,作业是一系列按一定顺序执行的命令.一条简单的命令可能会涉及多个进程,尤其是当使用管道和重定 ...

  3. JQuery学习笔记【CSS选择符】--02

    Jquery的程序入口: <html> <head> <title></title> <script type="text/javasc ...

  4. Python新手学习基础之数据结构-对数据结构的认知

    什么是数据结构? 数据结构是指:相互之间存在着一种或多种关系的数据元素的集合和该集合中数据元素之间的关系组成. 举个列子来理解这个数据结构: 数据可以比作是书本, 数据结构相当于书架,书存放在书架上, ...

  5. 如何利用PowerPoint2013制作阶梯流程图？

    制作阶梯流程图有哪些窍门呢?下面我们一起来看看吧: ①启动PowerPoint2013,单击菜单栏--插入--形状,选择方角矩形,在图中画出来. ②画好矩形,摆放到合适的位置,如下图所示. ③然后再次 ...

  6. Linux 下 将使用Python-Django开发的web应用布置到服务器上(亲测有效)

    写在前面: Django是一个卓越的新一代Web框架,相信使用Python的人对此并不陌生,但将我们完成的web应用布置到到服务器上并不是一件容易的事情. Django详细的教程可以参考http:// ...

  7. 【PRO ASP.NE MVC4 学习札记】使用Moq辅助进行单元测试

    清楚问题所在: 先开个头,当我们对A进行单元测试时,可能会发现A的实现必须要依赖B.这时,我们在写单元测试时,就必须先创建B的实例,然后把B传给A再建立A的实例进行测试. 这样就会出现一些问题: 1. ...

  8. 如何改变dreamweaver的编码方式

  9. EGE图形库配置（Dev-C++ 5.10 , TDM GCC 4.8.1）

    准备工作:1>Dev-C++ 5.10版本    系统 Win XP/WIN 7 2>下载EGE图形库“ege-13.04.02-full” !,关于本次配置的Dev-C++的信息见如: ...

  10. Expanding Rods

    http://poj.org/problem?id=1 #include<cstdio> #include<cstring> #include<cmath> #in ...