0

我创建了一个带有 jquery.mousewheel 和 scrollTo 的系统，每次移动鼠标滚轮时都会滚动 800 像素。浏览类似于本站：http ://beoplay.com/Products/BeoplayA8#sound-experience

我当前的代码如下所示：

    var position = 1;
var rotation= true;
var ezin= 'easeInOutExpo';



if (position==1){
    $.scrollTo('0px', 100, { axis:'y',easing: ezin });
    $('.variable').text("1");
}


function DEL1AL2(){
    rotation= false;
    $('.variable').text("2");
    $.scrollTo('800px', 800, { axis:'y',easing: ezin, onAfter: function() {rotation= true; position=2;} });     
}

function DEL2AL1(){
    rotation= false;
    $('.variable').text("1");
    $.scrollTo('0px', 800, { axis:'y',easing: ezin, onAfter: function() {rotation= true; position=1;} });   
}

function DEL2AL3(){
    rotation= false;
    $('.variable').text("3");
    $.scrollTo('1600px', 800, { axis:'y',easing: ezin, onAfter: function() {rotation= true; position=3;} });
}

function DEL3AL2(){
    rotation= false;
    $('.variable').text("2");
    $.scrollTo('800px', 800, { axis:'y',easing: ezin, onAfter: function() {rotation= true; position=2} });
    ;
}

$(document).mousewheel(function(event, delta) {
    if (delta > 0 && rotation==true){
        if(position==2){
            DEL2AL1();
        };
        if(position==3){
            DEL3AL2();
        };          
    }
    else if (delta < 0 && rotation==true){
        if(position==1){
            DEL1AL2();
        };
        if(position==2){
            DEL2AL3();
        };
    };      
    event.preventDefault();     
});});

系统附加了一个数值变量，因此当您在位置 1 并向下滚动时，该函数会向下滚动 800 像素并将位置变量更改为 2。

您将如何添加深度链接（我认为这是术语），因此当位置为 2 时，URL 会反映它（例如 www.myexample.com/#2），因此链接实际上会将您带到这个第二个位置？

我尝试这样做的唯一原因是因为我希望页面的不同位置有自己的 facebook 喜欢（投资组合项目），如果这种深层链接是不必要的并且有更好的方法来完成我所有的耳朵。

另外，如果您在我当前的代码中发现任何错误，请告诉我，我学习缓慢，欢迎任何我能完善的东西。

提前致谢。

4

2 回答 2

0

首先，在到达某个位置时更改窗口位置：

var baseLocation = window.location;

function DEL1AL2(){
    rotation= false;
    $('.variable').text("2");
    $.scrollTo('800px', 800, { axis:'y',easing: ezin, onAfter: function() {rotation= true; position=2;} });     
    window.location = baseLocation+'#2';
}

然后当您加载页面时，您可以执行以下操作：

   $(window).ready(function(){

    if (window.location.hash){
         // ...code to check what's the position that corresponds to the hash link.
        if (window.location.hash=='2'){ DEL1AL2();}
        // ...etc
    });
});
于 2012-11-15T15:59:11.030 回答
0

如果您希望在滚动到特定元素时获得平滑的滚动动画，可以查看以下插件：

http://flesler.blogspot.be/2007/10/jqueryscrollto.html

此插件允许您根据以下条件滚动到某个位置：

  • 一个原始数字
  • 一个字符串（'44'、'100px'、'+=30px'等）
  • 一个 DOM 元素（逻辑上是可滚动元素的子元素）
  • 一个选择器，将相对于可滚动元素
  • 要滚动到末尾的字符串“max”。
  • 一个字符串，指定滚动到容器的该部分的百分比（fe: 50% 到中间）。
  • 哈希 { top:x, left:y }, x 和 y 可以是任何类型的数字/字符串，如上。
于 2012-11-16T10:21:27.843 回答