Heim > Web-Frontend > js-Tutorial > Implementierung des dynamischen Vollbild-Bildlauf-Plugins fullPage_jquery, das ein NetEase-Postfach basierend auf JQuery imitiert

Implementierung des dynamischen Vollbild-Bildlauf-Plugins fullPage_jquery, das ein NetEase-Postfach basierend auf JQuery imitiert

WBOY
Freigeben: 2016-05-16 15:38:40
Original
1493 Leute haben es durchsucht

Ich zeige Ihnen zunächst die Renderings wie folgt:

Anwendung:

Führen Sie zunächst jquery.js, jquery-ui.js, fullPage.js und die Stildatei jquery.fullPage.css

im Kopfbereich ein
<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
Nach dem Login kopieren

Dann erstellen Sie den HTML-Code. Der Code ist hier länger, also verwenden Sie ... in der Mitte anstelle von

<div class="section section1">
<div class="bg"><img src="images/section1.jpg" alt=""></div>
<div class="bg11"></div>
<div class="bg12"></div>
<div class="bg13"></div>
<div class="mail">
<a class="mail-163" href="http://www.jqcool.net/">163邮箱</a>
<a class="mail-126" href="http://www.jqcool.net/">126邮箱</a>
<a class="mail-yeah" href="http://www.jqcool.net/">yeah邮箱</a>
</div>
<div class="hgroup">
<h1><a href="http://www.jq22.com/">网易邮箱6.0</a></h1>
<h2>改变,不止所见。</h2>
</div>
<p class="p11">网易邮箱6.0版&mdash;&mdash;2014年最具创意气质的重量级新邮箱,重生光华,为之瞩目。唯美<br>的视觉设计和视觉化交互,无可替代的独创动态情景皮肤,多项国内创意产品专利技术,<br>成就无与伦比的出众品味,无可比拟的美妙体验。</p>
</div>
<div class="section section2">内容</div>
<div class="section section3">内容</div>
...
<div class="section section9">内容</div>
<div class="section section10">
 <div class="bg"><img src="images/section10.jpg" alt=""></div>
 <div class="bg101"></div>
 <div class="bg102"></div>
 <div class="bg103"></div>
 <a class="go" href="http://www.jqcool.net/">马上体验</a>
 <p class="copyright">
 <a href="javascript:">关于网易</a>
 <a href="javascript:">关于网易免费邮</a>
 <a href="javascript:">邮箱官方博客</a>
 <a href="javascript:">客户服务</a>
 <a href="javascript:">隐私政策</a>
 <span>|</span>
 <span>网易公司版权所有 &copy; 1997-2014 </span>
 </p>
</div>
Nach dem Login kopieren

Um mit niedrigeren IE-Versionen kompatibel zu sein, verwendet der „große Hintergrund“ die img-Methode (section1.jpg) und setzt die img-Breite und -Höhe in CSS auf 100 %, um den gesamten Bildschirm auszufüllen.

JavaScript

$(function(){
 if($.browser.msie && $.browser.version < 10){
 $('body').addClass('ltie10');
 }
 $.fn.fullpage({
 verticalCentered: false,
 anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6', 'page7', 'page8', 'page9', 'page10'],
 navigation: true,
 navigationTooltips: ['首页', '视觉', '交互', '皮肤', '功能', '待办邮件', '联系人邮件', '科技', '连接易信', '马上体验']
 });
});
Nach dem Login kopieren

Um ein besseres Erlebnis in niedrigeren IE-Versionen zu haben, die keine CSS3-Animation unterstützen, beurteilen wir den Browser und fügen dem Hauptteil eine ltie10-Klasse hinzu, wenn die IE-Version niedriger als 10 ist. Die Hauptfunktion dieser Klasse besteht darin, das Problem zu lösen, dass das Hintergrundbild beim Scrollen in niedrigeren Versionen des IE sofort ausgeblendet wird.

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage