网易游戏js-滚动支持自适应
2014-09-02 17:19
316 查看
nie.config.copyRight.setGray(); var nieCarousel = (function ($) { var defaultOptions = { children: '.center-slide-box a', nextBtn: '.slide-next', prevBtn: '.slide-prev', navList:'.center-slide-nav li', box:'.center-slide', resNav:'.center-slide-res-nav li', autoPlay: true } var current = 0; var tempCurrent=0;//for click event var transfer = false; var nieCarousel = function (box, options) { this.options = $.extend({}, defaultOptions, options); this._$children = $(this.options.children); this._$nav = $(this.options.navList); this._$resNav=$(this.options.resNav); this._num = this._$children.length; this._autoPlay=this.options.autoPlay; this._$box=$(this.options.box); this.init(); } nieCarousel.prototype.initNext = function () { var self = this; var num = self._num; var $ele = $(self.options.nextBtn); function showNext() { if (!transfer) { transfer = true; if(current+1==self._num){ self._$children.eq(0).css({left:'100%'}) } self._$children.eq(current % num).animate({ left: '-100%' }, 300); self._$children.eq(++current % num).animate({ left: '0%' }, 300, function () { transfer = false; self._$children.eq((current-1)%num).css({'left':'-100%'}); self._$children.eq((current+1)).css({'left':'100%'}) }); navTransfer(); } } function navTransfer(){ current%num==0?current=0:''; $('.center-slide-nav li .default').eq(current-1).animate({ top:'0' }).parent().removeClass('on'); $('.center-slide-nav li .default').eq(current).animate({ top:'-100%' }).parent().addClass('on'); self._$resNav.eq(current).addClass('on'); self._$resNav.eq(current-1).removeClass('on'); if(self.setTimeOutId&&!($.browser.msie&& $.browser.version=='6.0')){ $('.progress-inner').removeClass('progress-loading'); $('.progress-inner').eq((current+1)%self._num).addClass('progress-loading'); } } $ele.click(showNext); } nieCarousel.prototype.initPrev = function () { var self = this; var num = self._num; var $ele = $(self.options.prevBtn); function showPrev() { if (!transfer) { transfer = true; if(current%self._num==0){ self._$children.eq(-1).css({left:'-100%'}) } self._$children.eq(current % num).animate({ left: '100%' }, 300); self._$children.eq(--current % num).animate({ left: '0%' }, 300,function(){ transfer=false; self._$children.eq((current-1)%num).css({'left':'-100%'}); self._$children.eq((current+1)%num).css({'left':'100%'}) }); navTransfer(); current%num==0?current=0:''; } } function navTransfer(){ self._$nav.find('.default').eq(current+1).animate({ top:'0' }).parent().removeClass('on'); self._$nav.find('.default').eq(current).animate({ top:'-100%' }).parent().addClass('on'); self._$resNav.eq(current).addClass('on'); self._$resNav.eq(current+1).removeClass('on'); } $ele.click(showPrev); } nieCarousel.prototype.initNav = function () { var self = this; function setNavClickFn(index){ tempCurrent=current; current=index; var leftPos; if(!transfer&&(tempCurrent!=current)){ transfer=true; self._$nav.eq(tempCurrent).removeClass('on'); self._$resNav.eq(tempCurrent).removeClass('on'); self._$nav.eq(tempCurrent).find('.default').animate({ top:0 }) $(this).addClass('on'); current>tempCurrent?leftPos='-100%':leftPos='100%'; current>tempCurrent?self._$children.eq(current).css('left','100%'):self._$children.eq(current).css('left','-100%'); self._$children.eq(tempCurrent).animate({ left:leftPos }) self._$children.eq(current).animate({ left:0 },function(){ transfer=false; self._$children.not(current).each(function(index){ if(index>current){ $(this).css({left:'100%'}) }else{ $(this).css({left:'-100%'}) } if(index==current){ $(this).css('left','0') } }) }) } } self._$nav.each(function (index) { $(this).hover(function () { self._$nav.not('.on').find('.default').stop().animate({ top:'0' }) self._$nav.eq(index).find('.default').stop().animate({ top:'-100%' }) },function(){ !$(this).hasClass('on')&&$(this).find('.default').animate({ top:'0' }) }) $(this).click(function(){ setNavClickFn.call(this,index); }); }) self._$resNav.each(function(index){ $(this).click(function(){ setNavClickFn.call(this,index); }) }) } nieCarousel.prototype.autoPlay = function () { var self=this; this.setTimeOutId=setInterval(function(){ $(self.options.nextBtn).trigger('click') },3000) } nieCarousel.prototype.hoverEvent=function(){ var self=this; self._$box.hover(function(){ clearInterval(self.setTimeOutId); self.setTimeOutId=0; //watch if user click or auto play $('.progress-inner').removeClass('progress-loading'); },function(){ self._autoPlay&&self.autoPlay(); self._autoPlay&&!($.browser.msie&& $.browser.version=='6.0')&&$('.progress-inner').eq((current+1)%self._num).addClass('progress-loading'); }) } nieCarousel.prototype.initDefault=function(){ var self = this; var isFirst = false; this._$children.each(function (index) { index == 0 ? isFirst = true : isFirst = false; (!isFirst) && $(this).css({ left: '100%' }) }); this._$nav.find('.num').each(function(i){ $(this).html(i+1); }) this._$nav.eq(0).addClass('on').find('.default').css('top','-100%'); this._autoPlay&&!($.browser.msie&& $.browser.version=='6.0')&&$('.progress-inner').eq(1).addClass('progress-loading'); } nieCarousel.prototype.init = function () { this.initDefault(); this.initNext(); this.initPrev(); this.initNav(); this._autoPlay&&this.autoPlay(); this.hoverEvent(); } return nieCarousel; })(jQuery); $(function () { //set default speeds !override $.fx.speeds._default $.fx.speeds._default=300; var carousel = new nieCarousel('.center-slide-box', { children: '.center-slide-box a', nextBtn: '.slide-next', prevBtn: '.slide-prev', navList:'.center-slide-nav li', autoPlay:true }); /** * window resize set height */ $(window).resize(function(){ if($(window).width()<1000){ $('.center-slide').height($('.center-slide').width()*0.55); $('.center-news').height($('.center-slide').height()+1); }else{ $('.center-news').height(405); $('.center-slide').height(406); } if($(window).width()<768){ } }) if($(window).width()<1000){ $('.center-slide').height($('.center-slide').width()*0.55); $('.center-news').height($('.center-slide').height()+1); }else{ $('.center-news').height(405); $('.center-slide').height(406); } //entrance-list-res (function(){ var $ele= $('.entrance-list-ul li:not(.entrance-list-btn)'), length=$ele.length, next=true, prev=false, status=length%9; //for 768 function ipadEntrance(){ next&&(function(){ $('.entrance-list-next').removeClass('disabled'); $('.entrance-list-prev').addClass('disabled'); $ele.removeClass('res-hide'); for(var index=-status;index<0;index++){ $ele.eq(index).addClass('res-hide'); } }()); prev&&(function(){ $('.entrance-list-prev').removeClass('disabled'); $('.entrance-list-next').addClass('disabled'); $ele.removeClass('res-hide'); for(var index=0;index<status;index++){ $ele.eq(index).addClass('res-hide'); } }()); } ipadEntrance(); $('.entrance-list-btn').click(function(){ next=!next; prev=!prev; ipadEntrance(); }) })(); var entranceScroll=(function(){ var $ele=$('.entrance-list-ul li:not(.entrance-list-btn)'), $next=$('.entrance-list-next'), $prev=$('.entrance-list-prev'), $eleNav=$('.entrance-list-nav a'), length=$ele.length, nowCount= 0, groups=Math.ceil(length/4), cls=0; for(var i=0;i<length;i++){ $ele.eq(i).addClass('res-group-'+cls); (i+1)%4==0?++cls:''; i>3?'':$ele.eq(i).addClass('res-group-show'); } function init(){ $next.click(function(){ var current=(++nowCount)%groups, domEle=$('.res-group-'+current); $ele.removeClass('res-group-show'); domEle.addClass('res-group-show'); $eleNav.removeClass('current').eq(current).addClass('current'); nowCount%groups==0?nowCount=0:''; }) $prev.click(function(){ var current=(--nowCount)%groups, ii=current<0?(current+groups):current domEle=$('.res-group-'+ii); $ele.removeClass('res-group-show'); domEle.addClass('res-group-show'); $eleNav.removeClass('current').eq(current).addClass('current'); nowCount%groups==0?nowCount=0:''; }) $eleNav.each(function(i){ $(this).click(function(){ nowCount=i; $eleNav.removeClass('current').eq(i).addClass('current'); var domEle=$('.res-group-'+i); $ele.removeClass('res-group-show'); domEle.addClass('res-group-show'); }) }) } return{ init:init } }()) entranceScroll.init(); //mobile-list-res added by mrF 2014-5-8 var mgameLength = $('.mgame-list-pic').find('li').length,len; mgameLength%3 == 0?len = parseInt(mgameLength/3):len = parseInt(mgameLength/3)+1 for(var i = 0;i<len;i++){ $('.mgame-list-pic-nav').append('<a class="mgame-list-pic-nav-tab" href="javascript:void(0)"><div class="mgame-list-pic-nav-tab-bar"></div></a>'); } $('.mgame-list-pic-nav-tab').eq(0).addClass('current'); $('.mgame-list-pic-nav-tab').hover(function(){ var num = $(this).index(); $(this).addClass('current'); $(this).siblings().stop(false,true).removeClass('current'); $('.mgame-list-pic').stop().animate({'left':num*(-1017)+'px'},250); }) })
滚动HTML代码
<section class="center-slide"> <div class="center-slide-box"> <a href="http://gad.netease.com/gad/access?project_id=1035062&s=sddbS%2B1KjKSIhVkdV3OZ4D8ooB8%3D&code_type=1" target="_blank"><img src="http://img.nie.163.com/images/2014/7/4/2014-07-04_464367.jpg" alt="实况俱乐部 嘉年华"/></a> <a href="http://txhd.163.com/" target="_blank"><img src="http://img.nie.163.com/images/2014/7/7/2014-07-07_464993.jpg" alt="天下HD 凶萌开测"/></a> <a href="http://xy3.163.com/" target="_blank"><img src="http://img.nie.163.com/images/2014/7/9/2014-07-09_465419.jpg" alt="新大话3 全新资料片"/></a> <a href="http://gad.netease.com/gad/access?project_id=1034900&s=GnBeQHwpvPVXwpCUPlaoUW1MmC0%3D&code_type=1" target="_blank"><img src="http://img.nie.163.com/images/2014/7/4/2014-07-04_464161.jpg" alt="忍者必须死2 新版本"/></a> <a href="http://yzr.163.com" target="_blank"><img src="http://img.nie.163.com/images/2014/6/20/2014-06-20_460757.jpg" alt="影之刃 终极封测"/></a> <span class="slide-next"></span> <span class="slide-prev"></span> </div> <ul class="center-slide-nav"> <li> <a href="javascript:;" class="default"> <span class="num">1</span> <div class="progress"> <div class="progress-inner"></div> </div> <span class="title">实况俱乐部 嘉年华</span> </a> <a href="javascript:;" class="hover"> <div class="mask"></div> <img src="http://nie.163.com/banner/13v1/nie_0704sk.jpg"> <div class="content"> <p>实况俱乐部 嘉年华</p> <span>查看详情<i></i></span> </div> </a> </li> <li> <a href="javascript:;" class="default"> <span class="num">1</span> <div class="progress"> <div class="progress-inner"></div> </div> <span class="title">天下HD 凶萌开测</span> </a> <a href="javascript:;" class="hover"> <div class="mask"></div> <img src="http://nie.163.com/banner/13v1/nie_txhd0707.jpg"> <div class="content"> <p>天下HD 凶萌开测</p> <span>查看详情<i></i></span> </div> </a> </li> <li> <a href="javascript:;" class="default"> <span class="num">1</span> <div class="progress"> <div class="progress-inner"></div> </div> <span class="title">新大话3 全新资料片</span> </a> <a href="javascript:;" class="hover"> <div class="mask"></div> <img src="http://nie.163.com/banner/13v1/nie_xy30709.jpg"> <div class="content"> <p>新大话3 全新资料片</p> <span>查看详情<i></i></span> </div> </a> </li> <li> <a href="javascript:;" class="default"> <span class="num">1</span> <div class="progress"> <div class="progress-inner"></div> </div> <span class="title">忍者必须死2 新版本</span> </a> <a href="javascript:;" class="hover"> <div class="mask"></div> <img src="http://nie.163.com/banner/13v1/nie_rz20140703.jpg"> <div class="content"> <p>忍者必须死2 新版本</p> <span>查看详情<i></i></span> </div> </a> </li> <li> <a href="javascript:;" class="default"> <span class="num">1</span> <div class="progress"> <div class="progress-inner"></div> </div> <span class="title">影之刃 终极封测</span> </a> <a href="javascript:;" class="hover"> <div class="mask"></div> <img src="http://nie.163.com/banner/13v1/nie_yzr0616.jpg"> <div class="content"> <p>影之刃 终极封测</p> <span>查看详情<i></i></span> </div> </a> </li> </ul> <ul class="center-slide-res-nav"> <li class="on"><a href="javascript"></a></li> <li><a href="javascript"></a></li> <li><a href="javascript"></a></li> <li><a href="javascript"></a></li> <li><a href="javascript"></a></li> </ul> </section>
相关文章推荐
- Jquery与JS两种方法仿twitter/新浪微博 高度自适应无缝滚动实现代码
- Js无缝滚动效果,支持不固定行高
- Pomelo:网易开源基于 Node.js 的游戏服务端框架
- Pomelo:网易开源基于 Node.js 的游戏服务端框架
- Pomelo:网易开源基于 Node.js 的游戏服务端框架
- 2D游戏引擎(十一)—— 向游戏引擎添加滚动背景支持
- music-api-next:一款支持网易、xiami和QQ音乐的JS爬虫库
- Pomelo:网易开源基于 Node.js 的游戏服务端框架
- js图片水平滚动插件,支持上下滚动
- 支持android&ios高度自适应及JS相互调用的组件react-native-webview2
- 比较好用的js文字无缝滚动,支持ff ie678
- Pomelo:网易开源基于 Node.js 的游戏服务端框架
- 返回顶部,js,css,页面离开顶部一定距离后出现返回顶部,点击后滚动回顶部,支持IE,FF,chrome ,safari,opera[摘自布布分享,tech.bubufx.com]
- Pomelo:网易开源基于 Node.js 的游戏服务端框架
- JS图片自动或者手动滚动效果(支持left或者up)
- Jquery与JS两种方法仿twitter/新浪微博 高度自适应无缝滚动实现代码
- js:四个方向无跳动/无缝滚动,支持图片/html串,支持延时缓慢翻页,ff/ie测试 -- 2012-1-16改
- js 象棋游戏 _ 支持双方在线对战
- JS 实现产品图片的轮播,支持向左向右滚动
- <js>jquery实现新闻滚动效果,ie11支持