2

每当我调整浏览器的大小时，div 都会移出窗口。我使用 jquery 滚动插件来浏览 div。但是当我调整#home div 的大小时，它可以正常工作，但是当我调整其他 div 的大小时，它会超出窗口。

请帮帮我，这是网站的链接。

这是我使用的代码，

$(document).ready(function()
{
$("#bg-home").backstretch("images/Bg-home3.jpg");
var images = ['1.jpg', '2.jpg','3.jpg'];
$("#container").backstretch('images/' + images[Math.floor(Math.random() * images.length)]);
    $( "#draggable" ).draggable({
      drag: function() {
      $(".scrolldown span").css("color","lightgreen").html("Drop");
      },
      stop: function() {
        $(".scrolldown span").css("color","white").html("Drag");
      },axis: "x",containment:"#menu",scroll: false//,grid: [ 159,0 ]
    });
$(".content,.content1").droppable({drop: function() {
        var $url = $(this);
        document.title = $url.attr('alt');
        $('html, body').scrollTo($url.attr('id'),500,"easeInOutExpo");
        //event.preventDefault();
      }});
        $("#welcome").effect("slide",3000);
        $("#welcome").click(function()
        {
            $("#welcome").animate({left: "-1000px"},"easeInOutBounce");
            $(".about_w").animate({left: "100px"},"easeInOutBounce");
            $(".about_w").delay(4000).animate({left: "-800px"});
            $("#welcome").delay(4500).animate({left: "100px"});

        });
$('#menu a').bind('click',function(event){
        var $url = $(this);
        document.title = $url.attr('alt');
        $('html, body').scrollTo($url.attr('href'),500,"easeInOutExpo");
        event.preventDefault();
    });
$("#about .text p").vertiscroll({ width:6, color:'#f07','cover': 200,'areacursor': 'pointer' });
$('.side_container').slimScroll({
    height:"88%",
    color: '#fff',
    start: $('.side_container'),
    alwaysVisible: false
});
$('#container_wrap_metro').slimScroll({
    height:"400px",
    color: '#fff',
    railVisible: false,
    alwaysVisible: false
});
$(".menu nav").click(function(){
    $url = $(this);
  $(".text p").load($url.attr('id'));
});
function loading_show()
{
$('#loading').html("<p style='color:white;'>Loading</p><br><img src='images/loading.gif'/>").fadeIn('fast');
}

function loading_hide()
{
$('#loading').fadeOut();
} 
//Status
function loadData(page)
{
loading_show();
$("#container_wrap_metro").html("");
$.ajax({
      url: "load_data.php",
      type: "post",
      data: "page="+page,
      success: function(data){
            loading_hide();
           $("#container_wrap_metro").html(data);
      },
      error:function(){
          alert("failure");
          $("#container_wrap_metro").html('Unable to process request!');
      }  
    }); 
}
function loads(page)
{
$.ajax({
      url: "load_10.php",
      type: "post",
      data: "page="+page,
      success: function(data){
           $(".side_container").html(data);
      },
      error:function(){
          alert("failure");
          $(".side_container").html('Unable to process request!');
      }  
    }); 
}
loads(1);
//Search
$("#result").keyup(function(){
    $(".side_container").html('<center><i>Fetching...</i></center>')
    var q = $(this).val();
    $.get("results.php?q="+q, function(data){
    if(q){
        $(".side_container").html(data);
    } 
    else {
        loads(1);
    }
});
});
});
4

2 回答 2

1

尝试编辑以下行：

$("#welcome").animate({left: "-1000px"},"easeInOutBounce");
$(".about_w").animate({left: "100px"},"easeInOutBounce");
$(".about_w").delay(4000).animate({left: "-800px"});
$("#welcome").delay(4500).animate({left: "100px"});

和：

height:"400px",

前面的回答是对的。对于响应式网页设计，在设置大小时使用 em 或 %。您可以使用 100% 或 40 em。您可以更改这些值，直到获得所需的输出。

于 2013-05-10T07:42:58.640 回答
0

为此，您需要响应式设计，为此您需要在任何地方都以“％”形式提供宽度但是在您的脚本中，您正在使用 left:..px 这样的......它会产生问题。所以首先最好给他们响应式或第二件事用响应式替换它..

试试这个链接

于 2013-05-10T05:36:59.457 回答