Fatal编程技术网
  • javascript/
  • Javascript 如何使我的网页扩展到适合所有浏览器？

Javascript 如何使我的网页扩展到适合所有浏览器？

javascript jquery html

Javascript 如何使我的网页扩展到适合所有浏览器？,javascript,jquery,html,Javascript,Jquery,Html,我正在制作一个网站，它有一个视频资源（mp4文件）作为背景，当我测试它时，我在Chrome/Explorer/Firefox中以不同的方式看到了它，对于它，我需要添加到我的代码中，以适应所有浏览器。我的代码如下： <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script> </head> &

我正在制作一个网站，它有一个视频资源（mp4文件）作为背景，当我测试它时，我在Chrome/Explorer/Firefox中以不同的方式看到了它，对于它，我需要添加到我的代码中，以适应所有浏览器。我的代码如下：

<html>
<head>
<script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
</head>
<body>
<body style="width: 100%; height: 100%;">
<video width="1920" height="1080" controls autoplay loop= "loop">
  <source src="background.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
<script>   
$(function(){

var FancyPointer = function(){
  // A revealing module pattern, to create an
  // extensible pointer object.
  var pointerIcons = [], // Array of pointers.
      el, $el,           // element to listen to
      defaultImgSettings = {
          src: 'globe.gif',
          height: '30px',
          width: '30px',
          xPos: -15,
          yPos: -15
      };
  function startPointing(){

      $el.on("mousemove", function(e){
        var evt = e;
        $(pointerIcons).each(function(index, pointerEl){
          $(pointerEl.imgEl).clone()
            .css({
                'position':'absolute',
                'top':e.pageY+pointerEl.yPos,
                'left':e.pageX+pointerEl.xPos,
                'width': pointerEl.width,
                'height': pointerEl.height
            }).prependTo( $(document.body))
            .fadeOut(500, 'linear', function(){
                $(this).remove(); 
            });
        });

      });
  }

  function addPointer(options){
      var pointerEl = {};
      pointerEl.src = options.src || defaultImgSettings.src;
      pointerEl.height =options.height || defaultImgSettings.height;
      pointerEl.width = options.width || defaultImgSettings.width;
      pointerEl.xPos = options.xPos || defaultImgSettings.xPos;
      pointerEl.yPos = options.yPos || defaultImgSettings.yPos;

      pointerEl.imgEl = new Image();
      pointerEl.imgEl.src = pointerEl.src;
      $(pointerEl.imgEl).attr("height",  pointerEl.height)
        .attr("width",  pointerEl.width);

      pointerIcons.push(pointerEl);
  }

  function init(element){
    // the required option for the init should be the element in which we'll be listening.
    // If there is also an array included, the array should contain a number of options for
    //  the addPointer function. Otherwise, the user will need to manually call addPointer with
    //  each pointer to be added.
    el = element; // Save the original element
    $el = $(el);     // also create a jQuery-wrapped reference for later use.

    // Now here, we create an array, containing all the additional parameters after the first
    var args = Array.prototype.slice.call(arguments, 1);
    // Now, iterate over all these additional arguments. If we have any, assume them to be
    //  the options for addPointer (see above).

      if(args){
      $(args).each(function(index, pointerEl){
          addPointer(pointerEl);
      });
    }

    startPointing();

  }

  return {
    init: init,
    add: addPointer
  };
}(); 


FancyPointer.init("body",
{
      src: 'globe.gif',
      width: '80px',
      height: '80px',
      xPos: -40,
      yPos: -40
    }, 
    {
      src: 'smartphone.gif',
      width: '60px',
      height: '60px',
      xPos: 25,
      yPos: 25
    }, {
      src: 'monitor.gif',
      width: '50px',
      height: '50px',
      xPos: 30,
      yPos: -80
    },
    {
      src: 'tablet.gif',
      width: '55px',
      height: '55px',
      xPos: -85,
      yPos: -85
    },
    {
      src: 'laptop.gif',
      width: '50px',
      height: '50px',
      xPos: -80,
      yPos: 30
    },
    {
      src: 'chain.gif',
      width: '30px',
      height: '30px',
      xPos: -45,
      yPos: -50
    },
    {
      src: 'chain.gif',
      width: '30px',
      height: '30px',
      xPos: 15,
      yPos: 10
    },
    {
      src: 'chain1.gif',
      width: '30px',
      height: '30px',
      xPos: -45,
      yPos: 10
    },
    {
      src: 'chain1.gif',
      width: '30px',
      height: '30px',
      xPos: 25,
      yPos: -60
    });

   $("#addTrailer").on("click", function(){
        $(this).hide();
        FancyPointer.add({
          src: 'trail4.gif',
          width: '100px',
          height: '100px',
          xPos: -45,
          yPos: 25
        });
    })    
});
;</script>
</body>
</html>


