在浏览器中移动图像元素

时间:2012-04-23 16:29:35

标签: javascript html5 css3 javascript-events javascript-framework

我正在使用UIZE JavaScript框架在div中移动图像元素。这是正常运作。

我想让这个功能做另外两件事。

  1. 如果用户将图像拖出界限,或者根本不允许用户将其拖出边界,则自动重置图像的位置。

  2. 如果用户将图像拖到示例页面上的预定义位置“绿框”:www.marklaurel.com/sample.php 我想显示一个div,询问用户是否想访问相应图片的网站。

  3. 我有一个当前由按钮触发的功能。

       <script type="text/javascript">
        function snapBack()
        {
            with (document)
           {
            getElementById('logoUize').style.left = '133';
            getElementById('logoUize').style.top = '6';
            getElementById('logoPsd').style.left = '240';
            getElementById('logoPsd').style.top = '60';
            getElementById('logoAfx').style.left = '240';
            getElementById('logoAfx').style.top = '206';
            getElementById('logoMaya').style.left = '130';
            getElementById('logoMaya').style.top = '237';
            getElementById('logoHtml5').style.left = '22';
            getElementById('logoHtml5').style.top = '194';
            getElementById('logoCss3').style.left = '22';
            getElementById('logoCss3').style.top = '48';
        }
         }
         </script>
    

    但是,我从浏览器控制台收到此警告:

    Warning: Error in parsing value for 'left'.  Declaration dropped.
    Source File: http://marklaurel.com/sample.php
    Line: 0
    
    Warning: Error in parsing value for 'top'.  Declaration dropped.
    Source File: http://marklaurel.com/sample.php
    Line: 0
    

    我可以帮助你解决这个问题吗?

    提前致谢, 标记

2 个答案:

答案 0 :(得分:2)

133不是有效的CSS位置。您需要133px或其他单位,例如133em

(别担心,几年前我犯了这个错误然后想知道为什么我的网站只在IE中工作:P)

答案 1 :(得分:1)

此错误消息来自element.style.left = 'XX';并非浏览器所期望的事实。你必须说XX是什么单位。为此,您将使用element.style.left = 'XXpx'element.style.left = 'XXem'或任何其他单位。

有关可用单位的详细信息,请参阅the spec

相关问题