<!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. ubantu-命令-进入超级用户

    sudo su; 建立文件夹 mkdir ulike_work;

  2. PAT - IO - 螺旋方阵

    所谓“螺旋方阵”,是指对任意给定的N,将1到N*N的数字从左上角第1个格子开始,按顺时针螺旋方向顺序填入NxN的方阵里.本题要求构造这样的螺旋方阵. 输入格式: 输入在一行中给出一个正整数N(< ...

  3. Rotate List 面试题

    今天做了leetcode的Rotate List,刚开始头脑不清楚,写的乱七八糟的,后来改了下,提交了,能过,把代码贴出来. 做题的时候头脑要清楚,我刚开始做完的时候才发现我把向左向右移动弄反了,后来 ...

  4. iOS程序-UIScrollView的基本使用

    iOS程序-UIScrollView的基本使用 scrollView的几个属性contentSize contentOffset contentInset 1.不能向上滑动很可能是因为contentS ...

  5. Solr4.8.0源码分析(1)之Solr的Servlet

    Solr是作为一个Servlet运行在Tomcat里面的,可以查看Solr的web.xml. 1.web.xml配置 由web.xml可以看出,基本上所有Solr的操作都是在SolrDispatchF ...

  6. 转：So Easy！让开发人员更轻松的工具和资源

    Cascade Framework 很独特的 CSS 框架,进行了模块化划分,分类排版.表格.颜色.图标和打印样式等等. Mueller Grid System 一个模块化的网格系统,用于响应式或者固 ...

  7. The first time

    早上起来发现昨晚申请的博客开通了,\(^o^)/~纪念下,就像刚打代码学的hello world一样,用c,c++写一个程序纪念下.O(∩_∩)O~哈哈哈哈哈. /*C hello world程序*/ ...

  8. Info

    http://www.zhangchenghui.com/apple/1955.html http://www.36kr.com/p/133835.html http://news.163.com/1 ...

  9. QT 设置SizePolicy的例子（简单明了）

    http://hi.baidu.com/cybertingred/item/e8eadaad0c7f62f615329be7   QPushButton *left = new QPushButton ...

  10. Delphi图像处理控件

    Envision Image Library (Full Sources for D7 to D10-Seattle) v3.08http://www.intervalsoftware.com/env ...