<!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. 使用NSOperation使用，创建线程中传递多个参数

    参考:http://blog.csdn.net/dqjyong/article/details/7677557 参考:http://stackoverflow.com/questions/232761 ...

  2. event 关键字

    event(C# 参考) event 关键字用于在发行者类中声明事件.下面的示例演示如何声明和引发将 EventHandler 用作基础委托类型的事件. C# public class SampleE ...

  3. C# 理解lock

    本文为转载 .. 一. 为什么要lock,lock了什么? 当我们使用线程的时候,效率最高的方式当然是异步,即各个线程同时运行,其间不相互依赖和等待.但当不同的线程都需要访问某个资源的时候,就需要同步 ...

  4. 在Java中使用Memcached(转)

    memcache的Java客户端调用,在网上还是有些少,很多都是php的.如何要想用Java调用memcache的服务,首先要有客户端的支持,我们先下载一个客户端吧.下载地址:https://gith ...

  5. sql语句（mysql）

    MySQL1.数据库数据类型 int 整型 double 浮点型 如double(5,2)最多5位,其中有两位小数 char:固定长度字符串,如char(255),数据长度不足会用空格补足 varch ...

  6. Java利用MessageDigest提供的MD5算法加密字符串或文件

    MD5是常用的加密算法,也经常用于校验信息完整,如文件的完整性.用术语讲,MD5是一种消息摘要算法(Message Digest Algorithm).另外还有一种常用的消息摘要算法SHA1.如果想了 ...

  7. QRCode.jar生成二维码

    参考http://www.oschina.net/code/snippet_2252392_45457 package com.ORcode; import java.awt.image.Buffer ...

  8. codeforces 285 D. Permutation Sum 状压 dfs打表

    题意: 如果有2个排列a,b,定义序列c为: c[i] = (a[i] + b[i] - 2) % n + 1 但是,明显c不一定是一个排列 现在,给出排列的长度n (1 <= n <= ...

  9. 关于java MulticastSocket中的joinGroup(SocketAddress mcastAddr,NetworkInterface netif)

    今天复习了一下java网络编程这方面(其实是之前没有学好),之前在linux下用c来做过一些例子,不过不好久没有用也就忘得一干二净了.不知道c/c++的东西不太好记,还是当初没好好学. 关于组播这方面 ...

  10. 帝国cms常用变量总结

    一.常用变量 当前栏目ID $GLOBALS['navclassid'] 当前父栏目ID $class_r[$cid]['bclassid'] 栏目路径 $class_r[栏目ID]['classpa ...