2014-12-26 25 views
5

में एक पंक्ति को रीफ्रेश करें I JQuery के बिना अपना अनुकूली वेब पेज लिखने का प्रयास करें। लेकिन मैं दो समस्याओं को पूरा करता हूं। 1. जब मैं खिड़की में ज़ूम करता हूं तब स्क्रॉल बार दिखाई देता है, बाएं रेखा स्वचालित रूप से फिर से नहीं जा सकती है। 2. सामग्री सभी को प्रदर्शित नहीं कर सकती है, स्नैपशॉट के नीचे देखें। स्नैपशॉट के नीचे मैंने इन दो मुद्दों को चिह्नित किया है। विस्तार देखने के लिए, कृपया LINK पर जाएं, आपकी मदद धन्यवाद। enter image description here मैं स्नैपशॉट अपलोड करना चाहता हूं, लेकिन 10 से कम प्रतिष्ठा के कारण मैं असफल रहा। तो स्नैपशॉट देखने के लिए कृपया मेरे व्यक्तिगत पृष्ठ पर जाएं। एक बार फिर धन्यवाद।स्क्रॉल बार और जावास्क्रिप्ट

मेरे कोड के नीचे है:

<!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 content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport" /> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title> 
</title> 
<style type="text/css"> 
body 
{ 
    margin:0px; 
    padding:0px; 
    border:0px; 
    display:block; 
    z-index:-9999; 
    width:100%; 
    height:100%; 
    left:0px; 
    top:0px; 
    overflow:auto; 
    font-family: Arial,Helvetica,sans-serif; 
} 
div.bg 
{ 
    background-color:#fefefe; 
    position:absolute; 
    left:0px; 
    top:0px; 
    width:100%; 
    height:100%; 
    display:block; 
    z-index:-8888; 
} 
</style> 
<script language="javascript" type="text/javascript"> 
    var sw = 0, sh = 0; 
    var b = true; 
    function alignImg() { 
     if (b) { 
      document.getElementById("bot").style.top = (sh-40)+"px"; 
      document.getElementById("rig").style.left = (sw - 40) + "px"; 
      document.getElementById("debug").innerHTML = "sw: " + sw + " sh:" + sh + " f:" + b; 
     } 
     if (!b) { 
      document.getElementById("bot").style.top = "66px"; 
      document.getElementById("rig").style.left = "66px"; 
      document.getElementById("debug").innerHTML = "[email protected]"; 
     } 
     b = !b; 
    } 

    (function (d) { 
     setInterval(function() { 
      w = d.body.clientWidth; 
      h = d.body.clientHeight || window.innerHeight; 
      document.title = w + " : " + h; 
      document.getElementById("bot").style.top = (sh-40)+"px"; 
      document.getElementById("rig").style.left = (sw-40)+"px"; 
      document.getElementById("cn").style.top = 300+"px"; 
      document.getElementById("cn").style.left = (sw - 112)/2 + "px"; 
      document.getElementById("en").style.top = 500 + "px"; 
      document.getElementById("en").style.left = (sw-178)/2+"px"; 
      document.getElementById("pig").style.left = (sw - 210)/2 + "px"; 
      document.getElementById("menu").style.left = (sw - 220)/2 + "px"; 
      document.getElementById("debug").style.left = (sw - 146)/2 + "px"; 
      if (sw !== w || sh !== h) { 
       sw = w; 
       sh = h; 
      } 


     }, 1); 
    })(document) 
</script> 
</head> 

<body id="body" > 
<div class="bg" > 
<div> 
<a href="#" ><img src="images/circle-ydall.png" alt="circle-ydall" style="position:absolute;top:0px;left:0px;width:40px;height:40px;z-index:-3333;background-color:#909090;" /></a> 
<a href="#" ><img src="images/circle-wedall.png" alt="circle-wedall" style="position:absolute;top:0px;right:0px;width:40px;height:40px;z-index:-3333;background-color:#909090;" /></a> 
<a href="#" ><img src="images/circle-yedall.png" alt="circle-yedall" style="position:fixed;bottom:0px;left:0px;width:40px;height:40px;z-index:-3333;background-color:#909090;" /></a> 
<div id="menu" style="position:absolute;top:10px;left:40px;height:40px;z-index:-3333;"> 
<a href="#" ><img src="images/ydall.png" alt="ydall" style="height:20px;z-index:-3333;background-color:#909090;"/></a> 
<a href="#" ><img src="images/wedall.png" alt="ydall" style="height:20px;z-index:-3333;background-color:#909090;"/></a> 
<a href="#" ><img src="images/yedall.png" alt="ydall" style="height:20px;z-index:-3333;background-color:#909090;"/></a> 
</div> 

<div id="pig" style="position:absolute;top:80px;left:100px;height:180px;z-index:-3333;"> 
<img src="images/bigAllIn1.png" alt="bigAllIn1" style="height:180px;z-index:-3333;background-color:#909090;"/> 
</div> 
</div> 
<div id="cn" style="position:absolute;top:41px;left:41px;z-index:-6666;background-color:#e0e0e0;" > 
<h4 style="color:#606060">欢迎来到云道!</h4> 
<h4 style="color:#606060">属于您的逼格!</h4> 
<a href="http://www.ycpai.com/p_21104">进入</a> 
</div> 

