iPhone 使用 Mootools 解锁滑块？

发布于 2024-08-10 12:26:44 字数 1205 浏览 8 评论 0原文

我尝试制作一个类似于 iPhone 解锁滑块的滑块，完成后转发到链接的站点，并在滑块未拖到末尾时返回到其初始位置。

这并不是一个 iPhone 网络应用程序，我只是想将其作为一个效果放到一个通用网站上。

到目前为止，我已经尝试过这两个测试，但我都陷入了困境。

第一个是：

// First Example
var el = $('slideOne'),

// Create the new slider instance
var sliderOne = new Slider(el, el.getElement('.slider'), {
    steps: 20,  // There are 35 steps
    range: [8], // Minimum value is 8

}).set(20);

这里的问题是我无法在 (0) 上触发事件，也不能在 (20) 上触发事件，我尝试了 onComplete 但这会在页面加载后立即触发该函数！？

第二个

$$('.textslider').setStyle('opacity', 0.8);

    $('slider1').makeDraggable({
        snap: 0,
        container: 'slideOne',
        droppables: '.slidedrop1',

    onDrop: function(element, droppable, event){
        if (!droppable);
        else console.log(element, 'dropped on', droppable, location = 'index.php/kredite.html', event);
    },
});

这里的问题是，可投放的效果不如我希望的那么好，有时我将滑块移动到不可见的可投放上，这表明滑块是否被拖动到最后，但什么也没有发生这种情况，有时它工作正常，我认为这可能是由于滑块上光标的位置不同所致。而且我无法完成只能水平滑动，因为它是拖动而不是滑块功能，所以我认为这将是正确的方法。

在这两个测试中，我都不知道谁可以将滑块返回到其初始位置，并带有滑动效果。

周围是否有一些 mootools 裂缝，谁可以帮助我解决这个问题？已经感谢你们的好主意了。

原文

I try to make a slider similar to the iPhone unlock Slider, that forwards to a linked site, when complete, and returns to its initial position when the slider wasn't dragged to the end.

This is not meant to be a iPhone webapp, i just want to put this to a general website as a effect.

So far I've tried those two tests, but i'm stuck on both.

The first is:

// First Example
var el = $('slideOne'),

// Create the new slider instance
var sliderOne = new Slider(el, el.getElement('.slider'), {
    steps: 20,  // There are 35 steps
    range: [8], // Minimum value is 8

}).set(20);

Problem here is that i can't fire an event on (0) not on (20) aswell, i tried onComplete but this fires the function immediatly after the page is load!?

The second

$('.textslider').setStyle('opacity', 0.8);

    $('slider1').makeDraggable({
        snap: 0,
        container: 'slideOne',
        droppables: '.slidedrop1',

    onDrop: function(element, droppable, event){
        if (!droppable);
        else console.log(element, 'dropped on', droppable, location = 'index.php/kredite.html', event);
    },
});

Problem here is , that the droppable don't work as fine as i hoped, sometimes i move the the slider on the invisible droppable, which indicates if the slider is dragged to the end, and nothing happens, sometimes it works fine, i think this may be due the different position of the cursor on the slider. and i can't get it done that it is only possible to slide horizontal , since it is that drag not the slider function, so i think this won be the proper way.

On both Tests, i didn't figured out who i could return the slider back to its initial position, with a slide Effect.

Are there some mootools cracks around who maybe could help me with this? Thanks already for the great ideas of y'all.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

聊慰 2024-08-17 12:26:44

<html>
<head>
    <script type="text/javascript"
      src="http://demos.mootools.net/demos/mootools.js"></script>
    <script type="text/javascript">
    window.addEvent('domready', function(){
        var el = $('slideOne');
        var debug = $('debug');
        var ACTIVATE_VALUE = 20;
        var mySlider = new Slider(el, el.getElement('.knob'), {
            range: [0], // Minimum value
            steps: ACTIVATE_VALUE,  // Number of steps
            onChange: function(value){
                if (value == ACTIVATE_VALUE) {
                    debug.setStyles({color:'green'});
                    // go to url after delay
                    (function(){
                        location.href='http://joecrawford.com/';
                    }).delay(500);
                } else {
                    debug.setStyles({color:'red'});
                    // if not activated, reset after 2 second delay
                    (function(){
                        value = 0;
                        mySlider.set(value);
                    }).delay(3000);
                }
                debug.set('text', value);
            }
        });
        mySlider.set(0);
    }); 
    </script>
    <style type="text/css">
    div.slider {
        width: 200px;
        height: 50px;
        background: #eee;
    }
    div.slider div.knob {
        background: #000;
        width: 50px;
        height: 50px;
    }
    div#debug {
        font-family: sans-serif;
        font-size: xx-large;
    }
    </style>
    <title>Slider that resets if it does not reach the end</title>
</head>
<body>
    <div id="slideOne" class="slider">
        <div class="knob"></div>
    </div>
    <div id="debug">-</div>
</body>
</html>

<html>
<head>
    <script type="text/javascript"
      src="http://demos.mootools.net/demos/mootools.js"></script>
    <script type="text/javascript">
    window.addEvent('domready', function(){
        var el = $('slideOne');
        var debug = $('debug');
        var ACTIVATE_VALUE = 20;
        var mySlider = new Slider(el, el.getElement('.knob'), {
            range: [0], // Minimum value
            steps: ACTIVATE_VALUE,  // Number of steps
            onChange: function(value){
                if (value == ACTIVATE_VALUE) {
                    debug.setStyles({color:'green'});
                    // go to url after delay
                    (function(){
                        location.href='http://joecrawford.com/';
                    }).delay(500);
                } else {
                    debug.setStyles({color:'red'});
                    // if not activated, reset after 2 second delay
                    (function(){
                        value = 0;
                        mySlider.set(value);
                    }).delay(3000);
                }
                debug.set('text', value);
            }
        });
        mySlider.set(0);
    }); 
    </script>
    <style type="text/css">
    div.slider {
        width: 200px;
        height: 50px;
        background: #eee;
    }
    div.slider div.knob {
        background: #000;
        width: 50px;
        height: 50px;
    }
    div#debug {
        font-family: sans-serif;
        font-size: xx-large;
    }
    </style>
    <title>Slider that resets if it does not reach the end</title>
</head>
<body>
    <div id="slideOne" class="slider">
        <div class="knob"></div>
    </div>
    <div id="debug">-</div>
</body>
</html>

回复收藏 0 原文

~没有更多了~