<!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手机开发——滚动和惯性缓动

    1. 滚动 以下是三种实现方式: 1) 利用原生的css属性 overflow: scroll div id= parent style = overflow:scroll; divid='conte ...

  2. Lang语言包

    \languages\zh_cn\admin\common.php里配置后台所有常量

  3. jQuery获取JSON格式数据方法

    getJSON方法: jQuery.getJSON(url,data,success(data,status,xhr)) $("button").click(function(){ ...

  4. python3数据类型--数字

    数字 Python数字数据类型用于存储数值.数字数据类型是不允许改变的,所以如果改变数字数据类型的值,将重新分配内存空间. 以下实例在变量赋值时Number对象被创建: #!/usr/bin/env ...

  5. codeforces 305E Playing with String

    刚开始你只有一个字符串每次能选择一个有的字符串s,找到i,满足s[i - 1] = s[i + 1],将其分裂成3 个字符串s[1 ··  i - 1]; s[i]; s[i + 1 ·· |s|] ...

  6. C# 代码 设置 前台 页面 JS提示

    方法1: Page.ClientScript.RegisterStartupScript(this.GetType(), "", "<script>alert ...

  7. java 代码格式（转）

    //转至博客:http://developer.51cto.com/art/201202/320317.ht /** * Java编码格式个人推荐,参考JDK源码和Hyperic HQ源码(原spri ...

  8. 百度地图LBS云平台读写数据操作类

    最近写了个叫<行踪记录仪>的手机软件,用了百度云来记录每个用户的最近位置,以便各用户能在地图上找到附近的人,为此写了个类来读写数据,大致如下: import java.util.Array ...

  9. 转：Hprose for php(三)——客户端

    文章来自于:http://blog.csdn.net/half1/article/details/21329785 本文将介绍Hprose for php客户端的更多细节. 1.直接通过远程方法名进行 ...

  10. 将excel里面的数据导入到程序里面

    页面布局 <table> <tr> <td style="padding-top: 16px; padding-left: 36px;"> &l ...