Here's a demo

Question

该网站基本上看起来像这样

--------------------------------------------------- | 0 | Clients | 0 | --------------------------------------------------- | Services | 0 | About | --------------------------------------------------- | 0 | Home | 0 | --------------------------------------------------- | Price | 0 | Portfolio | --------------------------------------------------- | 0 | Contact | 0 | --------------------------------------------- ------------------------

其中每个分区占据整个屏幕，0是纯白色未使用的div。首先，我需要修复屏幕没有滚动条。我如何制作

- 一个在网站加载（onload）时将屏幕带到“Home”的功能？

- 当点击相应的导航选项（将在顶部固定）时，将屏幕（设置转换）带到特定分区的功能？

关于CSS，我不知道什么（正文或包装）必须设置为300％x500％（整页）以及如何实现该功能。全部使用html，css和纯javascript。

我理解焦点的屏幕需要通过改变边距来移动，但我没有这样做。我开始有点但很明显我完全卡住了。请帮忙。

Answer 1

几点提示：

CSS：

body { width:300%; height:500%; overflow:hidden; }

JS：

var x = document.getElementsByTagName('body')[0];
//set "home" in the center of page
window.onload = function () {
    x.style.marginLeft = "homeXposition";
    x.style.marginTop = "homeYposition";
}
// function for "take me to some section"
// wh defines element
function goSomewhere(wh) {
    switch(wh){
case about:
    x.style.marginLeft = "aboutXposition";
    x.style.marginTop = "aboutYposition";
    break;
case medjed:
    x.style.marginLeft = "medjedXposition";
    x.style.marginTop = "medjedYposition";
    break;
.......................
default:
    ...........
    }
}

编辑：如果所有部分都有屏幕大小，这适合您。


var mrdalo = document.getElementsByTagName('body')[0];

function moveYourBody (myb) {
    switch myb {
        case cl: //Clients
            mrdalo.style.marginLeft = "100%";
            mrdalo.style.marginTop = "0";
            break;
        case se: //Services
            mrdalo.style.marginLeft = "0";
            mrdalo.style.marginTop = "100%";
            break;
        case ab: //About
            mrdalo.style.marginLeft = "200%";
            mrdalo.style.marginTop = "100%";
            break;
        case pr: //Price
            mrdalo.style.marginLeft = "0";
            mrdalo.style.marginTop = "300%";
            break;
        case po: //Portfolio
            mrdalo.style.marginLeft = "200%";
            mrdalo.style.marginTop = "300%";
            break;
        case co: //Contacts
            mrdalo.style.marginLeft = "100%";
            mrdalo.style.marginTop = "400%";
            break;
        default: //Home
            mrdalo.style.marginLeft = "100%";
            mrdalo.style.marginTop = "200%";
            break;
    }
}

Answer 2

您是否希望在整个页面上制作动画，遍历各个部分？如果我从Clients转到Contact，我会过Home吗？

以下是一个演示：http://codepen.io/Oka/pen/jEaPJb，使用大量position: absolute;。

重要的JS：

var wrap = document.querySelector('.wrap'),
    links = document.querySelectorAll('.sp');

function Page(x, y) {
  this.x = x;
  this.y = y;
}

Page.prototype.display = function () {
  wrap.style.left = '-' + this.x;
  wrap.style.top = '-' + this.y;
}


Pages = {
  'clients': new Page('100%', '0'),
  'services': new Page('0', '100%'),
  'about': new Page('200%', '100%'),
  'price': new Page('0', '300%'),
  'portfolio': new Page('200%', '300%'),
  'contacts': new Page('100%', '400%'),
  'home': new Page('100%', '200%')
}

for (var n = 0; n < links.length; n += 1) {
  links[n].addEventListener('click', function (event) {
    event.preventDefault();

    var des = this.getAttribute('href');

    Pages[des].display();
  });
}

Pages.home.display();

如果不是这样，我有一个很小的框架可以做类似你所描述的内容，但不完全是。

Pages.js - https://github.com/Oka-/pages

完整的文档在http://pages.oka.io/，或在repo自述文件中。

几乎纯JavaScript，对大多数腿部工作依赖于Velocity.js。缺点是它是IE 9 +。

好处是，Velocity的表现确实不错。

Here's a demo

页面使用整页div，并在您使用特殊锚链接更改页面时交换它们。

API是基本的，下面是创建没有动画的文档的方法示例：

Pages.build({
  animation: 'none',
  lock: 0,
  enableKeys: false
});

希望它可以帮助你，或者至少引导你朝着正确的方向发展自己。

如何创建将屏幕移动到diff的功能。全屏divs？

2 个答案:

Here's a demo