用JS控制图片随鼠标移动

<!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;和事件参数对象

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

例如:

时间: 2024-12-28 19:15:37

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

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

此js一般用于控制图片铺满盒子,但是比例不变,并且绝对局中原理:判断图片的高宽与盒子高宽的大小的关系,然后通过比例来控制图片的缩放及定位 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org

js控制图片提示(鼠标滑过显示大图片)

基于jquery <head> <script> $(function(){ var x = 10; var y = 20; $("a.tooltip").mouseover(function(e){ this.myTitle = this.title; this.title = ""; var tooltip = "<div id='tooltip'><img src='"+ this.href +&q

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

已測试兼容 IE6,IE7,IE8,火狐FF,谷歌chrome. 这里使用了jquery插件,假设你不使用jquery,略微改造一下也非常快. 网上查了些资料,用css控制兼容性不好,看去非常揪心.于是找js代码,看了几种写法总是感觉差点什么,算了,还是自己写吧,于是有了以下这个简单的方法,能自己主动依据图片容器大小进行缩放.水平和垂直居中对齐,效果例如以下图: [html] view plaincopy <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.

js 获取div的类及js控制图片垂直居中

js没有document.getElementByClassName 这个方法,只能通过id控制,那就简单的写个方法获取class的方法.代码如下: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>app_details</title> <meta name="description" content="

【JS控制图片显示的大小(图片等比例缩放)】

效果: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="

JS控制图片显示的大小(图片等比例缩放)

http://www.cnblogs.com/xiaochaohuashengmi/archive/2010/06/01/1749571.html Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo

js控制图片onload 批量设置内容下所有图片的等比例压缩

调用时用  AddImgClickEvent("content",500)   就可以了. <script type="text/javascript"> function AddImgClickEvent(str,width) { var objs = document.getElementById(str).getElementsByTagName("img"); for(var i=0;i<objs.length;i++)

js鼠标控制图片的特效,滚轮控制放大、缩小、鼠标拖动、聚焦。。。

项目需要做一个js控制图片的特效,滚轮控制放大.缩小.鼠标拖动等效果,网上找方法,各种报错.不兼容...最终自己研究出一套方案如下: 代码直接从项目中拷了,就不整理格式了 <script type="text/javascript"> //图片特效 by jifei_mei //图片大小,记录放大或缩小图片前的大小 var pic_size = { width:0, height:0 }; //绑定滚轮滚动事件 if (window.addEventListener) {

jquery版相片墙(鼠标控制图片聚合和散开)

原文:jquery版相片墙(鼠标控制图片聚合和散开) 照片墙,简单点说就是鼠标点击小图片时,聚合变成一张大图片:点击大图片时,散开变成小图片.这个是我一年前无意间看到的动画效果(现在已经忘记是哪位大神制作的了,引用了他的图片),刚看到这个很炫的动画超级激动,哇!怎么可以这么牛!我制作出来的没那边炫,但是还是制作出来了,算是对我的一种激励!希望能有碰到问题就要解决它的精神,即使不是现在但会是不久的将来! 一.演示效果 散开状态: 聚合状态: 二.html代码 <div class="box&