伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】

所属分类:UI,媒体,其他-滚动,滑块和旋转,移动
 154571  353  查看评论 (61)
伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】 ie兼容10

请在手机上查看效果,或在浏览器中模拟手机端查看,直接电脑端浏览器无法查看效果。

============以下内容由 马云云_理想青年 提供===========调用方法(function(){ //配置 var config = { 'audio':{ 'icon':'audio-record-play', 'text':true }, 'loading': 'loading-ic' }; //loading window.onload = function(){ $('#loading').hide(); } //分享 $('#js-btn-share').bind('tap',function(){ $('#js-share').show(); }) $('#js-share').bind('tap',function(){ $(this).hide(); }); var pageIndex = 1, pageTotal = $('.page').length, towards = { up:1, right:2, down:3, left:4}, isAnimating = false; //禁用手机默认的触屏滚动行为 document.addEventListener('touchmove',function(event){ event.preventDefault(); },false); $(document).swipeUp(function(){ if (isAnimating) return; if (pageIndex < pageTotal) { pageIndex+=1; }else{ pageIndex=1; }; pageMove(towards.up); }) $(document).swipeDown(function(){ if (isAnimating) return; if (pageIndex > 1) { pageIndex-=1; }else{ pageIndex=pageTotal; }; pageMove(towards.down); }) function pageMove(tw){ var lastPage; if(tw=='1'){ if(pageIndex==1){ lastPage = ".page-"+pageTotal; }else{ lastPage = ".page-"+(pageIndex-1); } }else if(tw=='3'){ if(pageIndex==pageTotal){ lastPage = ".page-1"; }else{ lastPage = ".page-"+(pageIndex+1); } } var nowPage = ".page-"+pageIndex; switch(tw) { case towards.up: outClass = 'pt-page-moveToTop'; inClass = 'pt-page-moveFromBottom'; break; case towards.down: outClass = 'pt-page-moveToBottom'; inClass = 'pt-page-moveFromTop'; break; } isAnimating = true; $(nowPage).removeClass("hide"); $(lastPage).addClass(outClass); $(nowPage).addClass(inClass); setTimeout(function(){ $(lastPage).removeClass('page-current'); $(lastPage).removeClass(outClass); $(lastPage).addClass("hide"); $(lastPage).find("img").addClass("hide"); $(nowPage).addClass('page-current'); $(nowPage).removeClass(inClass); $(nowPage).find("img").removeClass("hide"); isAnimating = false; },600); } })();==============以下内容由 Dreamer 提供=================花了重金下载了这个伟德BETVICTOR,有些心得,分享分享第一,替换page.css里面的.page-1{ background-image: url(../img/1_01.png);}只要替换图片路径即可设置为背景图,图1、图2以此类推。第二,在index.html页面里面<div class="page page-1 page-current"></div>的各个div page里面添加元素是不能定位的,你可以添加一些navbar-fixed-bottom  (定位到底部)一些样式,我使用的是bootstrap框架,挺好用的,用navbar-fixed-top定位到头部。第三,貌似不用引入JQ包,引入后会报错,估计是zepto.min.js这个js和jq包冲突了,在这里我就只用dom节点来实现。第四,页面的各个图片是无限循环的,想要不循环,只要改if(tw=='1'){ if(pageIndex==1){ lastPage = ".page-"+pageTotal; }else{ lastPage = ".page-"+(pageIndex-1); } }else if(tw=='3'){ if(pageIndex==pageTotal){ lastPage = ".page-1"; } }else{ lastPage = ".page-"+(pageIndex+1); }

if(tw=='1'){ if(pageIndex==1){ lastPage = ".page-"+(pageTotal-1); }else{ lastPage = ".page-"+(pageIndex-1); } }else if(tw=='3'){ if(pageIndex==pageTotal){ lastPage = ".page-1"; }else{ lastPage = ".page-"+(pageIndex+1); } } 就可以了。第五,在微信浏览器使用该伟德BETVICTOR,最好清空缓存,不然修改了都没感觉!(这点可以不注意)============== 以下代码由 draftdog 提供 =========================这个其实是中通的那个的简化版,文件夹中有个animation的css 他都没有用,其实这个animation很有用的,每个不同的图片放上不同的animation就可以动起来了,具体做法比如<img class="img_3 hide fadeInRight" src="img/txt1.png" />class中 img_3定义了图片的位置,大小,等等的元素hide自然就是隐藏fadeInRight是渐出效果,具体的效果有很多,可以一个一个尝试
相关伟德BETVICTOR-滚动,滑块和旋转,移动

常用的根据高度自动切换效果

常用的根据高度自动切换效果 简单 下载下来之后可以直接是用 兼容性好 不存在兼容问题
  滚动
 8370  50

jQueryScrollPage单页全屏滚动效果

漂亮的jQuery单页全屏滚动,带视差效果
  滚动
 5685  61

JQuery滚动条伟德BETVICTORjscroll.js

JQuery滚动条伟德BETVICTORjscroll.js,支持火狐谷歌IE等主流浏览器,超轻量兼容好
  滚动
 3062  21

jQuery电商网站楼层滚动定位

jQuery电商网站楼层滚动定位
  滚动
 26152  286

讨论这个项目(61)回答他人问题或分享伟德BETVICTOR使用方法奖励jQ币

    dht879147746 0
    2017/11/10 14:27:36
    wtl1122330@163.com  项目正好需要,小弟不会做,求一份代码,谢谢 回复
    这女孩很乖 0
    2017/11/9 12:17:40
    谁有源代码啊,帮忙发份,谢谢 回复
    pa19931224 0
    2017/11/2 10:15:41
    无用代码骗我分 回复
    buptquan 0
    2017/8/10 16:16:29
    这不是北邮某学长 回复
    BillGatesTan. 0
    2017/8/2 9:55:14
    Mr丨Kun 0
    2017/3/10 21:20:16
     然而我还是选择用SuperSlide、TouchSlide  swiper   fullpage  这些伟德BETVICTOR去模拟  哈哈  开玩笑 大兄弟这原生很6 小生佩服
        Mr丨Kun0
        2017/3/10 21:24:43
        这个可以直接用swpier模拟 可以去swiper官网直接弄出来 开源的哦  能帮你们的只能到这了  少花冤枉的jq币 
    回复
    清新薄荷猫 0
    2017/2/28 15:28:43
    我用的其他人的代码也是无限循环,醉了 回复
    つにつ 0
    2017/2/27 10:21:06
    有点小bug,在我手机看的时候没有全屏显示 回复
    trevor 0
    2017/2/14 18:09:46
    求下载的源文件  谢谢1280728421@qq.com 回复
    w 0
    2017/2/4 10:30:30
    同样求一份,exchange with beautiful girls’s resources,你懂得!感谢!657615799@qq.com 回复
取消回复