課程
/前端開發(fā)
/jQuery
/全屏切換效果
老師有源碼可以下載嗎？
2015-04-20
源自：全屏切換效果 1-1
正在回答
//自己寫的，根據老師的思路，修正了bug
html
<!DOCTYPE?html> <html> <head> <meta?charset="UTF-8"> <title>Document</title> <style?type="text/css"> *{ padding:?0; margin:?0; } html,?body{ height:?100%; overflow:?hidden; } #container,?.sections,?.section{ height:?100%; } #section0,#section1,#section2,#section3{ background-color:?#000; background-size:?cover; background-position:?50%?50%; text-align:?center; color:?white; } #section0{ background-image:?url(images/1.jpg); } #section1{ background-image:?url(images/2.jpg); } #section2{ background-image:?url(images/3.jpg); } #section3{ background-image:?url(images/4.jpg); } .pages{ position:fixed; right:?10px; top:?50%; list-style:?none; } .pages?li{ width:?8px; height:?8px; border-radius:?50%; background:?#fff; margin:?0?0?10px?5px; } .pages?li.active{ width:?14px; height:?14px; border:?2px?solid?#FFFE00; background:?none; margin-left:?0; } </style> </head> <body> <div?id="container"> <div> <div?id="section0"> <h3>this?is?the?page1</h3> </div> <div?id="section1"> <h3>this?is?the?page2</h3> </div> <div?id="section2"> <h3>this?is?the?page3</h3> </div> <div?id="section3"> <h3>this?is?the?page4</h3> </div> </div> </div> <script?type="text/javascript"?src="jquery-1.11.2.min.js"></script> <script?type="text/javascript"?src="jqchange.js"></script> <script?type="text/javascript"> $('#container').PageSwitch(); </script> </body> </html>
js
(function?($)?{ //通過判斷js屬性的方式獲取前綴 var?_prefix?=?(function?(temp)?{ var?aPrefix?=?['webkit','Moz','o','ms'], props?=?''; for?(var?i?in?aPrefix)?{ props?=?aPrefix[i]?+?'Transition'; if?(temp.style[?props]?!==?undefined)?{ return?'-'?+?aPrefix[i].toLowerCase()?+?'-'; } } return?false; })(document.createElement(PageSwitch));//實參 //內部實際主函數 var?PageSwitch?=?(function?()?{ //element?=?外層 function?PageSwitch?(element,?options)?{ this.settings?=?$.extend(true,?$.fn.PageSwitch.defaults,?options||{}); this.element?=?element; this.init(); } PageSwitch.prototype?=?{ init?:?function?()?{ //全局公共方法，實現內容 var?me?=?this;//保存pageSwitch對象 me.selectors?=?me.settings.selectors; me.sections?=?me.element.find(me.selectors.sections);//整個頁面框架 me.section?=?me.sections.find(me.selectors.section);//每個頁面元素 me.direction?=?me.settings.direction?=="vertical"??true?:?false; me.pagesCount?=?me.pagesCount();//頁面元素計數 me.index?=(me.settings.index?>=?0?&&?me.settings.index?<?me.pagesCount)??me.settings.index?:?0;//初始頁面位置 me.canScroll?=?true; if(!me.direction)?{ me._initLayout();//初始化布局 } if(me.settings.pagination)?{ me._initPaging();//創(chuàng)建分頁處理 } me._initEvent();//事件綁定 me._scrollPage();//初始化位置 }, //獲取滑動頁面數量 pagesCount?:?function?()?{ return?this.section.length; }, //獲取華東頁面寬度、高度 switchLength?:?function?()?{ return?this.direction??this.element.height()?:?this.element.width(); }, //向前滑動上一個頁面 prev?:?function?()?{ var?me?=?this; if?(me.index?>?0)?{ me.index?--; }?else?if?(me.settings.loop)?{ me.index?=?me.pagesCount?-?1; } me._scrollPage(); }, //向后滑動下一個頁面 next?:?function?()?{ var?me?=?this; if?(me.index?<?me.pagesCount?-?1)?{ me.index?++; }?else?if?(me.settings.loop)?{ me.index?=?0; } me._scrollPage(); }, //橫屏頁面布局 _initLayout?:?function?()?{ var?me?=?this; var?width?=?me.pagesCount?*?100?+?'%', cellWidth?=?(100/me.pagesCount).toFixed(2)?+?'%'; me.sections.width(width); me.section.width(cellWidth).css('float','left'); }, //創(chuàng)建分頁處理 _initPaging?:?function?()?{ var?me?=?this, pageClass?=?me.selectors.page.substring(1); me.activeClass?=?me.selectors.active.substring(1); var?pageHtml?=?'<ul?class="'+pageClass+'">'; for?(var?i?=?0;?i?<?me.pagesCount;?i++)?{ pageHtml?+=?'<li></li>'; } pageHtml?+='</ul>'; me.element.append(pageHtml); var?pages?=?me.element.find(me.selectors.page); me.pageItem?=?pages.find('li'); me.pageItem.eq(me.index).addClass(me.activeClass); if?(me.direction)?{ pages.addClass('vertical'); }?else?{ pages.addClass('horizontal'); } }, //事件綁定 _initEvent?:?function?()?{ var?me?=?this; //點擊事件 me.element.on('click',?me.selectors.page?+?'?li',?function()?{ if?(me.sections.is(":animated"))?{ me.sections.stop(true,true); } me.index?=?$(this).index(); me._scrollPage(); }); //滾輪事件 me.element.on('mousewheel?DOMMouseScroll',?function?(e)?{ if?(!me.canScroll)?{ return; } var?delta?=?e.originalEvent.wheelDelta?||?-?e.originalEvent.detail; //向上 if(delta?>?0?&&?((me.index?&&?!me.settings.loop)?||?me.settings.loop))?{ me.prev(); //向下 }?else?if?(delta?<?0?&&?((me.index?!=?(me.pagesCount?-?1)?&&?!me.settings.loop)?||?me.settings.loop))?{ me.next(); } }); //j鍵盤事件 if?(me.settings.keyboard)?{ $(window).on('keydown',function?(e)?{ if?(!me.canScroll)?{ return; } var?keyCode?=?e.keyCode; if?((keyCode?==?37?||?keyCode?==?38)?&&?((me.index?&&?!me.settings.loop)?||?me.settings.loop))?{ me.prev(); }?else?if?((keyCode?==?39?||?keyCode?==?40)?&&?((me.index?!=?(me.pagesCount?-?1)?&&?!me.settings.loop)?||?me.settings.loop))?{ me.next(); } }); } //窗口變化事件 $(window).resize(function?()?{ var?currentLength?=?me.switchLength(), offset?=?me.settings.direction??me.section.eq(me.index).offset().top?:?me.section.eq(me.index).offset().left; if?(Math.abs(offset)?>?currentLength/2?&&?me.index?<?(me.pagesCount?-?1))?{ me.index?++; } if?(me.index)?{ me._scrollPage(); } }); //動畫結束后回調事件 me.sections.on('transitionend?webkitTransitionEnd?oTransitionEnd?otransitionEnd',?function?()?{ me.canScroll?=?true; if?(me.settings.callback?&&?$.type(me.settings.callback)?==?'function')?{ me.settings.callback(); } }); }, _scrollPage?:?function?()?{ var?me?=?this; me.canScroll?=?false; if?(_prefix)?{ me.sections.css(_prefix?+?'transition','all?'?+?me.settings.duration/1000?+?'s?'?+?me.settings.easing); var?translate?=?me.direction??'translateY(-'?+?me.switchLength()?*?me.index?+?'px)'?:?'translateX(-'?+?me.switchLength()?*?me.index?+?'px)'; me.sections.css(_prefix?+?'transform',?translate); }?else?{ var?animateCss?=?me.direction??{top?:?-me.switchLength()?*?me.index}?:?{left?:?-me.switchLength()?*?me.index}; me.sections.css('position','relative'); me.sections.animate(animateCss,?me.settings.direction,?function?()?{ me.canScroll?=?true; if?(me.settings.callback?&&?$.type(me.settings.callback)?==?'function')?{ me.settings.callback(); } }); } if?(me.settings.pagination)?{ me.pageItem.eq(me.index).addClass(me.activeClass).siblings('li').removeClass(me.activeClass); } } }; return?PageSwitch;//注冊全局方法 })(); /*-----------------------------------------------------------------*/ //主函數 $.fn.PageSwitch?=?function?(options)?{ return?this.each(function?()?{ var?me?=?$(this), instance?=?me.data("PageSwitch");//檢驗是否存在對象實例，用data存放對象的實例 if?(!instance)?{ instance?=?new?PageSwitch(me,?options);//從內部實際主函數（全局方法）中新建實例并存儲 me.data("PageSwitch",?instance);//保存到data里面 } //判斷傳入參數如果是字符串，返回該字符串方法調用 if?($.type(options)?==="string")?{?return?instance[options]();} //在使用時訪問元素的繼承方法init //$("div").PageSwitch("init"); }); }; //參數 $.fn.PageSwitch.defaults?=?{ selectors?:?{ sections?:?".sections", section?:?".section", page?:?".pages", active?:?".active" }, index?:?0, easing?:?"ease", duration?:?500,//毫秒 loop?:?false, pagination?:?true,//分頁 keyboard?:?true, direction?:?"vertical", callback?:?"" }; /*-----------------------------------------------------------------*/ //可通過屬性的方式全局執(zhí)行一次初始化 $(function?()?{ $("[data-PageSwitch]").PageSwitch(); }); })(jQuery);
舉報
如何在PC和移動端實現全屏切換效果，本課程會給你答案
1 回答可以下載源碼嗎？
1 回答可以提高一下源代碼嗎？
1 回答源碼下載~
1 回答有源碼嗎？
1 回答有沒有代碼，可以參考下
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優(yōu)惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2015-12-16
html
<!DOCTYPE?html> <html> <head> <meta?charset="UTF-8"> <title>Document</title> <style?type="text/css"> *{ padding:?0; margin:?0; } html,?body{ height:?100%; overflow:?hidden; } #container,?.sections,?.section{ height:?100%; } #section0,#section1,#section2,#section3{ background-color:?#000; background-size:?cover; background-position:?50%?50%; text-align:?center; color:?white; } #section0{ background-image:?url(images/1.jpg); } #section1{ background-image:?url(images/2.jpg); } #section2{ background-image:?url(images/3.jpg); } #section3{ background-image:?url(images/4.jpg); } .pages{ position:fixed; right:?10px; top:?50%; list-style:?none; } .pages?li{ width:?8px; height:?8px; border-radius:?50%; background:?#fff; margin:?0?0?10px?5px; } .pages?li.active{ width:?14px; height:?14px; border:?2px?solid?#FFFE00; background:?none; margin-left:?0; } </style> </head> <body> <div?id="container"> <div> <div?id="section0"> <h3>this?is?the?page1</h3> </div> <div?id="section1"> <h3>this?is?the?page2</h3> </div> <div?id="section2"> <h3>this?is?the?page3</h3> </div> <div?id="section3"> <h3>this?is?the?page4</h3> </div> </div> </div> <script?type="text/javascript"?src="jquery-1.11.2.min.js"></script> <script?type="text/javascript"?src="jqchange.js"></script> <script?type="text/javascript"> $('#container').PageSwitch(); </script> </body> </html>js
(function?($)?{ //通過判斷js屬性的方式獲取前綴 var?_prefix?=?(function?(temp)?{ var?aPrefix?=?['webkit','Moz','o','ms'], props?=?''; for?(var?i?in?aPrefix)?{ props?=?aPrefix[i]?+?'Transition'; if?(temp.style[?props]?!==?undefined)?{ return?'-'?+?aPrefix[i].toLowerCase()?+?'-'; } } return?false; })(document.createElement(PageSwitch));//實參 //內部實際主函數 var?PageSwitch?=?(function?()?{ //element?=?外層 function?PageSwitch?(element,?options)?{ this.settings?=?$.extend(true,?$.fn.PageSwitch.defaults,?options||{}); this.element?=?element; this.init(); } PageSwitch.prototype?=?{ init?:?function?()?{ //全局公共方法，實現內容 var?me?=?this;//保存pageSwitch對象 me.selectors?=?me.settings.selectors; me.sections?=?me.element.find(me.selectors.sections);//整個頁面框架 me.section?=?me.sections.find(me.selectors.section);//每個頁面元素 me.direction?=?me.settings.direction?=="vertical"??true?:?false; me.pagesCount?=?me.pagesCount();//頁面元素計數 me.index?=(me.settings.index?>=?0?&&?me.settings.index?<?me.pagesCount)??me.settings.index?:?0;//初始頁面位置 me.canScroll?=?true; if(!me.direction)?{ me._initLayout();//初始化布局 } if(me.settings.pagination)?{ me._initPaging();//創(chuàng)建分頁處理 } me._initEvent();//事件綁定 me._scrollPage();//初始化位置 }, //獲取滑動頁面數量 pagesCount?:?function?()?{ return?this.section.length; }, //獲取華東頁面寬度、高度 switchLength?:?function?()?{ return?this.direction??this.element.height()?:?this.element.width(); }, //向前滑動上一個頁面 prev?:?function?()?{ var?me?=?this; if?(me.index?>?0)?{ me.index?--; }?else?if?(me.settings.loop)?{ me.index?=?me.pagesCount?-?1; } me._scrollPage(); }, //向后滑動下一個頁面 next?:?function?()?{ var?me?=?this; if?(me.index?<?me.pagesCount?-?1)?{ me.index?++; }?else?if?(me.settings.loop)?{ me.index?=?0; } me._scrollPage(); }, //橫屏頁面布局 _initLayout?:?function?()?{ var?me?=?this; var?width?=?me.pagesCount?*?100?+?'%', cellWidth?=?(100/me.pagesCount).toFixed(2)?+?'%'; me.sections.width(width); me.section.width(cellWidth).css('float','left'); }, //創(chuàng)建分頁處理 _initPaging?:?function?()?{ var?me?=?this, pageClass?=?me.selectors.page.substring(1); me.activeClass?=?me.selectors.active.substring(1); var?pageHtml?=?'<ul?class="'+pageClass+'">'; for?(var?i?=?0;?i?<?me.pagesCount;?i++)?{ pageHtml?+=?'<li></li>'; } pageHtml?+='</ul>'; me.element.append(pageHtml); var?pages?=?me.element.find(me.selectors.page); me.pageItem?=?pages.find('li'); me.pageItem.eq(me.index).addClass(me.activeClass); if?(me.direction)?{ pages.addClass('vertical'); }?else?{ pages.addClass('horizontal'); } }, //事件綁定 _initEvent?:?function?()?{ var?me?=?this; //點擊事件 me.element.on('click',?me.selectors.page?+?'?li',?function()?{ if?(me.sections.is(":animated"))?{ me.sections.stop(true,true); } me.index?=?$(this).index(); me._scrollPage(); }); //滾輪事件 me.element.on('mousewheel?DOMMouseScroll',?function?(e)?{ if?(!me.canScroll)?{ return; } var?delta?=?e.originalEvent.wheelDelta?||?-?e.originalEvent.detail; //向上 if(delta?>?0?&&?((me.index?&&?!me.settings.loop)?||?me.settings.loop))?{ me.prev(); //向下 }?else?if?(delta?<?0?&&?((me.index?!=?(me.pagesCount?-?1)?&&?!me.settings.loop)?||?me.settings.loop))?{ me.next(); } }); //j鍵盤事件 if?(me.settings.keyboard)?{ $(window).on('keydown',function?(e)?{ if?(!me.canScroll)?{ return; } var?keyCode?=?e.keyCode; if?((keyCode?==?37?||?keyCode?==?38)?&&?((me.index?&&?!me.settings.loop)?||?me.settings.loop))?{ me.prev(); }?else?if?((keyCode?==?39?||?keyCode?==?40)?&&?((me.index?!=?(me.pagesCount?-?1)?&&?!me.settings.loop)?||?me.settings.loop))?{ me.next(); } }); } //窗口變化事件 $(window).resize(function?()?{ var?currentLength?=?me.switchLength(), offset?=?me.settings.direction??me.section.eq(me.index).offset().top?:?me.section.eq(me.index).offset().left; if?(Math.abs(offset)?>?currentLength/2?&&?me.index?<?(me.pagesCount?-?1))?{ me.index?++; } if?(me.index)?{ me._scrollPage(); } }); //動畫結束后回調事件 me.sections.on('transitionend?webkitTransitionEnd?oTransitionEnd?otransitionEnd',?function?()?{ me.canScroll?=?true; if?(me.settings.callback?&&?$.type(me.settings.callback)?==?'function')?{ me.settings.callback(); } }); }, _scrollPage?:?function?()?{ var?me?=?this; me.canScroll?=?false; if?(_prefix)?{ me.sections.css(_prefix?+?'transition','all?'?+?me.settings.duration/1000?+?'s?'?+?me.settings.easing); var?translate?=?me.direction??'translateY(-'?+?me.switchLength()?*?me.index?+?'px)'?:?'translateX(-'?+?me.switchLength()?*?me.index?+?'px)'; me.sections.css(_prefix?+?'transform',?translate); }?else?{ var?animateCss?=?me.direction??{top?:?-me.switchLength()?*?me.index}?:?{left?:?-me.switchLength()?*?me.index}; me.sections.css('position','relative'); me.sections.animate(animateCss,?me.settings.direction,?function?()?{ me.canScroll?=?true; if?(me.settings.callback?&&?$.type(me.settings.callback)?==?'function')?{ me.settings.callback(); } }); } if?(me.settings.pagination)?{ me.pageItem.eq(me.index).addClass(me.activeClass).siblings('li').removeClass(me.activeClass); } } }; return?PageSwitch;//注冊全局方法 })(); /*-----------------------------------------------------------------*/ //主函數 $.fn.PageSwitch?=?function?(options)?{ return?this.each(function?()?{ var?me?=?$(this), instance?=?me.data("PageSwitch");//檢驗是否存在對象實例，用data存放對象的實例 if?(!instance)?{ instance?=?new?PageSwitch(me,?options);//從內部實際主函數（全局方法）中新建實例并存儲 me.data("PageSwitch",?instance);//保存到data里面 } //判斷傳入參數如果是字符串，返回該字符串方法調用 if?($.type(options)?==="string")?{?return?instance[options]();} //在使用時訪問元素的繼承方法init //$("div").PageSwitch("init"); }); }; //參數 $.fn.PageSwitch.defaults?=?{ selectors?:?{ sections?:?".sections", section?:?".section", page?:?".pages", active?:?".active" }, index?:?0, easing?:?"ease", duration?:?500,//毫秒 loop?:?false, pagination?:?true,//分頁 keyboard?:?true, direction?:?"vertical", callback?:?"" }; /*-----------------------------------------------------------------*/ //可通過屬性的方式全局執(zhí)行一次初始化 $(function?()?{ $("[data-PageSwitch]").PageSwitch(); }); })(jQuery);