جافا سكريبت، المغلق، ض مؤشر، التراص شعبة

StackOverflow https://stackoverflow.com/questions/529407

  •  22-08-2019
  •  | 
  •  

سؤال

وأريد لخلق نوع من ضوء مربع / السميك الذي يعمل فقط على DIV احد داخل صفحة. عندما تطلق الألغام قبالة شعبة الأول (phantom_back) يعمل كما أريد ذلك، ولكن الثانية، phantom_top يحدد مصيره بعد phantom_back بغض النظر لها مؤشر ض وتحديد المواقع.

وماذا أفعل الخطأ؟

وهنا هو ما لدي حتى الآن: 

<html>
<head>
    <script type="text/javascript">
    <!--//
        function phantom_back(image)
        {
            document.getElementById('phantom_back').style.zIndex = 100;
            document.getElementById('phantom_back').style.height = '100%';
            document.getElementById('phantom_back').style.width = '100%';
            phantom_top();
        }

        function phantom_top(image)
        {
            document.getElementById('phantom_top').style.zIndex = 102;
            document.getElementById('phantom_top').style.height = 600;
            document.getElementById('phantom_top').style.width = 600;
            document.getElementById('phantom_top').style.top = 0;
            document.getElementById('phantom_top').style.left = 0;
        }
    //-->
    </script>
</head>
<body>
    <a href="#" onclick="phantom_back()">Change</a>

    <div style="height: 700px; width: 700px; border: 2px black solid; margin:0 auto; background-color: red;" id="overlord">
        <div style="height: 10px; width: 10px; position: relative; z-index: -1; background-color: #000000; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;" id="phantom_back"></div>

        <div style="height: 10px; width: 10px; position: relative; z-index: -3; margin: 0 auto; background-color: green;" id="phantom_top">asdf</div>
    </div>

</body>
</html>

وأنا أتجول لماذا لا شيء من الدروس لقد كنت قادرا على العثور على عرض شيء من هذا القبيل.

هل كانت مفيدة؟

المحلول

وهكذا، حصلت عليه. أنا وضعت لتحديد المواقع المطلق على phantom_back وبدلا من محاولة restack لهم أنا مجرد مجموعة الرؤية. عندما حاولت تعيين ض مؤشر فإنه ينهار على لي. 

<html>
<head>
    <script type="text/javascript">
    <!--//
        function phantom_back(image)
            {
                document.getElementById('phantom_back').style.height = 700;
                document.getElementById('phantom_back').style.width = 700;
                document.getElementById('phantom_back').style.zIndex = 50;
                phantom_top();
            }

        function phantom_top()
            {
                document.getElementById('phantom_top').style.height = 600;
                document.getElementById('phantom_top').style.width = 600;
                document.getElementById('phantom_top').style.visibility = "visible";
            }
    //-->
    </script>
</head>
<body>
    <a href="#" onclick="phantom_back()">Change</a>

    <div style="height: 700px; width: 700px; border: 2px black solid; margin:0 auto; background-color: red;" id="overlord">
        <div style="height: 10px; width: 10px; position: absolute; z-index: -1; background-color: #000000; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;" id="phantom_back"></div>

        <div style="margin: 0 auto; text-align: center; height: 10px; width: 10px;  position: relative; z-index: 102; top: 10px; background-color: white; visibility: hidden;" id="phantom_top"><br /><br /><img src="load.gif"></div>
    </div>

</body>
</html>

نصائح أخرى

وتعيين phantom_top إلى موقف: النسبية لا المطلقة phantom_back بالتالي انها حاليا لا تداخل

لا تنس أن سلسلة سلسلة بكسل للارتفاع والعرض. لا تحتاج مقصف لض مؤشر 

document.getElementById('phantom_back').style.height = 700 + "px";

ومثل ذلك.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top