| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 851 人关注过本帖
标题:图片跟随鼠标移动问题
只看楼主 加入收藏
zhuxuanzhu
Rank: 1
等 级:新手上路
帖 子:12
专家分:3
注 册:2011-2-21
结帖率:100%
收藏
 问题点数:0 回复次数:9 
图片跟随鼠标移动问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
<html xmlns="http://www.
<head>
    <title></title>
    <script type="text/javascript">
        document.onmousemove = function () {
            var x = event.clientX;
            var y = event.clientY;
            var div1 = document.getElementById("div1");
            if (!div1) {
                return;
            }
            document.getElementById("xxx").value = x;
            document.getElementById("yyy").value = y;
            //image1.style.position = "absolute";
            div1.style.top = y;  //左上角的坐标
            div1.style.left = x;
        }
    </script>
</head>
<body>
    <div id="div1" >
        <img alt="kaora" title="kaora" src="1.jpg" id="image1"  /><br />
    hello
    </div>
    <br />
    <div>
        <input type="text" id="xxx" /><br />
        <input type="text" id="yyy" />
    </div>
</body>
</html>

上面是源代码,我发现鼠标移动的时候,text标签里的值是跟着改变的,但是图片怎么也不动。。。求高手解释。。

[ 本帖最后由 zhuxuanzhu 于 2011-3-3 14:18 编辑 ]
搜索更多相关主题的帖子: javascript function PUBLIC 图片 
2011-03-03 14:17
zhuxuanzhu
Rank: 1
等 级:新手上路
帖 子:12
专家分:3
注 册:2011-2-21
收藏
得分:0 
问题在IE9上···不知道为什么,IE8包括以下的版本都可以移动图片,但是IE9只是获取了坐标值,却无法移动图片。。。。
2011-03-03 14:50
aspic
Rank: 17Rank: 17Rank: 17Rank: 17Rank: 17
等 级:贵宾
威 望:51
帖 子:2258
专家分:8050
注 册:2008-2-18
收藏
得分:0 
没有IE9 无法测试
2011-03-03 16:58
aspic
Rank: 17Rank: 17Rank: 17Rank: 17Rank: 17
等 级:贵宾
威 望:51
帖 子:2258
专家分:8050
注 册:2008-2-18
收藏
得分:0 
你可以给div1设置一个背景颜色或者边框看看
然后div1.style.position = "absolute";
2011-03-03 16:59
zhuxuanzhu
Rank: 1
等 级:新手上路
帖 子:12
专家分:3
注 册:2011-2-21
收藏
得分:0 
回复 4楼 aspic
我有设定div的style.positio为absolute的,加了边框,还是没用,IE9,chrome 9都没用。。
2011-03-04 09:47
aspic
Rank: 17Rank: 17Rank: 17Rank: 17Rank: 17
等 级:贵宾
威 望:51
帖 子:2258
专家分:8050
注 册:2008-2-18
收藏
得分:0 
程序代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. xmlns="http://www. <title></title>
    <script type="text/javascript">
        document.onmousemove = function (evt) {
            var e = evt || window.event;
            var x = e.clientX;
            var y = e.clientY;
            var div1 = document.getElementById("div1");
            if (!div1) {
                return;
            }
            document.getElementById("xxx").value = x;
            document.getElementById("yyy").value = y;
            div1.style.position = "absolute";
            div1.style.top = y + 'px';  //左上角的坐标
            div1.style.left = x + 'px';
        }
    </script>
</head>
<body>
    <div id="div1" >
        <img alt="kaora" title="kaora" src="1.jpg" id="image1"  /><br />
    hello
    </div>
    <br />
    <div>
        <input type="text" id="xxx" /><br />
        <input type="text" id="yyy" />
    </div>
</body>
</html>
IE9不知道 但是chrome9跟FF肯定是没问题的
2011-03-04 10:33
gupiao175
Rank: 16Rank: 16Rank: 16Rank: 16
等 级:版主
威 望:40
帖 子:1787
专家分:7527
注 册:2007-6-27
收藏
得分:0 
估计IE9学了火狐,第16行,也需要多加一个‘PX’才可以, div1.style.top = y + 'px';  //左上角的坐标

不过IE9已经和火狐很接近了,基本完全符合W3C标准。支持CSS3,所以IE6都没问题了。那IE9更好说话。一般火狐可以的,IE9肯定也可以!

Q:1428196631,百度:开发地 即可找到我,有事请留言!
2011-03-04 11:13
zhuxuanzhu
Rank: 1
等 级:新手上路
帖 子:12
专家分:3
注 册:2011-2-21
收藏
得分:0 
回复 6楼 aspic
发现了哪里错了,坐标要加上"px"变成字符串付给x,y,以前IE8,IE7什么的对标准支持不够,所以不加px也可以移动。
2011-03-04 11:16
zhuxuanzhu
Rank: 1
等 级:新手上路
帖 子:12
专家分:3
注 册:2011-2-21
收藏
得分:0 
回复 7楼 gupiao175
嗯!的确是这样,加个"px"就可以了
2011-03-04 14:41
程海之源
Rank: 1
等 级:新手上路
帖 子:2
专家分:0
注 册:2011-3-7
收藏
得分:0 
按w3c标准是要有单位的。中间还不能有空格,空了也不能识别
2011-03-07 13:00
快速回复:图片跟随鼠标移动问题
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.035674 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved