范
  • 发布:2017-02-13 15:19
  • 更新:2017-03-02 16:40
  • 阅读:1369

slider控件实现 驾考宝典 翻题效果

分类:MUI

我用MUI的mui('.mui-slider')实现了,类型 驾考宝典 上面切换题目效果。现在有个问题,就是想实现,比如,我切换到下一题的时候,位置 能不随上一题的位置变化,而变化。截图:

2017-02-13 15:19 负责人:无 分享
已邀请:
范

(作者)

代码贴下,第一步:slide初始化

gallery = mui('.mui-slider');  
                gallery.slider({  
                    interval: 0 //自动轮播周期,若为0则不自动播放,默认为0;  
                });

第二步:图片切换代码

//图片切换时,触发动画  
            document.querySelector('.mui-slider').addEventListener('slide', function(event) {  
                //scrollTo(0, 0, 0);**原来打算用这个,不过有一个 滚动的效果,不是想要的。我想要的是,下一题出现一点的时候,位置就自动到上面了,就像“驾考宝典”里面的下一题效果**  
                //              mui('.mui-slider').scroll().scrollTo(0, 0, 100); //在100毫秒内回到头部  
                //console.log("_quesionBoxObj.style:" + _quesionBoxObj.style.cssText);  
                //event.detail.slideNumber = 1;  
                zhizhang.style.color = '';  
                zhizhang02.style.color = '';  
                var index = event.detail.slideNumber + 1;  
                //document.getElementById('dd').innerHTML = event.detail.slideNumber;  
                //return;  
                if(index > _temp) {  
                    //"左";  
                    //document.getElementById('dd').innerHTML = '左';  
                    //alert('_cur' + _cur);  
                    if(_isSlideBySwitch) {  
                        setCur(_cur);  
                        _isSlideBySwitch = false;  
                    } else {  
                        setCur(_cur + 1);  
                    }  
                    var cur = _cur + 1;  
                    //                  document.getElementById('slide_'+cur).scrollTo(0,0,0);  

                    LoadHelper();  
                } else {  
                    //"右";  
                    //document.getElementById('dd').innerHTML = '右';  
                    if(_isSlideBySwitch) {  
                        setCur(_cur);  
                        _isSlideBySwitch = false;  
                    } else {  
                        setCur(_cur - 1);  
                    }  

                    LoadHelper();  
                }  
                _temp = index;  
                mui("#slide_" + _cur).on("tap", "img", function(e) {  
                    ImageShow(_cur, this.id);  
                });  

                //scrollTo(0, 0, 0);  
                //console.log(".mui-fullscreen" + document.querySelector('#slider').offsetTop);  
            });
范

(作者)

MUI,做成原生的 这种翻题效果,估计难

该问题目前已经被锁定, 无法添加新回复