您的浏览器不支持视频标记。
$（函数（）{
var FancyPointer=函数（）{
//显示模块模式，以创建
//可扩展指针对象。
var pointerIcons=[]，//指针数组。
el，$el，//要侦听的元素
defaultImgSettings={
src:'globe.gif'，
高度：“30px”，
宽度：“30px”，
XPO:-15，
yPos:-15
};
函数启动点（）{
$el.on（“mousemove”，函数（e）{
var-evt=e；
$（指针符号）。每个（函数（索引，指针符号）{
$（pointerell.imgEl）.clone（）
.css({
'位置'：'绝对'，
“顶部”：e.pageY+pointerell.yPos，
“左”：e.pageX+pointerell.xPos，
“宽度”：pointerell.width，
“高度”：pointerell.height
}).prependTo（$（document.body））
.衰减（500，'线性'，函数（）{
$（this.remove（）；
});
});
});
}
函数addPointer（选项）{
var pointerell={}；
pointerell.src=options.src | | defaultImgSettings.src；
pointerell.height=options.height | | defaultImgSettings.height；
pointerell.width=options.width | | defaultImgSettings.width；
pointerell.xPos=options.xPos | | defaultImgSettings.xPos；
pointerell.yPos=options.yPos | | defaultImgSettings.yPos；
pointerell.imgEl=新图像（）；
pointerell.imgEl.src=pointerell.src；
$（pointerell.imgEl）.attr（“高度”，pointerell.height）
.attr（“宽度”，点相关宽度）；
推（点鱼）；
}
函数init（元素）{
//init所需的选项应该是我们将要侦听的元素。
//如果还包括一个数组，那么该数组应该包含许多用于
//addPointer函数。否则，用户需要使用
//要添加的每个指针。
el=element；//保存原始元素
$el=$（el）；//还要创建一个jQuery包装的引用供以后使用。
//现在，我们创建一个数组，包含第一个
var args=Array.prototype.slice.call（参数，1）；
//现在，迭代所有这些额外的参数。如果我们有，假设它们是
//addPointer的选项（见上文）。
如果（args）{
$（参数）.each（函数（索引，指针）{
addPointer（pointerell）；
});
}
起始点（）；
}
返回{
init:init，
add:addPointer
};
}(); 
FancyPointer.init（“主体”，
{
src:'globe.gif'，
宽度：“80px”，
高度：'80px'，
XPO:-40，
yPos:-40
}, 
{
src:'smartphone.gif'，
宽度：“60px”，
高度：'60px'，
xPos:25，
yPos:25
}, {
src:'monitor.gif'，
宽度：“50px”，
高度：'50px'，
xPos:30，
yPos:-80
},
{
src:'table.gif'，
宽度：“55px”，
高度：'55px'，
XPO:-85，
yPos:-85
},
{
src:'laptop.gif'，
宽度：“50px”，
高度：'50px'，
XPO:-80，
yPos:30
},
{
src:'chain.gif'，
宽度：“30px”，
高度：“30px”，
XPO:-45，
yPos:-50
},
{
src:'chain.gif'，
宽度：“30px”，
高度：“30px”，
xPos:15，
yPos:10
},
{
src:'chain1.gif'，
宽度：“30px”，
高度：“30px”，
XPO:-45，
yPos:10
},
{
src:'chain1.gif'，
宽度：“30px”，
高度：“30px”，
xPos:25，
yPos:-60
});
$（“#添加拖车”）。在（“单击”，函数（）上）{
$（this.hide（）；
FancyPointer.add({
src:'trail4.gif'，
宽度：“100px”，
高度：“100px”，
XPO:-45，
yPos:25
});
})    
});
;
有人能帮我吗？ 提前谢谢 亚历杭德罗卡斯坦
PS：对不起，我的英语太差了……

这是我不久前写的一些代码，用来制作一个全屏背景：

// Resize the video elements so that we don't get any borders due to aspect ratio
function resizeVideo() {
  if ($(window).height() > $(window).width() * 0.5425) { // Which dimension is bigger dependant on aspect ratio (16:9)
    $("video").removeAttr("height").removeAttr("width").width("auto").height("100%");
  }
  else {
    $("video").removeAttr("height").removeAttr("width").width("100%").height("auto");
  }
};

// Add the resize function to the window resize event but put it on a short timer as to not call it too often
var resizeTimer;
$(window).resize(function () {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(resizeVideo, 150);
});
你做错了！您只需打开一个div，它是一个块元素，这意味着它将占据所有可用的位置。然后，您可以使用JS来缩放元素，如视频和主div中的其他元素，以适应它。它会起作用的。：）您不必使用JS进行任何操作：）

将视频设置为固定宽度（如1920）是一个非常糟糕的主意

您可以使用CSS将视频设置为100%宽度和高度，使其变得灵活，但这样可能会丢失纵横比并扭曲视频。因此，如果您只是将视频用作背景，而不关心字幕和其他视频资源，那么通常最好让视频填满屏幕，并将边缘切掉

如果你想要效果，并且想要为桅杆头部按比例调整大小。你可以这样做：

var mastheadHeight,
    windowHeight = $(window).height(),
    windowWidth = $(window).width();

mastheadHeight = Math.min(Math.floor(windowWidth / 2), windowHeight - $('.menu').height() );
然后在“调整浏览器大小”上选中此项，使其响应。注意，我在我的报头底部添加了一个菜单，从视频高度中减去该菜单，使其在屏幕上保持静止

嗨，gvee，首先感谢你的帮助。另一方面，我添加了你的代码，但它还没有工作。也许我犯了一个错误，为了它，你可以添加所有完整的代码（包括我的和你的。再次感谢Inhi voTkaPoweR，请让我有一点耐心！我是这个主题的新手！