<img id="row" src="images/row.png" alt="seperate row" style="position:absolute;top:40px;width:100%;height:1px;z-index:-5555;" /> 
<img id="col" src="images/column.png" alt="seperate column" style="position:absolute;left:40px;width:1px;height:100%;z-index:-5555;" /> 
<img id="bot" src="images/row.png" alt="seperate row" style="position:fixed;top:215px;width:100%;height:1px;z-index:-5555;" /> 
<img id="rig" src="images/column.png" alt="seperate column" style="position:fixed;left:215px;width:1px;height:100%;z-index:-5555;" /> 


<div id="en" style="position:absolute;top:157px;left:17px;z-index:-6666;background-color:#b0b0b0;" > 
<h4 style="color:#606060">Welcome to YDall.com!</h4> 
<h4 style="color:#606060">Awesome only for you!</h4> 
<a href="http://www.ycpai.com/p_21104">Enter</a> 
</div> 
<div style="position:fixed;bottom:0px;right:0px;height:40px;z-index:-6666;display:block;background-color:#b0b0b0;"> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
</div> 
<p id="debug" style="position:fixed;bottom:0px;left:60px;z-index:-2222;background-color:#909090;" >[email protected]</p> 

</div> 
<a href="#" onclick="alignImg()"><img src="images/favicon200x200.png" alt="favicon200x200" style="position:fixed;width:40px;height:40px;bottom:0px;right:0px;z-index:-3333;background-color:#909090;" /></a> 
</body> 
</html> 

उत्तर

0

Use this replace you body code: 
 
<body id="body" > 
 
<div class="bg" > 
 
<div> 
 
<a href="#" ><img src="images/circle-ydall.png" alt="circle-ydall" style="position:absolute;top:0px;left:0px;width:40px;height:40px;z-index:-3333;background-color:#909090;" /></a> 
 
<a href="#" ><img src="images/circle-wedall.png" alt="circle-wedall" style="position:absolute;top:0px;right:0px;width:40px;height:40px;z-index:-3333;background-color:#909090;" /></a> 
 
<a href="#" ><img src="images/circle-yedall.png" alt="circle-yedall" style="position:fixed;bottom:0px;left:0px;width:40px;height:40px;z-index:-3333;background-color:#909090;" /></a> 
 
<div id="menu" style="position:absolute;top:10px;left:40px;height:40px;z-index:-3333;"> 
 
<a href="#" ><img src="images/ydall.png" alt="ydall" style="height:20px;z-index:-3333;background-color:#909090;"/></a> 
 
<a href="#" ><img src="images/wedall.png" alt="ydall" style="height:20px;z-index:-3333;background-color:#909090;"/></a> 
 
<a href="#" ><img src="images/yedall.png" alt="ydall" style="height:20px;z-index:-3333;background-color:#909090;"/></a> 
 
</div> 
 
<div style="position:absolute;left:50px;top:50px;z-index:-3333;"/> 
 
<a href="images/q1.png"> question snapshot</a> 
 
</div> 
 
<div id="pig" style="position:absolute;top:80px;left:100px;height:180px;z-index:-3333;"> 
 
<img src="images/bigAllIn1.png" alt="bigAllIn1" style="height:180px;z-index:-3333;background-color:#909090;"/> 
 
</div> 
 
</div> 
 
<div id="cn" style="position:absolute;top:41px;left:41px;z-index:-6666;background-color:#e0e0e0;" > 
 
<h4 style="color:#606060">欢迎来到云道!</h4> 
 
<h4 style="color:#606060">属于您的逼格!</h4> 
 
<a href="http://www.ycpai.com/p_21104">进入</a> 
 
</div> 
 

 
<img id="row" src="images/row.png" alt="seperate row" style="position:absolute;top:40px;width:100%;height:1px;z-index:-5555;" /> 
 
<img id="col" src="images/column.png" alt="seperate column" style="position:absolute;left:40px;width:1px;height:100%;z-index:-5555;" /> 
 
<img id="bot" src="images/row.png" alt="seperate row" style="position:fixed;top:215px;width:100%;height:1px;z-index:-5555;" /> 
 
<img id="rig" src="images/column.png" alt="seperate column" style="position:fixed;left:215px;width:1px;height:100%;z-index:-5555;" /> 
 

 

 
<div id="en" style="position:absolute;top:157px;left:17px;z-index:-6666;background-color:#b0b0b0;" > 
 
<h4 style="color:#606060">Welcome to YDall.com!</h4> 
 
<h4 style="color:#606060">Awesome only for you!</h4> 
 
<a href="http://www.ycpai.com/p_21104">Enter</a> 
 
</div> 
 
<div style="position:fixed;bottom:0px;right:0px;height:40px;z-index:-6666;display:block;background-color:#b0b0b0;"> 
 
<br /> 
 
<br /> 
 
<br /> 
 
<br /> 
 
<br /> 
 
<br /> 
 
<br /> 
 
<br /> 
 
<br /> 
 
</div> 
 
<p id="debug" style="position:fixed;bottom:0px;left:60px;z-index:-2222;background-color:#909090;" >[email protected]</p> 
 

 
</div> 
 
<a href="#" onclick="alignImg()"><img src="images/favicon200x200.png" alt="favicon200x200" style="position:fixed;width:40px;height:40px;bottom:0px;right:0px;z-index:-3333;background-color:#909090;" /></a> 
 
</body>

+0

मैं अपने प्रश्न कोड के साथ अपने जवाब कोड की तुलना में है, और मैं अपने महत्वपूर्ण परिवर्तन नहीं मिल रहा। क्या आप मुझे अपना संकेत दे सकते हैं? धन्यवाद –

संबंधित मुद्दे