<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <style type="text/css">

       img

       {

           position:fixed;

       }

    </style>

    <script type="text/javascript">

        var picture;

        window.onload=function()

        {

            picture = document.getElementById("picture1");

            window.onmousemove = onMove;

        }

        function onMove(event)

        {

            var x = event.clientX;

            var y = event.clientY;

            picture.style.top = y + "px";

            picture.style.left = x + "px";

        }

    </script>

</head>

<body>

        <img src="Img/1330721580922.gif" id="picture1" />

</body>

</html>

里面主要用到的样式是position:fixed;和事件参数对象

浏览器在调用事件方法时，会创建一个事件参数对象，并将其传入到事件方法中

例如：

用JS控制图片随鼠标移动的更多相关文章

  1. js 控制图片大小核心讲解

    控制图片大小的方法有很多,在本文将为大家详细介绍下使用js实现缩放图片,核心代码如下,感兴趣的朋友可以参考下 缩放图片脚本分享 <!DOCTYPE HTML PUBLIC "-//W3 ...

  2. [css或js控制图片自适应]

    [css或js控制图片自适应]图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢?此个人博客想到了一个 ...

  3. js控制图片自动缩放，实现铺满盒子，不变形，完全局中

    此js一般用于控制图片铺满盒子,但是比例不变,并且绝对局中原理:判断图片的高宽与盒子高宽的大小的关系,然后通过比例来控制图片的缩放及定位<!DOCTYPE html PUBLIC "- ...

  4. JS控制SVG缩放+鼠标控制事件

    话不多说,直接上代码吧,不行你砍我... <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  5. JS实现图片跟随鼠标移动

    在实现这个特效之前,需要了解JS中一个对象,event(事件对象),对,只需了解这一个对象.它的方法属性我不多说了,想详细了解的童鞋点击这里. 我们用到的只有这个对象的两个属性,clientX与cli ...

  6. js控制图片缩放、水平和垂直方向居中对齐

    已測试兼容 IE6,IE7,IE8,火狐FF,谷歌chrome. 这里使用了jquery插件,假设你不使用jquery,略微改造一下也非常快. 网上查了些资料,用css控制兼容性不好,看去非常揪心.于 ...

  7. js控制图片放大缩小的简易版

    js代码: function bb_img_onmousewheel(e, o) { var zoom = parseInt(o.style.zoom, 10) || 100; zoom += eve ...

  8. JS控制图片显示的大小（图片等比例缩放）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. JS控制图片拖动 放大 缩小 旋转 支持滚轮放大缩小 IE有效

    <html> <head>     <title>图片拖动,放大,缩小,转向</title> <script type="text/ja ...

随机推荐

  1. ios5 中文键盘高度变高覆盖现有ui问题的解决方案（获取键盘高度的方法）（转载）

    背景: ios5之前,iphone上的键盘的高度是固定为216.0px高的,中文汉字的选择框是悬浮的,所以不少应用都将此高度来标注键盘的高度(包括米聊也是这么做的). 可是在ios5中,键盘布局变了, ...

  2. 黄聪：查看mysql数据库真正的data目录

    终于找到了mysql数据库data目录在哪里! 用show variables like 'datadir',可查看真正的data目录 原文:http://blog.csdn.net/dmz1981/ ...

  3. 黄聪：wordpress中remove_action、add_action、 do_action()的hook钩子都有哪些

    原文地址:http://codex.wordpress.org/Plugin_API/Action_Reference muplugins_loaded After must-use plugins ...

  4. OpenCV中Delaunay三角网算法例子

    #include <opencv2/opencv.hpp> #include <vector> using namespace cv; using namespace std; ...

  5. Oracle Erp常用网站

    2014-01-01 Created By BaoXinjian

  6. CE_现金预测详解（案例）

    2014-07-14 Created By BaoXinjian

  7. CE_现金模组基本概念（概念）

    2014-07-12 Created By BaoXinjian

  8. HDU 2087 剪花布条（KMP，不可重叠重复子串）

    给KMP传的数组一定要从0开始!! 显然,我们要先把模式串放到前面,之后主串放后面,中间隔开,这样就可以根据前缀数组的性质来求了. 这题和我上一篇博客类似,只不过不可重叠,我看了数据范围不大,所以就开 ...

  9. 2.Could not open Selected VM debug port (8700). Make sure you do not have another instance of DDMS or of the eclipse plugin running

    在eclipse.ini配置文件最后加上:-Djava.net.preferIPv4Stack=true 其他类似

  10. JAVA 静态成员 static

    static关键字 一.作用:是一个修饰符,用于修饰成员(成员变量,成员方法)1.被static 修饰后的成员变量只有一份2.当成员被static修饰之后,多了一种访问方式,除了可以被对象调用之外还可 ...