<!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. 关于jQuery表单校验的应用

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  2. javascript特殊运算符(in,instanceof,typeof,delete,void,逗号)

    in运算符                 in运算符要求其左边的运算数是一个字符串,或可以被转换为字符串,右边的运算数十一个对象或数组.如果该 运算符左边的值是右边对象的一个属性名,则返回true, ...

  3. wamp虚拟机配置

    1.找到httpd.conf 里面:找到 # Virtual hosts 开启虚拟机Include conf/extra/httpd-vhosts.conf 2  编辑httpd-vhosts.con ...

  4. SQL Server分区动态生成脚本（三）（按年份划分）

    --生成分区脚本DECLARE @DataBaseName NVARCHAR(50)--数据库名称DECLARE @TableName NVARCHAR(50)--表名称DECLARE @Column ...

  5. 一个jpa动态模糊查询的实现

    最近一直在是用spring data jpa,使用起来确实方便,如果是单表的操作基本上通过方法名都可以实现,下面是一个 Specification 实现动态模糊查询的例子这个查询是通过JpaSpeci ...

  6. Linux下查看进程(程序)启动时的环境变量

    背景: 因最近试安装Linux下的jira,有一个中文插件安装后,一旦设置开机启动后,它是英文,而在终端再重新启动一次后呢,似乎插件生效,它又恢复为正常中文界面,我首先想这这涉及到一个环境变量的问题, ...

  7. 【转】HashMap和HashSet的区别

    原文网址:http://www.importnew.com/6931.html HashMap和HashSet的区别是Java面试中最常被问到的问题.如果没有涉及到Collection框架以及多线程的 ...

  8. 实现字符串匹配的KMP算法

    KMP算法是Knuth-Morris-Pratt算法的简称,它主要用于解决在一个长字符串S中匹配一个较短字符串s. 首先我们从整体来把我这个算法的思想. 字符串匹配的朴素算法: 我们容易想到朴素算法, ...

  9. Spark on YARN的两种运行模式

    Spark on YARN有两种运行模式,如下 1.yarn-cluster:适合于生产环境.        Spark的Driver运行在ApplicationMaster中,它负责向YARN Re ...

  10. java笔记11之二维数组

    格式1: 二维数组:就是元素为一维数组的一个数组 数据类型[][] 数组名 = new 数组类型[m][n] 其中m为行 n为列 注意: A:以下格式也可以表示二维数组            a:数据 ...